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. Configureer npm-authenticatie

@mellowtel-inc:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=YOUR_NPM_TOKEN

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

​

2. Installeer het pakket

npm install @mellowtel-inc/mellowtel-electron

​

3. Voeg toe aan je code

import { app, BrowserWindow } from 'electron';
import Mellowtel from '@mellowtel-inc/mellowtel-electron';


// 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, "Krijg 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 verzoekactiviteit 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, "Krijg 3 maanden gratis"), getoond boven een vaste uitleg van wat Mellowtel doet. Het resulteert in true als de gebruiker accepteert, false als de gebruiker weigert of de dialoog sluit, en undefined als toestemming al op bestand is. De SDK slaat de opt-in beslissing automatisch op, dus je hoeft optIn() daarna niet aan te roepen.
• init() gooit alleen een fout wanneer configurationKey leeg is. Als de gebruiker niet heeft ingestemd, logt het en keert het stilzwijgend terug. Anders opent het een WebSocket naar de backend van Mellowtel. De oproep is niet-blokkerend voor de 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 het snelste pad en is wat de bovenstaande snippet laat zien. Het rendert een native Electron dialog.showMessageBox met je incentive-tekst als de kop en slaat de beslissing van de gebruiker automatisch op.
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 hun toestemming later wijzigen

​

Methode Referentie

• init(): Promise<void> start de service als de gebruiker heeft ingestemd, of keert stilzwijgend vroeg terug als dat niet het geval is. Gooi alleen een fout wanneer de configuratiesleutel leeg is.
• requestConsent(window: BrowserWindow, incentive: string): Promise<boolean | undefined> toont de ingebouwde native toestemmingsdialoog en slaat het resultaat op. 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 na het verzamelen van toestemming via je eigen UI.
• optOut(): Promise<void> markeert de gebruiker als niet-ingestemd en sluit de actieve WebSocket-verbinding.
• getOptInStatus(): boolean | undefined retourneert de huidige opt-in status, of undefined als de gebruiker nog nooit een keuze heeft gemaakt.
• getNodeId(): string retourneert de Mellowtel-knooppuntidentificatie voor deze installatie. Handig bij het indienen van ondersteuningstickets.

• getTotalRequestCount(): number retourneert het totale aantal verwerkte verzoeken sinds installatie.
• getDailyRequestCount(): number retourneert het aantal verzoeken dat vandaag is verwerkt.
• getRequestCountForDate(date: string): number retourneert het aantal voor een specifieke YYYY-MM-DD datum.
• getDailyRequestsHistory(): { [date: string]: number } retourneert elke dagelijkse telling als een kaart.
• 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 tellers in één oproep.

​

Afsluiten en Levenscyclus

​

Toestemming Persistentie

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

​

Probleemoplossing