Widget de chat web
Incrusta en tu sitio un widget de chat con el tema de tu marca, cero configuración, sin tokens, sesiones de invitado y seguro para el público por diseño.
El widget de chat web es un chat incrustable con el tema de tu marca para tu sitio web. Hay cero configuración, no hay tokens ni claves de API que gestionar. Los visitantes chatean como invitados (sin iniciar sesión), las respuestas llegan en tiempo real y el botón de inicio se configura por sí solo con la configuración que guardaste, de modo que modificar el color, el saludo o el icono surte efecto sin tener que volver a pegar el snippet. Como los invitados solo ejecutan habilidades seguras para el público, un visitante nunca puede llegar a tus datos privados.
Antes de empezar
- El agente necesita tener habilitado el canal Web Chat (está en la pestaña Integraciones del agente).
- Ten acceso para editar el HTML de tu sitio, pegarás una etiqueta
<script>antes de</body>. - Decide de antemano si quieres restringir la incrustación a dominios específicos y si quieres pedir a los visitantes un contacto antes de que chateen.
Agrégalo a tu sitio
- Abre el agente, ve a Integraciones y busca la tarjeta Web Chat.
- Haz clic en Incrustar en el sitio web para abrir el diálogo de incrustación.
- Haz clic en Copiar código y pega el snippet justo antes de la etiqueta de cierre
</body>en cada página donde deba aparecer el widget.
El snippet es una sola etiqueta. El dashboard rellena el ID de tu agente (BOT_UID) y el host de AnyBot correcto, así que cópialo tal cual:
<script src="https://app.any.bot/widget.js" data-anybot="BOT_UID" async></script>Carga el widget de AnyBot, que agrega a la página un botón de inicio flotante; un clic abre el chat (a pantalla completa en teléfonos, y Escape lo cierra). El código del widget lo sirve AnyBot en lugar de estar pegado en tu página, así que las correcciones y tu configuración de apariencia llegan a tu sitio sin volver a pegar nada. Si eliges un tema en el diálogo de incrustación, la etiqueta también lleva un atributo data-theme; cambiar el tema más adelante es el único cambio que obliga a volver a copiar la etiqueta.
Abre el chat desde tus propios botones
Agrega data-anybot-open a cualquier elemento de tu página, como un botón "Chatea con nosotros" o un enlace en tu encabezado, y un clic en él abre el chat. No hace falta ningún script adicional.
<button type="button" data-anybot-open>Chatea con nosotros</button>Desde tu propio JavaScript, el widget también ofrece window.AnyBotWidget.open(), close() y toggle().
Personaliza el widget
La apariencia y el comportamiento provienen de la configuración del canal Web Chat y se sirven en el endpoint público de información del agente que el widget consulta. Campos editables:
| Configuración | Qué controla |
|---|---|
theme_color | Color del botón de inicio y color de acento |
launcher_position | bottom-right o bottom-left |
launcher_icon_url | Icono personalizado del botón de inicio (por defecto, un glifo de chat) |
header_title | Título que se muestra en la parte superior del panel de chat |
welcome_bubble | Adelanto del saludo sobre el botón de inicio |
input_placeholder | Texto de marcador de posición en el cuadro del mensaje |
show_branding | Interruptor de "Powered by" |
Estos conviven con los controles compartidos por canal. Consulta Configuración del canal para el saludo, el horario comercial y el fuera de horario.
Restringe dónde se puede incrustar
Agrega al canal una lista de dominios permitidos y solo esos sitios podrán cargar el widget, una solicitud desde cualquier otro dominio se rechaza (403). Se aplica del lado del servidor en cada solicitud de invitado (se comprueban Origin/Referer), por lo que no se puede eludir modificando el snippet. Una lista vacía significa sin restricciones. El origen de tu propio dashboard de AnyBot siempre está permitido, así que la vista previa del propietario nunca se bloquea.
Captura un contacto antes del chat
Activa la captura previa al chat para condicionar la conversación a un breve formulario. Elige cualquier subconjunto de nombre, correo electrónico y teléfono; el visitante los completa antes del primer mensaje y los valores prellenan el contacto. Esta es una de las pocas escrituras seguras para el público, consulta Privacy by design más abajo.
En este canal
- Recibe: mensajes escritos por visitantes invitados.
- Envía: respuestas de texto en tiempo real, con los pasos de las llamadas a herramientas y comentarios 👍/👎; las imágenes que genera el agente se muestran en línea.
- Sesiones: los invitados conservan su conversación entre recargas de página en el mismo dispositivo.
Privacy by design
Los visitantes invitados solo ejecutan herramientas seguras para el público, actualmente 27 de las habilidades de la plataforma. Un visitante nunca puede hacer que el agente lea tu bandeja de entrada, tu CRM o tus datos financieros. Un pequeño y deliberado subconjunto de herramientas seguras para el público son escrituras (captura de leads, reserva de citas), todo lo sensible permanece reservado al propietario. Consulta Seguridad.
Solución de problemas
- El botón de inicio no aparece, confirma que el
<script>esté antes de</body>y que el canal Web Chat esté habilitado para este agente. 403cuando 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 botón de inicio muestra el color y el icono predeterminados, la página todavía tiene el snippet anterior de varias líneas. Reemplázalo por la etiqueta de una línea de Copiar código.
- Los cambios de estilo no se aplicaron, el widget lee la configuración al cargarse; fuerza la recarga de la página. No necesitas volver a pegar la etiqueta para recoger la nueva configuración, salvo después de cambiar el tema.
- Visitantes atascados en un formulario, la captura previa al chat está activada; todos los campos listados son obligatorios antes de que empiece el chat.
Preguntas frecuentes
¿Necesito una clave de API? No, cero configuración. La etiqueta lleva el ID de tu agente y nada más.
¿Pueden los visitantes activar acciones sensibles? No, solo habilidades seguras para el público, además de las deliberadas escrituras seguras para el público como la captura de leads y la reserva de citas.
¿Puedo limitar qué sitios lo incrustan? Sí, con la lista de dominios permitidos; vacía significa cualquier sitio.
¿Modificar la configuración romperá la incrustación? No, el widget se configura por sí solo en cada carga, así que el color, el icono y el saludo se actualizan sin tocar el snippet.
¿Puede mi propio botón abrir el chat? Sí. Agrega data-anybot-open a cualquier botón o enlace, o llama a window.AnyBotWidget.open().
Siguientes pasos
- Configuración del canal, saludo, horario comercial y fuera de horario
- Todos los canales, conecta WhatsApp, Telegram, correo electrónico y más
- Habilidades, qué herramientas seguras para el público puede ejecutar tu agente
- Seguridad, el modelo reservado al propietario frente a seguro para el público
Llamadas de voz
Asigna un número de teléfono y tu agente responde al teléfono, saluda a quien llama con una voz sintetizada, transcribe lo que dice, responde en voz alta y mantiene una verdadera conversación hablada.
Descripción general de las integraciones
Dale a tu agente herramientas reales con las que actuar, conecta una aplicación, concede acceso y obtiene habilidades. Cada herramienta es public-safe u owner-only por diseño.