Ceibot LiveChat - Guía de Configuración

Configura tu LiveChat en Minutos

Configura el widget de Ceibot LiveChat con facilidad. Personaliza su apariencia, comportamiento e integraciones para mejorar la interacción con los clientes.

Comenzar

Código de Integración

Copia y pega el siguiente código en el <body> de tu sitio web para activar el widget de Ceibot LiveChat.


<script id="live-chat-ceibot" src="https://widget.ceibot.io/assets/js/widget.js" type="module"></script>
  document.addEventListener("DOMContentLoaded", () => {
    LiveChat.init({
      agent_id: "agent-id",
      position: "right",
    });
  });
</script>

Configuración Avanzada

Configura parámetros avanzados para adaptar el widget a tu sitio web.

Control de Z-Index

El parámetro zindex controla el orden de capas del widget. Úsalo si el widget aparece detrás de otros elementos en tu página.

Default: 99999999


<script id="live-chat-ceibot" src="https://widget.ceibot.io/assets/js/widget.js" type="module"></script>
  document.addEventListener("DOMContentLoaded", () => {
    LiveChat.init({
      agent_id: "agent-id",
      position: "right",
      zindex: 5000,  // Controla el orden de capas (botón, overlay, ventana)
    });
  });
</script>

💡 Consejo: Si el widget aparece detrás de otros elementos, intenta aumentar el valor de zindex. Valores típicos: 5000 (bajo), 50000 (medio), 999999 (muy alto).

Ejemplo Completo

Aquí se muestra la integración con las opciones más comunes:


<script id="live-chat-ceibot" src="https://widget.ceibot.io/assets/js/widget.js" type="module"></script>
  document.addEventListener("DOMContentLoaded", () => {
    LiveChat.init({
      agent_id: "your-agent-id",
      position: "right",
      title: "¿Cómo te podemos ayudar?",
      button_color: "#10b981",
      button_text_color: "#ffffff",
      avatar_url: "https://your-site.com/avatar.png",
      initial_message: "¡Hola! ¿En qué puedo ayudarte?",
      submit_text: "Enviar",
      zindex: 5000,  // Orden de capas
    });
  });
</script>

Botón de WhatsApp

Botón flotante que abre una conversación de WhatsApp — sin sesión, sin Socket.IO. El link ya viene armado desde core/ (ej. wa.me/{"{"}numero{"}"}?text=...).


<script src="https://widget.ceibot.io/assets/js/whatsapp-button.js" type="module"></script>
  document.addEventListener("DOMContentLoaded", () => {
    WhatsAppButtonWidget.init({
      link: "https://wa.me/34600000000?text=Hola",
      position: "right",
      button_color: "#25D366",
      hover_text: "Escríbenos por WhatsApp",
    });
  });
</script>

Botón de Instagram

Mismo comportamiento que el botón de WhatsApp — sin sesión, sin Socket.IO. El link también llega ya resuelto (ej. ig.me/m/{"{"}usuario{"}"}).


<script src="https://widget.ceibot.io/assets/js/instagram-button.js" type="module"></script>
  document.addEventListener("DOMContentLoaded", () => {
    InstagramButtonWidget.init({
      link: "https://ig.me/m/tu_usuario",
      position: "left",
      button_color: "#E1306C",
      hover_text: "Escríbenos por Instagram",
    });
  });
</script>

FAB Multicanal

Un solo botón flotante que despliega varios canales a elegir por el visitante — agrupa WhatsApp, Instagram, Telegram y/o Livechat en un único punto de entrada. Si un canal es livechat, delega en window.LiveChat.init(...) — el HTML de instalación debe cargar widget.js además de multichannel.js en ese caso.


<script id="live-chat-ceibot" src="https://widget.ceibot.io/assets/js/widget.js" type="module"></script>
<script src="https://widget.ceibot.io/assets/js/multichannel.js" type="module"></script>
  document.addEventListener("DOMContentLoaded", () => {
    MultichannelWidget.init({
      position: "right",
      button_color: "#f59e0b",
      channels: [
        { type: "whatsapp", link: "https://wa.me/34600000000", hover_text: "WhatsApp" },
        { type: "instagram", link: "https://ig.me/m/tu_usuario", hover_text: "Instagram" },
        {
          type: "livechat",
          hover_text: "Chat en vivo",
          livechat_config: {
            agent_id: "tu-agent-id",
            position: "right",
            button_color: "#D85A30",
            initial_message: "Hola, ¿En que te puedo ayudar hoy?",
          },
        },
      ],
    });
  });
</script>

Personalizar Apariencia

Elige colores, fuentes y la posición del widget para que coincida con tu marca. Previsualiza los cambios en tiempo real para un ajuste perfecto con tu sitio web.

Establecer Reglas de Comportamiento

Define activadores, como el tiempo en la página o las acciones del usuario, para mostrar el widget de chat. Personaliza saludos y respuestas automáticas para una mayor interacción.

Integrar y Publicar

Conecta Ceibot con tu CRM, correo electrónico u otras herramientas. Copia el fragmento de código generado y pégalo en tu sitio web para activarlo.