Here you will see how to implement the Mellowtel library in your Electron project. Estimated time to complete: 3-5 minutes.

Requirements

Before you start, make sure that:

  1. You have an Electron application set up with either JavaScript or TypeScript
  2. You have a package manager (npm or yarn) installed
  3. You have a configuration key from the Mellowtel Dashboard

Install npm package

To install the npm package, run the following command in your terminal:

npm install mellowtel-electron

Basic Implementation

There are two ways you can implement the library in your Electron application:

  1. Using the built-in consent dialog (recommended)
  2. Creating your own custom consent interface

First, import the necessary dependencies and initialize Mellowtel in your main process (usually the file called: main.ts):

import { app, BrowserWindow } from 'electron';
// 1. importing necessary dependencies
import Mellowtel from 'mellowtel-electron';

app.whenReady().then(async () => {
  // 2. Create Mellowtel instance
  const mellowtel: Mellowtel = new Mellowtel('<configuration_key>'); // Replace with your configuration key

  // 3. Request consent with a custom reward message using built-in dialog.
  const consent = await mellowtel.requestConsent(window /* Current active page window*/, "Get Premium Free");

  if (consent) {
      // Handle successful opt-in (e.g., activate premium features)
  }

  // 4. Initialize Mellowtel
  await mellowtel.init();
});

Implementing Settings Access

It’s important to provide users with easy access to their Mellowtel settings. You can show the settings dialog using:

// Add this where you handle settings-related actions (e.g., menu item click)
await mellowtel.showConsentSettings(window);

If you prefer to create your own consent interface, you can manually manage the opt-in/opt-out process.

import Mellowtel from 'mellowtel-electron';

const mellowtel = new Mellowtel('<configuration_key>');

// Check current opt-in status
const isOptedIn = mellowtel.getOptInStatus();

// Manual opt-in
if (!isOptedIn) {
    await mellowtel.optIn();
    await mellowtel.init();
}

// Manual opt-out
async function handleOptOut() {
    await mellowtel.optOut();
}

Best Practices

  1. Always initialize Mellowtel after obtaining user consent
  2. Provide clear access to settings through your application menu or settings page
  3. Handle opt-in/opt-out states appropriately in your application logic
  4. Use meaningful reward messages that align with your application’s features

API Reference

The Mellowtel library for Electron provides the following methods. You can use this reference to understand how to interact with the library:

new Mellowtel(configurationKey: string)

Creates a new instance of the Mellowtel client.

requestConsent(window: BrowserWindow, rewardMessage?: string): Promise<boolean>

Shows the built-in consent dialog and returns whether the user opted in.

init(): Promise<void>

Initializes the Mellowtel service. Should be called after obtaining consent.

showConsentSettings(window: BrowserWindow): Promise<void>

Opens the Mellowtel settings dialog.

getOptInStatus(): boolean

Returns the current opt-in status.

optIn(): Promise<void>

Manually opts the user into the service.

optOut(): Promise<void>

Manually opts the user out of the service.

Need help? Join our Discord community for support.