Cómo añadir el chatbot de IA de Asyntai a Webflow

Guía paso a paso para sitios web de Webflow

Plataforma:

Paso 1: Obtén su código de inserción

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Nota: El código anterior es solo un ejemplo. Debe copiar su propio código de inserción único desde su Panel de control ya que contiene su ID de widget personal.

Paso 2: Añadir código a través de Site Settings (Todas las páginas)

Para agregar el chatbot a todas las páginas de tu sitio Webflow a la vez:

Inicia sesión en tu cuenta de Webflow y selecciona tu proyecto
Haga clic en el icono de engranaje (Site Settings) en la barra lateral izquierda
Haz clic en "Código personalizado" en el menú de configuración
Desplácese hacia abajo hasta la sección "Footer Code" (antes de la etiqueta </body>)
Pegue su código de inserción de Asyntai
Haga clic en "Save Changes"
Publica su sitio para que los cambios se apliquen

Consejo: Agregar el código en la sección Footer lo coloca justo antes de la etiqueta de cierre </body>, lo cual es recomendable para widgets de chat ya que no ralentizará la carga de su página.

Alternativa: Código personalizado específico por página

Si solo quiere el chatbot en páginas específicas:

Abra su proyecto en el Webflow Designer
Haga clic en el panel de Páginas (icono de carpeta) en la barra lateral izquierda
Pasa el cursor sobre la página que deseas editar y haga clic en el icono de engranaje
Desplácese hasta "Custom Code"
Pegue su código de inserción de Asyntai en la sección "Before </body> tag"
Haga clic en "Save"
Publica su sitio

Alternativa: Usar el elemento Embed

También puede agregar el chatbot usando el elemento Embed en cualquier lugar de su página:

Abra su proyecto en el Webflow Designer
Haz clic en el botón "+" para abrir el panel Agregar
Busque "Embed" o encuéntralo en Components
Arrastre el elemento Embed a su página
Pegue su código de inserción de Asyntai en el editor de código
Haga clic en "Save & Close"
Publica su sitio

Importante: Al usar el elemento Embed, necesitará agregarlo a cada página donde quieras el chatbot. Para una instalación en todo el sitio, use el método de Site Settings descrito arriba.

Paso 3: Verificar la instalación

Después de publicar su sitio, ábrelo en una nueva pestaña del navegador o ventana de incógnito. Deberías ver el botón del widget de chat en la esquina inferior derecha. Haga clic en él para asegurarte de que se abra y funciona correctamente.

¿No ves el widget? Asegúrese de haber publicado su sitio después de agregar el código. El código personalizado solo aparece en el sitio en vivo, no en la vista previa del Diseñador. Intenta limpiar el caché de su navegador o ver en una ventana de incógnito.

Añadir la barra de búsqueda con IA

La barra de búsqueda con IA es un widget aparte con su propio código. Añádala junto al chat, o sola. Requiere el plan Standard o superior: en un plan inferior la barra aparece pero no devuelve resultados.

Añada el atributo data-replace a la etiqueta script y la barra ocupará el lugar de la que ya tiene su plantilla. Añádalo en Site Settings, Custom Code, Footer, el mismo sitio que el código del chat, lo que lo coloca justo antes de la etiqueta body de cierre.

<script src="https://widget.asyntai.com/static/js/search-widget.js" data-asyntai-id="YOUR_WIDGET_ID" data-replace="auto" async></script>

Leer la guía completa de la barra de búsqueda con IA