Insertar el widget en línea (modo de página completa)

Requisitos previos

Asegúrate de que tu widget esté configurado en modo de página completa

En tu panel de ViaSay, ve a Build > Integrate > Channels, abre tu widget y, a continuación, Formato y diseño > Ventana de chat. Selecciona Página completa como formato y haz clic en Publicar.

Visita esta página para consultar las instrucciones.

Requisitos técnicos

• Acceso al código fuente HTML de tu sitio web

• Token del widget de la Integración en tu panel de ViaSay

• Conocimientos básicos de HTML y CSS

• Una región de la página con una altura explícita (el widget no se mostrará en un contenedor con altura cero)

Instalación

👍 Cuándo usar el modo de página completa

Usa este patrón para páginas de ayuda, preguntas frecuentes, contacto o micrositios de un solo propósito, donde la conversación es el contenido principal. Para sitios web de varias páginas en los que el widget debe seguir a los usuarios por todo el sitio, utiliza en su lugar la instalación estándar de burbuja flotante.

1. Establece el tipo de visualización en Página completa

Ve a Compilar > Integrar > Canales > [Tu widget] > Formato y diseño. En Ventana de chat, selecciona Página completa y haz clic en Publicar.

El comportamiento de visualización del widget está determinado por la configuración del panel, no por un atributo HTML. No es necesario pasar mode="fullpage" ni ninguna propiedad similar en el elemento personalizado.

2. Añade un contenedor principal a tu página

Añade un contenedor vacío donde quieras que aparezca el cuadro de chat y asígnale una altura explícita.

<div id="chat-host" class="chat-host"></div>

<style>
  .chat-host {
    width: 100%;
    min-height: 680px;
    display: flex;
    overflow: hidden;
  }
</style>

¿Por qué una altura explícita? El widget se representa dentro de su contenedor y hereda el espacio disponible. Sin una altura definida (min-height o height), el contenedor se contrae a 0 px y el widget queda invisible.

3. Inyecta el widget en el contenedor

Pega el código del widget al final de la etiqueta <body> tag, pero en lugar de añadir el elemento personalizado a document.body, añádelo a tu contenedor principal.

<!DOCTYPE html>
<html>
<head>
    <title>Your Website</title>
</head>
<body>
    <!-- Your page content -->
    <div id="chat-host" class="chat-host"></div>

    <!-- ViaSay Widget — inline full-page mode -->
    <script>
        var widget = document.createElement("destygo-webchat");
        widget.setAttribute('id', "destygo_widget");
        widget.setAttribute('class', "destygo_widget");
        widget.setAttribute('token', "YOUR_TOKEN_HERE");
        document.getElementById('chat-host').appendChild(widget);
    </script>
    <script type="text/javascript" src="https://chatbot.viasay.io/widget/destygo-webchat.js"></script>
</body>
</html>

¿Por qué añadirlo a un contenedor en lugar de a body? Añadirlo a document.body hace que el widget se muestre como una superposición flotante independientemente de la configuración del panel. Para representarlo en línea, el elemento personalizado debe ser hijo del contenedor de destino antes de que el script del SDK lo inicialice.

4. Controla la altura del cuadro de chat

El cuadro de chat interno se representa dentro de un div con la clase .cl-chatbox. Para controlar su altura, selecciona esta clase, no no el <destygo-webchat> elemento personalizado.

.chat-host .cl-chatbox {
  height: 680px !important;
}

⚠️ No aplica height, min-height, flex, o display directamente en <destygo-webchat> o #destygo_widget. Estas anulaciones se ignoran en el shadow DOM o interrumpen la representación interna del cuadro de chat.

5. Implementa los cambios

Guarda tu archivo HTML e impleméntalo en tu servidor web. El cuadro de chat se muestra en línea en cada página que incluya este código.

Verificación

Confirma que el cuadro de chat está activo

1. Abre tu página en un navegador servido mediante HTTP o HTTPS (no file://)

2. Comprueba que el cuadro de chat se muestra dentro de tu contenedor #chat-host

3. Confirma que el campo de entrada está anclado en la parte inferior del contenedor

4. Envía un mensaje de prueba

Patrones comunes de implementación

Aplicaciones de una sola página (SPA)

En aplicaciones React, Vue o Angular, monta el widget una vez cuando se monte el componente principal y límpialo al desmontarlo para evitar instancias duplicadas al volver a renderizar.

// React example
useEffect(() => {
  const widget = document.createElement("destygo-webchat");
  widget.setAttribute('token', "YOUR_TOKEN_HERE");
  hostRef.current.appendChild(widget);

  return () => {
    hostRef.current?.removeChild(widget);
  };
}, []);

Carga el script destygo-webchat.js una sola vez en tu index.html en lugar de volver a inyectarlo con cada cambio de ruta.

Sitios basados en plantillas

En WordPress, Shopify o plataformas similares, añade el contenedor principal y el script del widget a una única plantilla dedicada (por ejemplo, una plantilla de página de «Ayuda»), no al pie de página global.

Generadores de sitios estáticos

En Next.js, Gatsby o Hugo, añade el contenedor principal en el componente de diseño de tu página de ayuda y carga el script del SDK mediante el cargador de scripts del framework (por ejemplo, next/script con strategy="afterInteractive").

Solución de problemas

📌 Consejos de integración

Asegúrate de configurar correctamente la inclusión en la lista blanca de la Política de Seguridad de Contenido (CSP):

• https://*.destygo.com

• https://*.mindsay.com

• https://*.laiye.com

• wss://*.mindsay.com

• wss://*.laiye.com

• https://fonts.googleapis.com

• https://fonts.gstatic.com

Carga el script destygo-webchat.js después de el elemento personalizado se haya creado y añadido al DOM; de lo contrario, el elemento será desconocido cuando el SDK intente actualizarlo.

Opciones avanzadas

Altura adaptable: Usa unidades basadas en la ventana gráfica (por ejemplo, min-height: calc(100vh - 120px)) en el contenedor principal para que el cuadro de chat ocupe el espacio restante de la ventana gráfica en dispositivos móviles.

Varios cuadros de chat en el mismo sitio: Cada instancia debe usar un id único en el contenedor principal y un elemento personalizado único. Evita montar dos widgets que compartan el mismo token en la misma página.

Estilos personalizados: La mayoría de las opciones de apariencia (colores, fuentes, saludos) se configuran mediante la pestaña Formato y diseño de tu panel. Usa anulaciones de CSS en .cl-chatbox únicamente para cuestiones de diseño o tamaño específicas de tu página.