Añadir un chatbot de ChatLab a tu sitio web de Webflow permite que los visitantes interactúen con tu asistente de IA directamente en tu página. Esta guía te explica paso a paso cómo obtener tu código de inserción desde ChatLab y pegarlo en Webflow.
Antes de empezar
Antes de comenzar, crea tu chatbot y comprueba que tu sitio o espacio de trabajo de Webflow incluya acceso a código personalizado. Consulta los requisitos de código personalizado de Webflow. También necesitas permisos para editar y publicar el sitio web.
Paso 1 - Copiar el código de inserción desde ChatLab
- Inicia sesión en ChatLab y selecciona el chatbot que deseas insertar
- Haz clic en la pestaña Deploy (Publicar) y, a continuación, selecciona Webflow en el panel de plataformas situado a la derecha
- Elige Widget para la instalación en el encabezado descrita más abajo. Para un chat siempre visible, elige Iframe y sigue las instrucciones de iframe que figuran a continuación. Consulta ¿Cuál es la diferencia entre widget e Iframe? para ver una comparativa
- Haz clic en Copy to clipboard (Copiar al portapapeles)
Paso 2 - Añadir el código a Webflow
Añadir el código en Site Settings (Ajustes del sitio) coloca el chatbot en todas las páginas de tu sitio de Webflow.
- Abre tu proyecto en el panel de control de Webflow
- Ve a Site settings > Custom code (Ajustes del sitio > Código personalizado)
- Pega el código copiado en la sección Head Code (Código de encabezado)
- Haz clic en Save Changes (Guardar cambios)
- Selecciona Publish (Publicar) para que los cambios surtan efecto
Añadir solo a una única página
Si deseas que el chatbot aparezca en una página específica en lugar de todo el sitio:
- Abre la página en el diseñador de Webflow
- Haz clic en el icono de engranaje para abrir Page Settings (Ajustes de página)
- Desplázate hacia abajo hasta la sección Custom Code
- Pega el código en el campo Head Code
- Guarda y publica tu sitio web
Añadir un iframe siempre visible
En el diseñador de Webflow, coloca un elemento Code Embed (Incrustar código) donde desees situar el chatbot, pega el fragmento de Iframe obtenido de ChatLab y ajusta su ancho y alto según tu diseño. Guarda y publica el sitio. El iframe pertenece al contenido de la página, no a la sección Head Code.
Comprobar la instalación
Tras publicar, abre tu sitio de Webflow en un navegador. Deberías ver el icono del chat en la esquina de la página (en el caso del modo widget) o la ventana del chat incrustada en la página (en el caso del modo iframe). Haz clic en el icono para abrir el chat y envía un mensaje de prueba para confirmar que todo funciona correctamente.