Configuración

ExpertoBot permite personalizar el comportamiento del widget a través de opciones de configuración. Las configuraciones se establecen usando el comando EBot('configs', {...}).

Patrón de Configuración

La API usa un patrón simple que acepta un objeto con las configuraciones:

// Establecer configuraciones
EBot('configs', { 
  launcher_hidden: true,
  ...
});

---

launcher_hidden

Controla la visibilidad del launcher (botón flotante) predeterminado del widget.

Tipo: boolean

Valor por defecto: false

Establecer el valor

// Ocultar el launcher (usar launcher personalizado)
EBot('configs', { launcher_hidden: true });

// Mostrar el launcher nuevamente
EBot('configs', { launcher_hidden: false });

Descripción:

Cuando se establece en true, el launcher predeterminado de ExpertoBot se oculta permanentemente, permitiéndote crear tu propio botón personalizado para abrir el chat. Esto es útil cuando quieres integrar el widget con el diseño de tu sitio web.

Consideraciones importantes:

• Si es true, el launcher siempre estará oculto, incluso tras cerrar el chat
• Útil para integrar un launcher personalizado en tu interfaz
• El cambio se aplica inmediatamente sin reinicializar el widget

---

Ejemplos de Uso

Ejemplo 1: Launcher Personalizado Básico

// Ocultar el launcher predeterminado
EBot('configs', { launcher_hidden: true });

// Crear un botón personalizado
document.querySelector('#custom-button').addEventListener('click', function() {
  EBot('toggle');
});

Ejemplo 2: Launcher con Actualización de Estado

// Ocultar launcher predeterminado
EBot('configs', { launcher_hidden: true });

// Crear botón personalizado
const button = document.querySelector('#custom-button');

button.addEventListener('click', function() {
  EBot('toggle');
});

// Actualizar el botón según el estado
EBot('onStateChange', function(state) {
  if (state.isOpen) {
    button.textContent = 'Cerrar chat';
    button.classList.add('active');
  } else {
    button.textContent = 'Abrir chat';
    button.classList.remove('active');
  }
});

Ejemplo 3: Implementar un Botón Personalizado con Estado

EBot('config', 'launcher_hidden', true);

const button = document.createElement('button');
button.textContent = '💬 Ayuda';
button.onclick = function() {
  EBot('toggle');
};
document.body.appendChild(button);

EBot('onStateChange', function(state) {
  button.style.backgroundColor = state.isOpen ? '#0066cc' : '#999';
});

Ejemplo 4: Múltiples Puntos de Entrada

EBot('onReady', function() {
  // Ocultar launcher predeterminado
  EBot('config', 'launcher_hidden', true);

  // Botón en el header
  document.querySelector('#header-help').addEventListener('click', function() {
    EBot('open');
  });

  // Botón en el footer
  document.querySelector('#footer-support').addEventListener('click', function() {
    EBot('open');
  });

  // Botón flotante personalizado
  document.querySelector('#custom-chat-button').addEventListener('click', function() {
    EBot('toggle');
  });
});