Documentación

Webflow

Agrega tu agente a un sitio de Webflow mediante Custom Code en Project Settings.

Agrega tu agente de IA a cualquier sitio de Webflow pegando el código de incrustación en Project Settings → Custom Code. El fragmento se carga automáticamente en todas las páginas.

Primero, obtén el código de incrustación desde Chatbot > Publicar en el panel.

Configuración rápida

  1. Abre tu proyecto en el Webflow Designer.
  2. Haz clic en el ícono de engranaje (Project Settings) en la barra lateral izquierda.
  3. Ve a la pestaña Custom Code.
  4. Desplázate hasta Footer Code (el campo llamado Before </body> tag).
  5. Pega tu código de incrustación.
  6. Haz clic en Save Changes.
  7. Haz clic en Publish, en la esquina superior derecha, para publicar el sitio.

Formato de ejemplo (usa los valores reales de Chatbot > Publicar):

<script
  src="YOUR_WIDGET_URL"
  data-chatbot="YOUR_CHATBOT_ID"
  async
></script>

El script del widget está diseñado para cargarse una vez que la página sea interactiva. Pegarlo en Footer Code evita bloquear el renderizado inicial y coincide con el comportamiento del atributo async.

Requisitos del plan

La disponibilidad de Custom Code depende del nivel de tu Site plan. Webflow históricamente ha restringido el código personalizado para todo el sitio en el plan gratuito Starter, y esa disponibilidad ha cambiado entre revisiones de planes.

Consulta la comparación de planes de Webflow en https://webflow.com/pricing para conocer las reglas vigentes. Si la pestaña Custom Code muestra un ícono de candado o el campo Footer Code está deshabilitado, mejora el Site plan.

Instalación en páginas específicas

Para cargar el widget solo en ciertas páginas:

  1. Abre la página en el Designer.
  2. Haz clic en el ícono de engranaje Page Settings de esa página.
  3. Desplázate hasta Custom Code → Before </body> tag.
  4. Pega ahí tu código de incrustación en lugar de usar el campo de todo el proyecto.

El código de nivel de página se añade al código de nivel de proyecto en esa página en particular.

Después de publicar

El código personalizado solo se ejecuta en el sitio publicado, no en la vista previa del Designer. Después de guardar, haz clic en Publish y elige tus dominios:

  • *.webflow.io — el dominio de staging
  • Tu dominio personalizado conectado (si tienes uno)

Publica en el dominio que realmente quieras probar.

Solución de problemas

El widget no aparece en la vista previa del Designer.

  • Es lo esperado. Custom Code solo se ejecuta en el sitio publicado. Abre la URL en vivo.

El widget tampoco aparece en el sitio en vivo.

  • Confirma que hayas hecho clic en Save Changes y en Publish.
  • Confirma que tu dominio esté permitido en Chatbot > Publicar > Seguridad.
  • Haz una recarga forzada (⌘+Shift+R) para omitir la caché del CDN.

El campo Custom Code está deshabilitado.

  • Tu nivel de Site plan no incluye Custom Code. Mejora tu plan en https://webflow.com/pricing.

Pruebas

  1. Abre el sitio publicado en una ventana de incógnito.
  2. Busca la burbuja de chat.
  3. Haz clic para abrirla y envía un mensaje de prueba.

Próximos pasos