Eventos

Los eventos de ExpertoBot te permiten reaccionar a cambios en el widget. Todos los eventos se registran usando el patrón de comando EBot('evento', callback).

onReady

Se ejecuta cuando el widget está completamente inicializado y listo para usar.

Uso:

EBot('onReady', function() {
  console.log('Widget listo para usar');
});

Parámetros:

• callback (Function): Función que se ejecuta cuando el widget está listo. No recibe parámetros.

Retorna:

• function: Función para desuscribirse del evento

Comportamiento:

• Si el widget ya está listo cuando se llama, el callback se ejecuta inmediatamente
• Si se llama antes de que el widget esté listo, el comando se encola y se ejecuta cuando esté listo
• Es el método recomendado para ejecutar código que depende del widget

Descripción:

Este es el método recomendado para ejecutar código que depende de que el widget esté completamente inicializado. A diferencia de EBot('isReady'), que requiere verificación manual, onReady ejecuta tu código automáticamente en el momento correcto.

Ejemplo básico:

EBot('onReady', function() {
  console.log('Widget listo para usar');
  EBot('open');
});

Ejemplo: Configurar el widget al inicio:

EBot('onReady', function() {
  // Ocultar launcher predeterminado
  EBot('config', 'launcher_hidden', true);
  
  // Registrar botón personalizado
  document.getElementById('my-chat-button').addEventListener('click', function() {
    EBot('toggle');
  });
});

Ejemplo: Abrir chat automáticamente:

EBot('onReady', function() {
  EBot('open');
});

Ejemplo: Chat que se abre después de un tiempo:

setTimeout(function() {
  if (EBot('isReady')) {
    EBot('open');
  }
}, 5000); // 5 segundos

¿Cuándo usar onReady vs isReady?

Usa EBot('onReady', callback) (Recomendado):

• Cuando quieres ejecutar código una vez que el widget esté listo
• Para inicializar configuraciones o registrar eventos
• En la mayoría de los casos de uso
• Cuando el código puede ejecutarse antes de que el widget cargue

Usa EBot('isReady'):

• Cuando necesitas verificar el estado en tiempo real
• Para validaciones condicionales después de la inicialización
• Cuando ya tienes lógica de verificación existente

// ✅ Recomendado - Se ejecuta automáticamente cuando está listo
EBot('onReady', function() {
  EBot('open');
});

// ✅ También válido - Requiere verificación manual
if (EBot('isReady')) {
  EBot('open');
}

---

onStateChange

Se ejecuta cada vez que cambia el estado del widget (abierto/cerrado o listo/no listo).

Uso:

EBot('onStateChange', function(state) {
  console.log('Estado actual:', state);
});

Parámetros:

• callback (Function): Función que recibe un objeto state con las siguientes propiedades:
  • isOpen (boolean): Indica si el chat está abierto
  • isReady (boolean): Indica si el widget está inicializado

Retorna:

• function: Función para desuscribirse del evento

Comportamiento:

• Se llama automáticamente con el estado actual cuando se registra
• Se emite después de cada cambio de estado

Descripción:

Este evento es útil para sincronizar el estado de tu interfaz con el estado del widget, por ejemplo, para actualizar botones personalizados o enviar eventos de analytics.

Ejemplo básico:

EBot('onStateChange', function(state) {
  console.log({
    isOpen: state.isOpen,    // true si está abierto
    isReady: state.isReady   // true si el widget está listo
  });
});

Ejemplo: Actualizar botón personalizado:

const myButton = document.getElementById('chat-button');

EBot('onStateChange', function(state) {
  if (state.isOpen) {
    myButton.textContent = 'Cerrar Chat';
    myButton.classList.add('active');
  } else {
    myButton.textContent = 'Abrir Chat';
    myButton.classList.remove('active');
  }
});

Ejemplo: Enviar eventos a Google Analytics:

EBot('onStateChange', function(state) {
  if (state.isOpen) {
    gtag('event', 'chat_opened', {
      event_category: 'engagement',
      event_label: 'ExpertoBot Widget'
    });
  } else {
    gtag('event', 'chat_closed', {
      event_category: 'engagement',
      event_label: 'ExpertoBot Widget'
    });
  }
});

Ejemplo: Mostrar/ocultar elementos según el estado:

const overlay = document.getElementById('chat-overlay');

EBot('onStateChange', function(state) {
  if (state.isOpen) {
    overlay.style.display = 'block';
  } else {
    overlay.style.display = 'none';
  }
});

---