Para añadir un chatbot de Agentkit a Webflow, copia las dos etiquetas script generadas desde Channels → Website embed → Chat widget. Colócalas en el Footer code de todo el sitio de Webflow o en el campo Before </body> de una sola página y luego publica. Revisa la página publicada y haz una pregunta cuya respuesta ya conozcas.
El código actual de Agentkit incluye un pequeño bootstrap de cola seguido del cargador del widget, con tu ID de chatbot y la URL actual del script. Cópialo como una unidad desde tu propio panel.
Comprueba el acceso antes de empezar
Las reglas de código personalizado de Webflow requieren un Workspace Core, Growth, Agency o Freelancer, o un plan de Sitio activo. Un Site manager o Designer debe añadir el código. Si no puedes añadir código personalizado, revisa el plan y tu rol antes de cambiar el chatbot. Webflow no garantiza que el código personalizado de terceros funcione ni ofrece soporte directo para resolver sus problemas.
También necesitas un chatbot de Agentkit con Chat widget habilitado. Crea uno, añade una fuente de sitio web actual o respuestas de Q&A aprobadas y prueba algunas preguntas en el playground. Comprueba las respuestas antes de invitar a los visitantes.
Si añades una URL de Webflow como fuente de sitio web, comprueba qué indexó realmente Agentkit. Un rastreo o un sitemap puede descubrir varias páginas, pero las rutas excluidas, el contenido inaccesible y los fallos de extracción pueden dejar huecos. La guía de fuentes de sitio web explica cómo inspeccionar y acotar el rastreo. Añade una fuente de Q&A exacta para una respuesta sobre políticas que necesite una redacción deliberada.
Coloca el código en una sola ubicación de Webflow
Para un widget en todas las páginas:
- Abre la página Channels → Website embed → Chat widget de tu chatbot en Agentkit. Habilita el canal y copia el bloque de código generado completo, incluidas las dos etiquetas script.
- En Webflow, abre Site settings → Custom code. Pega el código en Footer code, que Webflow inserta antes de la etiqueta de cierre
</body>. - Guarda los cambios y publica en el dominio que pretendes probar. Guardar el campo por sí solo no actualiza el sitio que ven los visitantes.
Para un widget en una sola página, deja vacíos los Site settings. En el Designer de Webflow, abre Page settings → Custom code → Before </body> tag de la página, pega las dos etiquetas, guarda y publica. Repite solo en las páginas que necesiten el widget. Webflow inserta el código de página después del código del sitio, así que mantén el fragmento en un solo lugar para facilitar los cambios y la resolución de problemas.
La guía de instalación de Webflow tiene una versión más corta de estos pasos.
Verifica la página publicada
Abre el dominio *.webflow.io publicado o tu dominio personalizado en una pestaña nueva. Webflow indica que el código personalizado puede ejecutarse en la vista previa del Designer, pero los visitantes no recibirán un cambio guardado hasta que publiques. Prueba el dominio real que usan los visitantes.
Usa esta comprobación de aceptación antes de invitar tráfico:
| Comprobación | Resultado esperado |
|---|---|
| Código fuente de la página | La etiqueta de bootstrap de cola y la etiqueta del cargador del widget del código generado, instaladas en un solo lugar |
| Widget | El lanzador se abre en las páginas publicadas de escritorio y móvil donde lo colocaste |
| Respuesta conocida | Una pregunta sobre contenido aprobado devuelve la respuesta prevista |
| Dominio | Los dominios de staging y personalizados que pruebas están permitidos si habilitaste las restricciones de dominio |
Por ejemplo, un sitio de servicios podría probar «¿Ofrecen citas los sábados?» contra una página de horarios aprobada. Si la respuesta falta o es incorrecta, corrige la fuente o añade una respuesta de Q&A exacta y repite la prueba. La presencia de una burbuja de chat solo demuestra que el widget se renderizó.
Si el lanzador no aparece, inspecciona el código fuente de la página publicada en busca de ambas etiquetas, confirma que Chat widget está habilitado y revisa las solicitudes de red fallidas del navegador. Si no puedes añadir código personalizado, vuelve a los requisitos de plan y rol de Webflow. Si pegaste el fragmento tanto en Site settings como en Page settings, elimina una copia y vuelve a publicar. Si el lanzador se abre pero la respuesta falla, revisa las fuentes y los dominios permitidos del chatbot antes de cambiar el código de Webflow.
Tras una instalación correcta, revisa las primeras preguntas reales y corrige los huecos en las fuentes. Vuelve a comprobar cuando cambies una página de Webflow o pases de staging a tu dominio personalizado. Para un panel dentro del contenido de la página en lugar de un lanzador flotante, usa el canal iframe independiente de Agentkit.
