Incorpora el chat web en tu sitio

El widget de chat web es el canal más rápido para salir en vivo: cero configuración, sin tokens, sin claves de API. Activas un canal, copias un tag de script desde el dashboard, lo pegas antes del tag de cierre del body y en tu sitio aparece un launcher con el tema de tu marca. Esta página es el paso a paso, clic a clic. Para la anatomía completa del widget, cada ajuste de apariencia y el modelo de privacidad, consulta la referencia del canal Web chat.

Qué construirás

Un launcher de chat de AnyBot en vivo en tu propio sitio web, conectado a un agente que ya has probado. Los visitantes chatean como invitados, sin inicio de sesión, las respuestas llegan en streaming en vivo y nunca se puede acceder a nada privado. Unos cinco minutos, una vez que tu agente exista.

Antes de empezar

• Un agente que ya responde bien. ¿Eres nuevo aquí? Tu primer agente en 10 minutos.
• Acceso para editar el HTML de tu sitio, pegarás un solo tag <script>.
• Decisiones opcionales: si restringir qué dominios pueden cargar el widget, y si pedir un contacto a los visitantes antes de que chateen.

Pasos

1. Elige o crea el agente

Abre AI Agents en la barra lateral y abre el agente que quieres en tu sitio. El widget entrega exactamente lo que ese agente responde, así que debería superar ya un chat de prueba. ¿Empiezas de cero? Crea y prueba uno primero con Tu primer agente.

Resultado esperado: el editor del agente está abierto en sus pestañas.

2. Activa el canal Web Chat

Ve a la pestaña Integrations del agente y activa la tarjeta Web Chat. Esto alimenta tanto la incorporación como el panel de prueba integrado Chat with Agent.

Resultado esperado: la tarjeta Web Chat aparece activada y el panel Chat está disponible junto al editor (un panel lateral en pantallas anchas, un botón Chat en las más pequeñas).

3. Pruébalo en el panel antes de incorporarlo

Abre el panel Chat with Agent y cámbialo a modo Test (se abre en modo Training de forma predeterminada), el modo Test elimina el contexto de administrador, así ves lo que ve un visitante real del sitio. Haz una pregunta que tu conocimiento debería cubrir; las respuestas llegan en streaming token a token y cada paso de las herramientas es visible. Corrige el tono o agrega conocimiento ahora; consulta Prueba tu agente.

Resultado esperado: una respuesta fundamentada y en streaming que corresponde a tu contenido.

4. Copia el snippet de incorporación

En la tarjeta Web Chat, haz clic en Embed in website y luego en Copy code. El snippet es un solo tag que lleva el ID de tu agente; cópialo tal cual, no hay ninguna clave que agregar.

Resultado esperado: un tag de una línea en tu portapapeles, como este, con el ID de tu agente en lugar de BOT_UID:

<script src="https://app.any.bot/widget.js" data-anybot="BOT_UID" async></script>

Si tu sitio todavía tiene el snippet anterior de varias líneas (empieza con <!-- AnyBot Chat Widget -->), reemplaza el bloque completo por este tag: el anterior ya no recoge tu icono ni tus colores. La referencia del canal explica el tag en detalle.

5. Pégalo en tu sitio

Pega el tag justo antes del tag de cierre </body> en cada página donde deba aparecer el widget, y luego publica. Al cargarse, renderiza un launcher flotante; al hacer clic en él, se abre el chat.

Resultado esperado: un botón launcher aparece en la esquina de tu página en vivo.

6. (Opcional) abre el chat desde tu propio botón

Agrega data-anybot-open a cualquier botón o enlace de tu página, por ejemplo un botón "Chatea con nosotros" en tu encabezado, y un clic en él abre el chat:

<button type="button" data-anybot-open>Chatea con nosotros</button>

Resultado esperado: al hacer clic en tu botón se abre el mismo panel de chat que con el launcher.

7. (Opcional) blíndalo y captura contactos

De vuelta en la configuración del canal Web Chat:

• Allowed domains, enumera los sitios autorizados a cargar el widget. Cualquier otro origen se rechaza del lado del servidor con un 403, así que no se puede eludir editando el snippet. Una lista vacía significa sin restricciones, y el origen de tu propio dashboard siempre está permitido.
• Pre-chat capture, pide cualquiera de estos datos, nombre, correo o teléfono, antes del primer mensaje; los valores rellenan el contacto. Es una de las escrituras public-safe deliberadas.

Ambos surten efecto sin volver a pegar el tag.

8. Prueba el widget en vivo

Abre tu página publicada en un navegador nuevo (o una ventana de incógnito) para ser un visitante anónimo, haz clic en el launcher y envía un mensaje.

Resultado esperado: el panel se abre, tu mensaje se envía y el agente entrega una respuesta en streaming, como invitado, sin inicio de sesión.

Comprueba que funciona

• El canal Web Chat está activado en el agente.
• El botón launcher aparece en tu página en vivo.
• Al hacer clic en él se abre el chat y un mensaje de prueba obtiene una respuesta en streaming.
• Si estableciste dominios permitidos, el widget se carga en esos y se rechaza en los demás.

Solución de problemas

• El launcher no aparece, confirma que el <script> esté antes de </body> y que el canal Web Chat esté activado para este agente.
• 403 cuando el widget se carga, el dominio de la página no está en la lista de dominios permitidos; agrégalo o vacía la lista para quitar las restricciones.
• El launcher muestra el color y el icono predeterminados, la página todavía tiene el snippet anterior de varias líneas; reemplázalo por el tag de una línea de Copy code.
• Los cambios de estilo o de saludo no se ven, el widget lee la configuración en cada carga; recarga la página de forma forzada. No necesitas volver a pegar el tag, salvo después de cambiar el tema.
• Visitantes atascados en un formulario, la pre-chat capture está activada; cada campo listado es obligatorio antes de que empiece el chat.

Qué sigue

• Referencia del canal Web chat, el tag de incorporación, cómo abrir el chat desde tus propios botones, cada ajuste de apariencia y el modelo de privacidad public-safe.
• Configuración del canal, saludo, horario comercial y fuera de horario.
• Conecta más canales, pon el mismo agente en WhatsApp, Slack, SMS y el resto de los 8 canales.