WebChatAgent Logo

Añadir un AI Chatbot a Webflow

Webflow

Añada un chatbot de IA a su sitio de Webflow en minutos utilizando la función Custom Code de Webflow. Pegue un breve fragmento de código una vez, publique y la burbuja de chat aparecerá en su sitio publicado. Utilice el método para todo el sitio para cubrir todas las páginas; utilice el método por página si solo lo desea en una página.

Método 1: Para todo el sitio (Todas las páginas)

  1. Abrir Site Settings: en el Webflow Designer, haga clic en el icono de engranaje o vaya a Site Settings > Custom Code.
  2. Pegar en Footer Code: en la sección Footer Code, pegue lo siguiente:
<script src="https://webchatagent.com/widget/web-chat-agent.js" async></script>
<web-chat-agent chatbot-id="YOUR_ID"></web-chat-agent>
  1. Reemplazar YOUR_ID con su ID del chatbot real del Panel de WebChatAgent.
  2. Guardar y publicar: haga clic en Guardar y luego publique su sitio. El Widget de chat aparecerá en todas las páginas.

Método 2: Solo en una página

  1. En el Webflow Designer, seleccione la página donde desea el chatbot.
  2. Abra Page Settings (icono de engranaje junto al nombre de la página).
  3. Desplácese hacia abajo hasta Custom Code > Before </body> tag.
  4. Pegue el mismo fragmento de código anterior.
  5. Guardar y publicar.

Método 3: Elemento Embed

Para un mayor control sobre la ubicación:

  1. Arrastre un elemento Embed desde el panel de componentes a su página.
  2. Pegue el fragmento de código en el editor de embed.
  3. El widget se representará como una burbuja de chat flotante independientemente de dónde se coloque el embed.

Cómo encontrar su ID del chatbot

Inicie sesión en su Panel de WebChatAgent, abra su Asistente y vaya a Canales → Widget de chat. Despliegue Mostrar detalles de instalación y haga clic en Copiar código. El fragmento ya contiene su ID del chatbot, por lo que puede pegar todo el código en lugar de escribir el ID.

Resolución de problemas

  • ¿El widget no se muestra en el Designer?: el código personalizado solo se procesa en el sitio publicado, no en la vista previa del Webflow Designer. Publique su sitio y revíselo en vivo.
  • ¿El widget no aparece en todas las páginas?: asegúrese de haber utilizado Site Settings > Custom Code (Método 1) y no el código a nivel de página.
  • ¿Es obligatorio el alojamiento en Webflow?: el código personalizado funciona tanto en sitios alojados en Webflow como en código exportado. Si exporta su sitio, el código se incluirá en la exportación.