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

​

Option 1: Using Built-in Consent Dialog

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);

​

Option 2: Custom Consent Interface

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.