Incrustar un Chatbot de IA en tu sitio web

Inserción en sitios web

Esta es la forma universal de añadir tu chatbot a cualquier sitio web. Pegas dos líneas cortas en el HTML de tu sitio: una etiqueta <script> que carga el widget y un elemento <web-chat-agent> que le indica qué chatbot mostrar. Eso es todo, la burbuja de chat flotante aparece en la esquina de cada página donde se ejecuta el código.

Si usas WordPress, Shopify, Wix, Squarespace o Webflow, consulta la guía específica para tu plataforma, donde se muestra exactamente en qué lugar pegar este mismo código.

Dónde encontrar tu ID del chatbot

No necesitas escribir el ID a mano. En el panel de WebChatAgent:

1. Abre tu chatbot.
2. Ve a Canales → Widget de chat y despliega Mostrar detalles de instalación.
3. Haz clic en el botón de copiar del cuadro de código.

El fragmento copiado ya incluye tu ID del chatbot, por lo que solo tienes que pegarlo. (Si alguna vez necesitas el ID en texto plano, es la cadena larga que aparece en la URL de tu panel: /dashboard/<your-chatbot-id>.)

El código para pegar

Pega esto justo antes de la etiqueta de cierre </body> de tu sitio:

<script src="https://webchatagent.com/widget/web-chat-agent.js" async></script>
<web-chat-agent chatbot-id="YOUR_ID"></web-chat-agent>

Reemplaza YOUR_ID por tu ID del chatbot (o, más fácil, copia el fragmento listo para usar desde el panel para que el ID ya esté incluido). El widget se carga de forma asíncrona, por lo que no ralentiza la página, y aparece como un botón de chat flotante en la esquina inferior.

Atributos opcionales

El widget obtiene sus colores, título, mensaje de bienvenida y comportamiento a partir de la configuración del panel, por lo que normalmente solo necesitas chatbot-id. Para sobrescribir algunos valores directamente en el HTML, añade estos atributos al elemento <web-chat-agent>:

• chatbot-id, tu ID del chatbot. Obligatorio.
• theme, estilo visual: "default" o "modern". El valor predeterminado es "default".
• initially-open, establécelo en "true" para abrir el chat automáticamente cuando la página cargue. El valor predeterminado es "false" (cerrada).
• tracking-consent, señal de consentimiento opcional para personalización persistente: "unknown", "denied" o "granted". Si se omite, el valor predeterminado es "unknown" y los disparadores locales anónimos siguen funcionando.
• context-data, contexto de sesión de tu página para la IA (por ejemplo, "Customer=Acme GmbH;OrderID=A-1023"), útil cuando el widget se ejecuta dentro de un CRM o una zona con inicio de sesión. Formatos, límites y notas de seguridad en la guía para desarrolladores.

<web-chat-agent
  chatbot-id="YOUR_ID"
  theme="modern"
  initially-open="false"
></web-chat-agent>

Todo lo demás (color de marca, avatar, fuentes, posición y comportamiento) se configura en Canales → Widget de chat, de modo que no tienes que volver a modificar el código para cambiar el diseño del widget. La personalidad del asistente se configura en Ajustes → Estilo y función de las respuestas.

Consentimiento de cookies y disparadores proactivos

El widget no añade un segundo banner de cookies. Sin una señal de consentimiento, se ejecuta en el Modo de Privacidad anónimo: los disparadores por tiempo, desplazamiento, intención de salida, inactividad, URL, visibilidad y clics de frustración se evalúan localmente en memoria. El reconocimiento de visitantes recurrentes, los contadores persistentes, las analíticas proactivas y los saludos generados por IA requieren una señal granted.

Consulta Consentimiento de cookies y disparadores proactivos anónimos para ver la matriz de comportamiento completa, ejemplos de CMP y la referencia de almacenamiento.

Insertar el chat dentro de la página

El fragmento anterior genera un botón flotante. Si prefieres colocar el chat dentro de la estructura de tu página, por ejemplo un panel de chat completo en una página dedicada de soporte, utiliza el widget integrado. Este carga un script diferente y un elemento diferente:

<script src="https://webchatagent.com/widget/chat-widget-inline.js" async></script>
<web-chat-agent-inline chatbot-id="YOUR_ID"></web-chat-agent-inline>

El chat integrado se muestra donde coloques el elemento, así que ubícalo dentro del contenedor donde quieras que aparezca el chat. Consulta la guía de Chat integrado para ver los detalles de diseño.

Funciona en todas partes

Ambos fragmentos consisten en HTML estándar y un elemento personalizado, por lo que funcionan en cualquier plataforma de sitios web: WordPress, Shopify, Wix, Squarespace, Webflow y sitios HTML/JS programados a mano. Pega el código en el HTML de tu sitio y publica los cambios.

Solución de problemas

• ¿No aparece el widget? Asegúrate de que el código esté en el HTML de la página (antes de </body>) y de haber publicado los cambios o borrado la caché de cualquier plugin. Revisa la consola del navegador por si hay scripts bloqueados.
• ¿Solo se muestra en una página? Coloca el fragmento en una ubicación global de todo el sitio (pie de página o código global), no en una sola página.