Integra Mellowtel en tu aplicación Electron

​

Requisitos previos

• Una cuenta de Mellowtel y una clave de configuración (obtén la tuya desde el panel de control).
• Una aplicación Electron con acceso al proceso principal.

​

Instalación

​

1. Configura la Autenticación de npm

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

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

​

2. Instala el Paquete

npm install @mellowtel-inc/mellowtel-electron

​

3. Añade a Tu Código

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


// Cuando la aplicación esté lista, crea la ventana
app.whenReady().then(async () => {
  let win = createWindow();
  
  const mellowtel: Mellowtel = new Mellowtel('YOUR_CONFIGURATION_KEY');

  await mellowtel.requestConsent(win, "Obtén 3 meses gratis")
  await mellowtel.init()
});

• new Mellowtel(configurationKey, options?) instancia el SDK. La única opción disponible hoy es disableLogs, que por defecto es true. Establécelo en false mientras integras para que puedas ver el estado de la conexión y la actividad de solicitudes en tu terminal.
• requestConsent(window, incentive) renderiza un cuadro de mensaje nativo de Electron anclado a la BrowserWindow que pasas. El segundo argumento es el titular prominente del diálogo (por ejemplo, "Obtén 3 meses gratis"), mostrado sobre una explicación fija de lo que hace Mellowtel. Se resuelve en true si el usuario acepta, false si el usuario rechaza o cierra el diálogo, e undefined si el consentimiento ya está registrado. El SDK persiste la decisión de optar automáticamente, por lo que no necesitas llamar a optIn() después.
• init() solo lanza un error cuando configurationKey está vacío. Si el usuario no ha optado, registra y regresa silenciosamente. De lo contrario, abre un WebSocket al backend de Mellowtel. La llamada no bloquea la UI del renderizador, por lo que las ventanas permanecen receptivas mientras se establece la conexión.

​

Prevención de interrupciones de diálogos del sistema (recomendado)

​

Consentimiento del Usuario

1. Usa el diálogo nativo incorporado a través de requestConsent(window, incentive). Este es el camino más rápido y es lo que muestra el fragmento anterior. Renderiza un dialog.showMessageBox nativo de Electron con tu copia de incentivo como el titular y persiste automáticamente la decisión del usuario.
2. Construye tu propia interfaz de consentimiento y maneja el SDK a través de optIn(), optOut(), y getOptInStatus(). Usa esto si deseas personalización de marca, explicaciones más ricas o localización más allá de lo que ofrece el diálogo nativo.

​

Qué debe incluir tu diálogo de consentimiento

​

Permitir que los usuarios cambien su consentimiento más tarde

​

Referencia de Métodos

• init(): Promise<void> inicia el servicio si el usuario ha optado, o regresa silenciosamente temprano si no. Solo lanza un error cuando la clave de configuración está vacía.
• requestConsent(window: BrowserWindow, incentive: string): Promise<boolean | undefined> muestra el diálogo de consentimiento nativo incorporado y persiste el resultado. Devuelve true al aceptar, false al rechazar o cerrar, undefined si el consentimiento ya fue dado.
• showConsentSettings(window: BrowserWindow): Promise<void> muestra el diálogo de gestión de consentimiento incorporado. El SDK maneja las transiciones de opt-in / opt-out internamente cuando el usuario cambia su elección.

• optIn(): Promise<void> marca al usuario como optado sin mostrar un diálogo. Usa esto solo después de recopilar el consentimiento a través de tu propia interfaz.
• optOut(): Promise<void> marca al usuario como no optado y cierra la conexión WebSocket activa.
• getOptInStatus(): boolean | undefined devuelve el estado actual de opt-in, o undefined si el usuario nunca ha hecho una elección.
• getNodeId(): string devuelve el identificador de nodo de Mellowtel para esta instalación. Útil al presentar tickets de soporte.

• getTotalRequestCount(): number devuelve el total de solicitudes procesadas desde la instalación.
• getDailyRequestCount(): number devuelve el número de solicitudes procesadas hoy.
• getRequestCountForDate(date: string): number devuelve el conteo para una fecha específica YYYY-MM-DD.
• getDailyRequestsHistory(): { [date: string]: number } devuelve cada conteo diario como un mapa.
• getRequestCountsInRange(startDate: string, endDate: string): { [date: string]: number } devuelve los conteos para un rango de fechas.
• getRequestCounts(): { total: number; daily: number; dailyHistory: { [date: string]: number } } devuelve los tres contadores en una sola llamada.

​

Apagado y Ciclo de Vida

​

Persistencia del Consentimiento

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

​

Solución de Problemas