Requisitos previos
Asegúrate de haber creado un widget de ViaSay en la sección de integración
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
Instalación
👍 Implementa de forma invisible y lanza cuando estés listo
Establece la distribución de audiencia en el 0 % durante la configuración. El código del widget se implementa en producción, pero permanece oculto. Cuando estés listo para lanzarlo, ajusta el porcentaje en Integración para controlar la visibilidad, sin necesidad de cambiar el código.
1. Copia el código de tu widget
Ve a Build > Integrate > Channels en tu panel de ViaSay. Copia el fragmento de código de instalación proporcionado.
2. Añade el código a tu sitio web
Pega el código del widget al final de la etiqueta <body>, justo antes de la etiqueta de cierre </body> en tu plantilla HTML.
<!DOCTYPE html>
<html>
<head>
<title>Your Website</title>
</head>
<body>
<!-- Your website content -->
<!-- ViaSay Widget - Add before closing body tag -->
<script>
var widget = document.createElement("destygo-webchat");
widget.setAttribute('id', "destygo_widget");
widget.setAttribute('class', "destygo_widget");
widget.setAttribute('token', "YOUR_TOKEN_HERE");
document.body.appendChild(widget);
</script>
<script type="text/javascript" src="https://chatbot.viasay.io/widget/destygo-webchat.js"></script>
</body>
</html>¿Por qué al final de body? Colocar el código del widget antes de </body> garantiza que el contenido de tu página se cargue primero, evitando que el widget bloquee la renderización esencial de la página.
3. Implementa los cambios
Guarda el archivo HTML e impleméntalo en tu servidor web. El widget se carga automáticamente en cada página que incluya este código.
Verificación
Confirma que el widget está activo
Abre tu sitio web en un navegador
Comprueba la esquina inferior derecha para ver el icono de chat de ViaSay
Haz clic en el icono para abrir la interfaz de chat
Envía un mensaje de prueba
Patrones comunes de implementación
Aplicaciones de una sola página (SPA)
Para aplicaciones de React, Vue o Angular, añade el fragmento al archivo principal index.html del directorio público.
Sitios basados en plantillas
Para WordPress, Shopify o plataformas similares, añade el código al archivo de plantilla del pie de página de tu tema para aplicarlo en todas las páginas.
Generadores de sitios estáticos
Para Next.js, Gatsby o Hugo, añade el fragmento a tu componente de diseño o plantilla base.
Solución de problemas
Problema | Solución |
|---|---|
El widget no aparece | Verifica que el token de tu código coincida con el de la pestaña Integración |
El widget se carga lentamente | Mueve el script al final de |
Aparecen varios widgets | Asegúrate de que el fragmento de código solo se incluya una vez en tu plantilla |
Errores de CORS en la consola | Comprueba que tu dominio esté incluido en la lista blanca de la configuración del panel de ViaSay |
⚠️ No coloques el código del widget en la sección <head>. Esto retrasa la carga de la página y empeora la experiencia del usuario.
📌 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):
wss://_.mindsay.com
wss://*.laiye.com
Para la integración con Zendesk u otros servicios, consulta su documentación específica
Opciones avanzadas
Implementación específica por URL: Usa Google Tag Manager para controlar en qué páginas se muestra el widget y personalizar las reglas de activación. [Consulta la guía de integración de GTM →]
Estilos personalizados: Modifica la apariencia y la posición del widget mediante la pestaña Formato y diseño de tu panel.
Varios entornos: Genera tokens separados para los entornos de preparación y producción en la configuración Avanzada.
Próximos pasos
Configura la apariencia del widget en Formato y diseño
Configura saludos personalizados en Saludos
Explora la integración con GTM para una segmentación avanzada por URL