Para incrustar un chatbot de Agentkit, abre la página Channels → Website embed de tu agente, activa Chat widget y copia el código generado completo. Pega ambas etiquetas script en un pie de página común a todo el sitio o en una plantilla de página, publica, luego carga la página pública y envía un mensaje de prueba. El código generado ya contiene el ID de tu agente y la URL del widget configurada. No lo sustituyas por un fragmento copiado de un artículo.
Si quieres el chat dentro de una sección de la página, activa el canal Iframe y copia su código iframe generado en su lugar. El iframe y el widget flotante son canales separados, así que comprueba el interruptor del que utilices.
Elige dónde debe aparecer el chat
| Objetivo | Usa | Dónde obtenerlo |
|---|---|---|
| Una burbuja de chat flotante en todo el sitio | Chat widget | Channels → Website embed → Chat widget |
| Un panel de chat dentro de una página de soporte o contacto | Iframe | Channels → Website embed → Iframe |
| Una burbuja flotante en una app de React o Next.js | Chat widget | Usa el script generado en el layout o la plantilla HTML de la app |
| Una burbuja en todo un sitio de WordPress | Chat widget | Coloca ambas etiquetas generadas en un campo de código del pie de página |
Una app de React no necesita un paquete de React de Agentkit separado para esta instalación. Para un ejemplo de colocación en React o Next.js, sigue la guía de integración con React. La guía del iframe muestra cómo dimensionar un panel de chat en línea.
Instala el widget flotante
- Crea un agente, añade una fuente cuyas respuestas puedas comprobar y prueba algunas preguntas en el Playground. Si empiezas desde cero, crea una cuenta de Agentkit.
- Abre la página Channels → Website embed del agente. Selecciona Chat widget y activa ese canal.
- Copia el código completo que aparece ahí. Contiene un pequeño script de arranque seguido del script asíncrono del widget. Mantén juntas ambas etiquetas y sus valores generados de
data-chatbotysrc. - Pega el código en el pie de página compartido o en la plantilla HTML del sitio, antes de la etiqueta de cierre
</body>. Añádelo una vez por página. Si quieres el widget en una sola página, usa el área de código de esa página. - Publica el sitio. Abre la URL pública en una ventana nueva del navegador, haz clic en la burbuja y envía una pregunta cuya respuesta puedas contrastar con una fuente aprobada.
La URL del widget depende de la configuración de alojamiento de Agentkit. Copia siempre el código actual de Website embed. La guía del widget de JavaScript tiene los pasos de configuración actuales, y la guía del Embed SDK explica qué hace el script de arranque.
React y Next.js
Añade el script a la plantilla HTML de la app o a un layout compartido para que se cargue en las páginas donde quieras la burbuja. Mantén una sola copia del widget en cada página renderizada. La guía de integración con React cubre la colocación en el layout para React y Next.js. Copia la URL y el ID del agente actuales desde Channels → Website embed; instalar un paquete no forma parte de esta configuración.
WordPress
Para una instalación en todo el sitio, pega ambas etiquetas script generadas en el campo Footer de la pantalla Header & Footer de WPCode. Guarda, borra cualquier caché del sitio y luego inspecciona una página pública. WordPress puede eliminar scripts de un bloque de HTML personalizado cuando tu cuenta no tiene permiso para publicarlos, así que revisa el código fuente de la página renderizada si la burbuja no aparece. Sigue la guía de instalación en WordPress para la ruta exacta del menú y las comprobaciones.
Incrusta el chat dentro de una página
Elige Iframe en la misma página de Website embed, activa el canal y copia el iframe generado. Pégalo donde deba aparecer el chat en línea. Su URL apunta a la página iframe alojada de tu agente. El panel en línea permanece en esa sección de la página; no añade una burbuja flotante al resto del sitio. Dale al iframe suficiente altura en tu layout, usa Visit para previsualizar la página de chat alojada y después prueba el iframe en tu página publicada. El iframe no expone el SDK window.agentkit de la página principal, así que usa el widget de script si necesitas esos comandos del navegador. Consulta las instrucciones del iframe.
Comprueba el resultado antes del lanzamiento
Abre la página publicada en una ventana nueva del navegador y registra cuatro resultados:
- ¿Aparece la burbuja o el panel en línea en el lugar esperado?
- ¿Se abre y acepta un mensaje?
- ¿Su respuesta coincide con la fuente que usaste para la prueba?
- ¿Puede un visitante seguir llegando a tu vía de contacto habitual si el agente no puede responder?
Si no aparece nada, verifica primero que el canal esté activado e inspecciona el código fuente de la página renderizada en busca de ambas etiquetas generadas del widget o del iframe. Comprueba que la URL del script sea absoluta y se cargue en el panel Network del navegador. Un editor de contenido o una caché pueden haber eliminado o retrasado el código. Si la interfaz aparece pero un mensaje falla, revisa la configuración del agente, los dominios permitidos y el estado de las fuentes. La guía de restricción de dominios explica cómo una lista de dominios permitidos afecta a las incrustaciones.
Guarda la pregunta de prueba y la respuesta observada en tus notas de lanzamiento. Instalar un widget demuestra que se carga; no demuestra que cada respuesta sea correcta. Vuelve a comprobar las preguntas afectadas después de cambiar fuentes o ajustes.
