Web widget

Pegá un solo script tag en tu sitio para mostrar una burbuja flotante de chat, o compartí un link directo al chat.

El web widget es el canal por defecto de cada chatbot. La pestaña Web Widget en la página Channels te da dos outputs para copiar y pegar: un script de embed para tu sitio y una URL shareable para chat directo.

La página

Encabezado: Web Widget Subencabezado: "Drop one script onto any page and your chatbot appears as a floating chat bubble. Share a direct link for anyone to chat without visiting your site."

Un botón Customize widget (arriba a la derecha) te lleva al formulario de configuración del widget. Después dos filas — cada una con un botón Copy, y el link shareable también tiene un Open ↗ para saltar al preview en vivo.

1. El script de embed

Label de fila: "Embed script" Hint: "Paste before on every page where you want the widget to appear."

El snippet se ve exactamente así:

(El host de la URL coincide con el deployment de ChatbotGen — en dev es http://localhost:4000, en producción es https://www.chatbotgen.com.)

Pegalo en cualquier parte de tu HTML, típicamente justo antes de para que no bloquee el first paint. No hace falta defer.

Label de fila: "Shareable link" Hint: "Send this URL to anyone — they can chat with your bot in full-page mode."

El patrón de URL:

https://www.chatbotgen.com/v2/chatbots/YOUR-SLUG/widget

Pegalo en un email, un código QR o un post social. Cualquiera que haga clic obtiene la UI de chat full-page — sin necesidad de instalar el widget del lado del usuario.

Qué hace el script loader

El script funciona en cualquier dominio (no hace falta configurar CORS) y el navegador lo cachea por algunas horas para que cargue rápido en visitas siguientes.

Cuando la página carga, el script:

  1. Inyecta los estilos del widget
  2. Agrega un botón circular flotante en la esquina inferior derecha
  3. Prepara un iframe de chat oculto que se abre al hacer clic en el botón
  4. Opcionalmente muestra una pequeña burbuja teaser con el mensaje inicial del chatbot después de un delay corto
  5. Cierra el widget cuando el visitante hace clic afuera o toca la X adentro del chat

El botón launcher usa tu ícono de widget subido cuando configuraste uno — si no, es una burbuja coloreada con un símbolo de chat en tu color primario.

Comportamiento mobile

En pantallas chicas (celulares angostos), el chat llena todo el viewport al abrirse, así la conversación queda fácil de leer. No hace falta configuración — se adapta solo.

Si el chatbot no existe

Si el slug en la URL del script no coincide con ningún chatbot, la consola del navegador muestra:

ChatbotGen: chatbot "YOUR-SLUG" not found

Nada se inyecta en la página. Verificá que copiaste el script con el slug correcto de tu chatbot.

Personalizar la apariencia

El look-and-feel del widget vive en la pestaña Widget de la sub-nav, no acá. Ver:

Quitar el widget

Eliminá el tag