Integreer Mellowtel in je Electron-app

​

Vereisten

• Een Mellowtel-account en configuratiesleutel (verkrijg deze via het dashboard).
• Een Electron-applicatie met toegang tot het hoofdproces.

​

Installatie

​

1. Installeer het pakket

npm install mellowtel-electron

​

2. Voeg toe aan je code

import { app, BrowserWindow } from 'electron';
import Mellowtel, { setupMellowtelApp } from 'mellowtel-electron';

// Optioneel: Roep AAN voordat app.ready om systeemdialogen te voorkomen
setupMellowtelApp();

// Wanneer de app klaar is, maak het venster
app.whenReady().then(async () => {
  let win = createWindow();

  const mellowtel: Mellowtel = new Mellowtel('YOUR_CONFIGURATION_KEY');

  await mellowtel.requestConsent(win, "3 maanden gratis")
  await mellowtel.init()
});

• new Mellowtel(configurationKey, options?) installeert de SDK. De enige beschikbare optie vandaag is disableLogs, die standaard op true staat. Zet het op false tijdens de integratie zodat je de verbindingsstatus en aanvraagactiviteit in je terminal kunt zien.
• requestConsent(window, incentive) rendert een native Electron-berichtvenster gekoppeld aan de BrowserWindow die je doorgeeft. Het tweede argument is de prominente kop van de dialoog (bijvoorbeeld, "3 maanden gratis"), getoond boven een vaste uitleg van wat Mellowtel doet. Het lost op naar true als de gebruiker accepteert, false als de gebruiker weigert of de dialoog sluit, en undefined als toestemming al op bestand is. De SDK bewaart automatisch de opt-in beslissing, dus je hoeft niet optIn() daarna aan te roepen.
• init() gooit alleen een fout wanneer configurationKey leeg is. Als de gebruiker niet heeft ingestemd, logt het en retourneert het stilletjes. Anders opent het een WebSocket naar Mellowtel’s backend. De oproep is niet-blokkerend voor renderer UI, dus vensters blijven responsief terwijl de verbinding wordt opgezet.

​

Voorkomen van systeemdialoogonderbrekingen (aanbevolen)

​

Gebruikerstoestemming

1. Gebruik de ingebouwde native dialoog via requestConsent(window, incentive). Dit is de snelste weg en is wat de snippet hierboven laat zien. Het rendert een native Electron dialog.showMessageBox met je incentive-tekst als de kop en bewaart automatisch de beslissing van de gebruiker.
2. Bouw je eigen toestemmings-UI en stuur de SDK aan via optIn(), optOut(), en getOptInStatus(). Gebruik dit als je aangepaste branding, rijkere uitleg of lokalisatie wilt die verder gaat dan wat de native dialoog biedt.

​

Wat je toestemmingsdialoog moet bevatten

​

Laat gebruikers later hun toestemming wijzigen

​

Methode Referentie

• init(): Promise<void> start de service als de gebruiker heeft ingestemd, of retourneert stilletjes vroegtijdig als dat niet het geval is. Gooit alleen een fout wanneer de configuratiesleutel leeg is.
• shutdown(): Promise<void> ruimt SDK-bronnen op wanneer de applicatie sluit. Sluit de WebSocket, vernietigt verborgen werkervensters en wist achtergrondtimers. Behoudt de opt-in voorkeur van de gebruiker.
• requestConsent(window: BrowserWindow, incentive: string): Promise<boolean | undefined> toont de ingebouwde native toestemmingsdialoog en bewaart het resultaat. Retourneert true bij acceptatie, false bij weigering of sluiten, undefined als toestemming al was gegeven.
• showConsentSettings(window: BrowserWindow): Promise<void> toont de ingebouwde beheer-toestemming dialoog. De SDK behandelt de opt-in / opt-out overgangen intern wanneer de gebruiker zijn keuze wijzigt.

• optIn(): Promise<void> markeert de gebruiker als ingestemd zonder een dialoog te tonen. Gebruik dit alleen nadat je toestemming hebt verzameld via je eigen UI.
• optOut(): Promise<void> markeert de gebruiker als afgemeld en voert volledige opruiming uit (dezelfde bronnen als shutdown(), plus het wissen van de opgeslagen toestemmingsvoorkeur). Er is geen noodzaak om shutdown() daarna aan te roepen.
• getOptInStatus(): boolean | undefined retourneert de huidige opt-in status, of undefined als de gebruiker nooit een keuze heeft gemaakt.
• getNodeId(): string retourneert de Mellowtel knooppuntidentificatie voor deze installatie. Handig bij het indienen van supporttickets.

• getTotalRequestCount(): number retourneert het totale aantal verwerkte aanvragen sinds installatie.
• getDailyRequestCount(): number retourneert het aantal verwerkte aanvragen vandaag.
• getRequestCountForDate(date: string): number retourneert het aantal voor een specifieke YYYY-MM-DD datum.
• getDailyRequestsHistory(): { [date: string]: number } retourneert elke dagelijkse telling als een map.
• getRequestCountsInRange(startDate: string, endDate: string): { [date: string]: number } retourneert tellingen voor een datumbereik.
• getRequestCounts(): { total: number; daily: number; dailyHistory: { [date: string]: number } } retourneert alle drie de counters in één oproep.

​

Levenscyclus en app-afsluiting

• Sluit de WebSocket-verbinding.
• Vernietigt verborgen werkervensters.
• Wist achtergrondtimers en netwerkbronnen.
• Behoudt de opt-in voorkeur van de gebruiker.

​

Enkel-venster applicaties

mainWindow.on('closed', async () => {
  mainWindow = null;

  if (process.platform !== 'darwin') {
    await mellowtel.shutdown();
    app.quit();
  }
});

​

Systeemvak applicaties

trayQuitItem.click = async () => {
  await mellowtel.shutdown();
  app.quit();
};

​

macOS applicaties

​

Afmelden

await mellowtel.optOut();

​

Opnieuw starten

await mellowtel.optIn(); // Alleen nodig na optOut()
await mellowtel.init();

​

Toestemming Persistentie

• macOS: ~/Library/Application Support/<YourAppName>/config.json
• Windows: %APPDATA%\<YourAppName>\config.json
• Linux: ~/.config/<YourAppName>/config.json

​

Probleemoplossing