# Instalar el widget de chat con una etiqueta script

> Añade la burbuja de chat de intoCHAT a cualquier web con una etiqueta script: dónde pegarla, el atributo data-chatbot-id, apps de una página y errores típicos.

Una sola etiqueta script añade la burbuja de chat de intoCHAT a cualquier web cuyo HTML puedas editar. La etiqueta solo lleva el ID de tu agente. Todo lo demás se carga desde intoCHAT, así que los cambios posteriores no requieren tocar tu web.

## Copiar el código

1. Abre tu agente y ve a la pestaña **Share** (Compartir). Está disponible en cuanto guardas el agente.
2. En la tarjeta **Bubble Chat**, haz clic en **Copy Code**. El código ya incluye el ID de tu agente.

```html
<script src="https://www.intochat.ai/api/embed.js" data-chatbot-id="YOUR_AGENT_ID"></script>
```

Por defecto, cualquier web que tenga este código puede mostrar tu agente. Para limitarlo a tus propias webs, configura los [dominios permitidos](/es/docs/allowed-domains).

## Dónde pegarlo

Pega el script justo antes de la etiqueta de cierre `</body>`, en cada página donde deba aparecer el chat. Lo más sencillo es un pie de página, layout o plantilla global que usen todas las páginas.

El final del body es el lugar recomendado, pero el script también funciona en el `<head>`: espera a que la página haya cargado antes de crear la burbuja. Si tu plataforma solo ofrece un campo para el head, pégalo ahí.

Si el mismo código acaba dos veces en una página, por ejemplo una vez en tu tema y otra a través de un plugin, solo la primera copia añade una burbuja y la segunda se ignora. Los códigos de agentes distintos añaden cada uno su propia burbuja.

## Atributos

| Atributo | Obligatorio | Descripción |
|---|---|---|
| `src` | Sí | Siempre `https://www.intochat.ai/api/embed.js` |
| `data-chatbot-id` | Sí | El ID del agente que se carga, visible en la pestaña **Share** |

No hay más atributos. Los colores, el tema, la fuente, la posición, el icono de la burbuja, el tooltip, los mensajes de bienvenida, las preguntas sugeridas, la ventana emergente de bienvenida y la apertura automática se configuran en la pestaña [Appearance](/es/docs/appearance).

El script lee `data-chatbot-id` del elemento script que lo cargó. Deja el atributo en ese elemento. Las herramientas que reescriben las etiquetas script pueden eliminarlo: las etiquetas de HTML personalizado de Google Tag Manager lo hacen, y por eso GTM necesita [su propio código](/es/integraciones/google-tag-manager).

## Qué ocurre en la página

1. Cuando el HTML ha cargado, el script obtiene de intoCHAT los ajustes de tu agente.
2. Añade una burbuja redonda en la esquina inferior izquierda o derecha, con un breve tooltip al lado. Si activaste la ventana emergente de bienvenida o la apertura automática en **Launcher behaviour**, las muestra tras el retraso que configuraste.
3. Un clic abre el chat en un iframe servido por intoCHAT: una ventana de 380 × 600 píxeles en escritorio y pantalla completa en pantallas de hasta 768 píxeles de ancho.
4. El widget guarda un ID de sesión en una cookie y en el almacenamiento local de tu web, así que la conversación sigue cuando el visitante abre otra página.

## Apps de una sola página

La burbuja se añade a `document.body`, fuera del elemento raíz de tu app. Los cambios de ruta en el cliente no la afectan, así que carga el script una vez por carga completa de página, no en cada cambio de ruta. Si tu framework sustituye todo el `<body>` al navegar, la burbuja desaparece con él. Si el código se vuelve a ejecutar, coloca de nuevo la misma burbuja en lugar de añadir una segunda.

Para el código de React y Next.js, consulta [Next.js y React](/es/docs/nextjs-react).

## Content Security Policy

Si tu web envía una Content Security Policy, permite `https://www.intochat.ai` en:

- `script-src`, para el script
- `connect-src`, para cargar los ajustes del agente
- `frame-src`, para la ventana del chat

Un icono de burbuja propio es una imagen en tu página, así que `img-src` también debe permitir su dirección.

## Comprobar la instalación

Recarga una página de tu web. La burbuja debería aparecer en la esquina inferior en pocos segundos. Si no aparece, abre la consola de desarrollo del navegador:

- **"Chatbot not found."** El valor de `data-chatbot-id` no es correcto. Copia de nuevo el código desde la pestaña **Share**.
- **"The embed script needs a data-chatbot-id attribute."** Falta el atributo, o una herramienta lo ha eliminado de la etiqueta. Copia de nuevo el código o, si lo cargas con GTM, usa el código de Google Tag Manager.
- **"intoCHAT: this website is not in the allowed domains of this agent…"** El agente está limitado a otras webs. Añade el dominio de esta web en la pestaña **Share**, en **Where this agent can appear**. Consulta [Dominios permitidos](/es/docs/allowed-domains).
- **"intoCHAT: this agent is private…"** Desactiva **Private agent** en la pestaña **Share**.
- **Un error de Content Security Policy.** Permite las direcciones de la lista anterior.
- **Ningún error y ninguna petición a intochat.ai.** El script no está en la página, o un bloqueador de anuncios o una extensión de privacidad lo ha detenido. Prueba en una ventana privada sin extensiones.

Encontrarás más casos en [Solución de problemas](/es/docs/troubleshooting).