Añadir ChatLab a tu sitio web permite que los visitantes interactúen con tu chatbot de IA directamente en tu página. Esta guía explica cómo obtener el código de inserción y añadirlo a tu sitio web.
Antes de empezar
Crea y entrena tu chatbot antes de compartirlo con tus clientes. Para la instalación, también necesitas permisos para editar y publicar el sitio web. Consulta Cómo crear tu primer chatbot.
Abrir la pestaña Deploy
Selecciona tu chatbot en el panel principal y luego haz clic en la pestaña Deploy (Desplegar).
Elegir tu plataforma
El panel Select Platform (Seleccionar plataforma) de la derecha enumera los destinos compatibles en dos grupos: Website (Sitio web), para colocar el chatbot en páginas que controlas, y Messaging channels (Canales de mensajería), para conectarlo a una cuenta de conversación existente. Haz clic en la opción correspondiente al lugar donde quieres que aparezca el chatbot para ver las instrucciones adaptadas.
Plataformas compatibles:
- HTML Code - funciona con cualquier sitio web en el que puedas editar el HTML
- WordPress - a través del plugin oficial de ChatLab o mediante inserción manual de código
- Wix - a través de Settings > Custom Code
- Webflow - a través de Site settings > Custom code, con el acceso a código personalizado habilitado para tu sitio o espacio de trabajo
- PrestaShop - a través del módulo de ChatLab para PrestaShop o mediante inserción manual de código
- Shopify - a través del archivo theme.liquid
- WooCommerce - a través del plugin de WordPress o mediante inserción manual de código
- Abicart - a través de Store design > Themes > Site header
- CS-Cart - a través de Design > Layouts > Custom HTML code
Canales de mensajería:
- WhatsApp Business - responde en una cuenta de WhatsApp Business, consulta WhatsApp for Business
- Facebook Messenger - responde a los mensajes de tu página de Facebook, consulta Integración con Facebook Messenger
- Instagram - responde a los mensajes directos de Instagram, consulta Integración con Instagram
Los canales de mensajería no utilizan el código de inserción que se muestra a continuación. Se conectan a una cuenta de la que ya eres propietario, por lo que no se pega ningún código en un sitio web.
Cada plataforma muestra instrucciones paso a paso específicas para esa integración. Para las plataformas que cuentan con artículos de ayuda específicos, aparece el enlace View full instructions (Ver instrucciones completas) en la parte inferior.
Añadir mediante HTML Code
La opción HTML Code funciona con cualquier sitio web en el que tengas acceso al código fuente. Verás dos opciones de inserción: Widget e Iframe.
Modo Widget
La pestaña Widget muestra el código que añade un icono de chat a tu sitio web. Cuando los visitantes hacen clic en el icono, se abre una ventana emergente de chat.
- Haz clic en la pestaña Widget
- Haz clic en Copy to clipboard (Copiar al portapapeles) para copiar el código
- Localiza la sección
<head>de tu sitio web - Pega el código como el último elemento dentro de la sección
<head> - Actualiza tu navegador para comprobar que aparece el icono del chatbot
Modo Iframe
La pestaña Iframe muestra el código que inserta el chatbot directamente en el contenido de tu página. El chatbot está siempre visible y puede estar rodeado por otros elementos de la página.
- Haz clic en la pestaña Iframe
- Haz clic en Copy to clipboard (Copiar al portapapeles) para copiar el código
- Pega el código en cualquier lugar del HTML de tu sitio web donde quieras que aparezca el chatbot
- Ajusta los atributos
widthyheightpara adaptarlo a tu diseño
¿No tienes claro cuál elegir? Lee ¿Cuál es la diferencia entre widget e Iframe? para ver una comparación detallada.
Añadir mediante WordPress o WooCommerce
Las plataformas de WordPress y WooCommerce ofrecen dos métodos de instalación: Plugin Installation (Instalación por plugin - recomendado) y Manual Installation (Instalación manual).
Instalación por plugin (recomendado)
- Haz clic en Get the plugin on WordPress.org (Obtener el plugin en WordPress.org), luego instala y activa el plugin de ChatLab.
- Abre ChatLab en WordPress. Para una tienda WooCommerce, mantén seleccionada la opción WooCommerce integration (Integración con WooCommerce) para conectar también los datos de la tienda.
- Haz clic en Continue (Continuar), inicia sesión en ChatLab y selecciona tu chatbot.
- Completa la conexión, abre tu sitio web publicado y envía un mensaje de prueba.
Instalación manual
Cambia a Manual Installation y copia el código de Widget en el encabezado de tu sitio web utilizando un plugin de inserción de código. Para Iframe, utiliza un bloque HTML en el contenido de la página que admita HTML de iframe. Publica la página y prueba el chat. Instala el widget solo una vez, ya sea mediante el plugin o a través del fragmento manual.
Para conocer todos los detalles, consulta Cómo añadir tu chatbot a un sitio web de WordPress.
Añadir mediante otras plataformas
Para Shopify, Wix, Webflow, PrestaShop, Abicart y CS-Cart, selecciona la plataforma en el panel Select Platform. Cada plataforma muestra:
- El código de inserción con las opciones Widget e Iframe
- Instrucciones paso a paso específicas de la plataforma para pegar el código
- Un enlace View full instructions (Ver instrucciones completas) a la guía completa de la plataforma
Cumplimiento del RGPD
Si necesitas que tu chatbot solo se cargue después de que se otorgue el consentimiento de cookies, consulta Configuración de ChatLab para el cumplimiento del RGPD para ver guías de integración que abarcan CookieBot, Usercentrics y Google Tag Manager.
Content Security Policy (CSP)
Si tu sitio web utiliza cabeceras de Content Security Policy (política de seguridad de contenido), debes permitir los dominios de ChatLab para que el chatbot funcione. Las directivas necesarias dependen de si utilizas el modo Widget o el modo Iframe.
Modo Widget
El widget carga un script en tu página que genera la interfaz del chat. Incorpora los siguientes orígenes de ChatLab a tus directivas CSP existentes; no reemplaces la política para el resto de tu sitio web:
script-src https://script.chatlab.com;
style-src https://script.chatlab.com https://fonts.googleapis.com 'unsafe-inline';
connect-src https://api.chatlab.com wss://api.chatlab.com;
font-src https://fonts.gstatic.com;
Por defecto, el widget inyecta algunos estilos en línea (inline). Tu política también debe autorizar el script de configuración en línea, por ejemplo mediante un nonce o hash CSP. Permite en img-src los orígenes de imágenes utilizados por tu bot y por las tarjetas de producto; el audio y otras funciones activadas pueden requerir orígenes adicionales. Si utilizas un dominio de agencia, usa los dominios de tu fragmento generado.
CSP Safe Mode - cómo evitar unsafe-inline
Si la política de seguridad de tu sitio web no permite 'unsafe-inline' en style-src, puedes activar el modo CSP Safe Mode. Esto carga la hoja de estilos del contenedor del widget desde un archivo CSS externo. No autoriza tu script de configuración en línea ni garantiza que todos los estilos personalizados o funciones activadas cumplan con tu política.
Para activarlo, añade window.aichatbotCspSafe = true; antes de la etiqueta del script de ChatLab:
<script>
window.aichatbotApiKey = "YOUR_API_KEY";
window.aichatbotCspSafe = true;
</script>
<script src="https://script.chatlab.com/aichatbot.js" defer></script>
Con el modo CSP Safe Mode activado, prueba una directiva de hojas de estilo sin 'unsafe-inline'. Un punto de partida es:
script-src https://script.chatlab.com;
style-src https://script.chatlab.com https://fonts.googleapis.com;
connect-src https://api.chatlab.com wss://api.chatlab.com;
font-src https://fonts.gstatic.com;
Modo Iframe
La página principal debe permitir el origen de la URL del iframe copiado. Para el alojamiento estándar de ChatLab, añade esto a la política existente:
frame-src https://api.chatlab.com;