Skarlet.ai LiveChat

Bienvenido a la Configuración de LiveChat

Personaliza tu widget de chat para brindar la mejor experiencia a tus clientes. Configura la apariencia, el comportamiento y los ajustes de integración en un solo lugar.

Implementación del Script de Live Chat

Copia y pega el siguiente script antes de cerrar la etiqueta </body> en la página donde deseas mostrar el LiveChat.

          
          <script id="live-chat-skarlet" src="https://widget.skarlet.ai/assets/js/widget.js" type="module"></script>
          <script>
            document.addEventListener("DOMContentLoaded", () => {
              LiveChat.init({
                applicationUrl: "https://midominio.com/api/chat/general-setting/public/{key}/",
                position: "right",
              });
            });
          </script>

Sustituye el valor de midominio.com con el dominio de tu aplicación de Skarlet.ai.
Sustituye el valor de {key} con la clave de tu aplicación de Skarlet.ai.

Configuración de Botones Extras

Para añadir un botón extra con un enlace, es necesario incluir un objeto dentro del campo extra_settings en el backend con el siguiente formato:

        
        {
          "buttons": [
            {
              "text": "Enlace externo",
              "type": "link",
              "url": "https://tu-enlace.com",
              "icon": "MdHome",
              "group": "static"
            }
          ]
        }

text: Define el texto que se mostrará en el botón.
type: Debe ser "link" para que el botón funcione como un enlace.
url: La URL a la que se redirigirá cuando el usuario haga clic en el botón.
icon (opcional): Define el icono a mostrar. Acepta tres formatos:
- Iconos del registro: Nombres como "MdHome", "MdPayment", "MdMonetizationOn"
- URLs absolutas: Como "https://widget.skarlet.ai/icons/call.png"
- Rutas locales: Como "/icons/call.png" (solo para desarrollo)
group (opcional): Define en qué bubble aparecerá el botón:
- "static": Aparece en el bubble principal junto con Chat y WhatsApp
- "dynamic": Aparece en el bubble secundario (valor por defecto)

Ejemplo con múltiples botones y grupos:

        
        {
          "buttons": [
            {
              "text": "Formulario de Atención",
              "type": "link",
              "url": "https://mi-sitio.com/formulario",
              "icon": "MdDescription",
              "group": "static"
            },
            {
              "text": "Soporte Técnico",
              "type": "link", 
              "url": "https://mi-sitio.com/soporte",
              "icon": "MdBuild",
              "group": "dynamic"
            },
            {
              "text": "Portal de Pagos",
              "type": "link",
              "url": "https://mi-sitio.com/pagos",
              "icon": "MdPayment"
            }
          ]
        }

En este ejemplo, "Formulario de Atención" aparecerá en el bubble principal junto con Chat y WhatsApp, mientras que "Soporte Técnico" y "Portal de Pagos" aparecerán en el bubble secundario (el tercer botón usa el valor por defecto "dynamic").

Asegúrate de configurar correctamente este campo en el backend para que los botones adicionales se reflejen en la interfaz del widget.

Configuración de Iconos Estáticos

Personaliza los iconos de los botones estáticos (Chat en línea y WhatsApp) añadiendo los siguientes campos en extra_settings:

        
        {
          "static_chat_icon": "https://widget.skarlet.ai/icons/chatlive.png",
          "static_whatsapp_icon": "https://widget.skarlet.ai/icons/whatsapp.png",
          "buttons": [...]
        }

static_chat_icon (opcional): Icono personalizado para el botón "Chat en línea". Acepta nombres del registro (ej: "MdChatBubbleOutline") o rutas de imágenes (ej: "/icons/chatlive.png"). Si no se especifica, usa "MdChatBubbleOutline" por defecto.
static_whatsapp_icon (opcional): Icono personalizado para el botón WhatsApp. Acepta nombres del registro (ej: "MdWhatsapp") o rutas de imágenes (ej: "/icons/whatsapp.png"). Si no se especifica, usa "MdWhatsapp" por defecto.

Ejemplo completo con iconos personalizados:

        
        {
          "static_chat_icon": "https://widget.skarlet.ai/icons/chatlive.png",
          "static_whatsapp_icon": "https://widget.skarlet.ai/icons/whatsapp.png",
          "buttons": [
            {
              "text": "Formulario de Atención Virtual",
              "type": "link",
              "url": "https://mi-sitio.com/formulario",
              "icon": "https://widget.skarlet.ai/icons/call.png",
              "group": "static"
            },
            {
              "text": "Pago electrónico",
              "type": "link",
              "url": "https://mi-sitio.com/pagos",
              "icon": "MdMonetizationOn",
              "group": "dynamic"
            }
          ]
        }

Nota importante: Las imágenes personalizadas deben estar ubicadas en la carpeta public/icons/ del servidor y ser accesibles mediante rutas que empiecen con /icons/.

Multiples subdominios

Si el Livechat debe estár disponible en más de un subdominio y queremos que la sessión esté disponible en todos, es necesario configurar el dominio principal en el backend con el siguiente formato en el extra_settings

        
        {
          "domain_cookie": ".example.com"
        }

domain_cookie: El dominio principal donde se encuentra el Livechat.

Esta configuración asegura que la sesión se mantenga disponible en todos los subdominios: example.com y www.example.com subdomain.example.com