# Installer le widget de chat avec une balise script

> Ajoutez la bulle de chat intoCHAT à tout site avec une balise script : où la coller, l'attribut data-chatbot-id, les applications monopages, les erreurs.

Une seule balise script ajoute la bulle de chat intoCHAT à tout site dont vous pouvez modifier le HTML. La balise ne contient que l'identifiant de votre agent. Tout le reste se charge depuis intoCHAT, si bien que les modifications ultérieures ne demandent aucune intervention sur votre site.

## Copier le code

1. Ouvrez votre agent et allez dans l'onglet **Share** (Partager). Il est disponible dès que l'agent est enregistré.
2. Dans le bloc **Bubble Chat**, cliquez sur **Copy Code**. Le code contient déjà l'identifiant de votre agent.

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

Par défaut, n'importe quel site qui contient ce code peut afficher votre agent. Pour le limiter à vos propres sites, définissez des [domaines autorisés](/fr/docs/allowed-domains).

## Où le coller

Collez le script juste avant la balise de fermeture `</body>`, sur chaque page où le chat doit apparaître. Le plus simple est un pied de page, un layout ou un gabarit global commun à toutes les pages.

La fin du body est l'emplacement recommandé, mais le script fonctionne aussi dans le `<head>` : il attend que la page soit chargée pour créer la bulle. Si votre plateforme ne propose qu'un champ pour le head, collez-le là.

Si le même code se retrouve deux fois sur une page, par exemple une fois dans votre thème et une fois via une extension, seule la première copie ajoute une bulle et la seconde est ignorée. Les codes de différents agents ajoutent chacun leur propre bulle.

## Attributs

| Attribut | Obligatoire | Description |
|---|---|---|
| `src` | Oui | Toujours `https://www.intochat.ai/api/embed.js` |
| `data-chatbot-id` | Oui | L'identifiant de l'agent à charger, affiché dans l'onglet **Share** |

Il n'existe pas d'autre attribut. Les couleurs, le thème, la police, la position, l'icône de la bulle, l'infobulle, les messages d'accueil, les questions suggérées, les messages d'accueil au-dessus de la bulle et l'ouverture automatique se règlent dans l'onglet [Appearance](/fr/docs/appearance).

Le script lit `data-chatbot-id` sur l'élément script qui l'a chargé. Laissez donc l'attribut sur cet élément. Les outils qui réécrivent les balises script peuvent le supprimer : c'est le cas des balises HTML personnalisées de Google Tag Manager, d'où [un code spécifique pour GTM](/fr/integrations/google-tag-manager).

## Ce qui se passe sur la page

1. Une fois le HTML chargé, le script récupère les réglages de votre agent auprès d'intoCHAT.
2. Il ajoute une bulle ronde dans le coin inférieur gauche ou droit, avec une courte infobulle à côté. Si vous avez activé les messages d'accueil au-dessus de la bulle ou l'ouverture automatique sous **Launcher behaviour**, il les affiche après le délai choisi.
3. Un clic ouvre le chat dans une iframe servie par intoCHAT : une fenêtre de 380 × 600 pixels sur ordinateur, en plein écran sur les écrans de 768 pixels de large ou moins.
4. Le widget enregistre un identifiant de session dans un cookie et dans le stockage local de votre site, pour que la conversation continue quand le visiteur ouvre une autre page.

## Applications monopages

La bulle est ajoutée à `document.body`, en dehors de l'élément racine de votre application. Les changements de route côté client ne la touchent pas : chargez donc le script une fois par chargement complet de page, pas à chaque changement de route. Si votre framework remplace tout le `<body>` lors de la navigation, la bulle disparaît avec lui. Exécuter de nouveau le code remet alors la même bulle en place au lieu d'en ajouter une seconde.

Pour le code React et Next.js, voir [Next.js et React](/fr/docs/nextjs-react).

## Content Security Policy

Si votre site envoie une Content Security Policy, autorisez `https://www.intochat.ai` dans :

- `script-src`, pour le script
- `connect-src`, pour charger les réglages de l'agent
- `frame-src`, pour la fenêtre de chat

Une icône de bulle personnalisée est une image sur votre page : `img-src` doit donc aussi autoriser son adresse.

## Vérifier l'installation

Rechargez une page de votre site. La bulle doit apparaître dans le coin inférieur en quelques secondes. Sinon, ouvrez la console de développement du navigateur :

- **« Chatbot not found. »** La valeur de `data-chatbot-id` est incorrecte. Copiez de nouveau le code depuis l'onglet **Share**.
- **« The embed script needs a data-chatbot-id attribute. »** L'attribut manque, ou un outil l'a retiré de la balise. Copiez de nouveau le code, ou utilisez le code dédié à Google Tag Manager si vous passez par GTM.
- **« intoCHAT: this website is not in the allowed domains of this agent… »** L'agent est limité à d'autres sites. Ajoutez le domaine de ce site dans l'onglet **Share**, sous **Where this agent can appear**. Voir [Domaines autorisés](/fr/docs/allowed-domains).
- **« intoCHAT: this agent is private… »** Désactivez **Private agent** dans l'onglet **Share**.
- **Une erreur de Content Security Policy.** Autorisez les adresses listées plus haut.
- **Aucune erreur et aucune requête vers intochat.ai.** Le script est absent de la page, ou un bloqueur de publicité ou une extension de confidentialité l'a arrêté. Testez dans une fenêtre privée sans extensions.

D'autres cas sont traités dans [Dépannage](/fr/docs/troubleshooting).