# Installer le widget de chat sur d'autres plateformes

> Où coller le script intoCHAT sur Wix, Webflow, Squarespace, Framer, Bubble, Joomla, Drupal, Ghost, Magento, VTEX et d'autres, avec des guides pas à pas.

intoCHAT fonctionne sur toute plateforme qui permet d'ajouter un script à vos pages. La règle est partout la même : collez la balise script de l'onglet **Share** dans un champ qui insère du code à la fin du body, sur toutes les pages.

## La règle générale

- Cherchez un champ nommé code de pied de page, fin du body ou similaire. Un champ d'en-tête ou de head fonctionne aussi, car le widget attend le chargement de la page, mais la fin du body est l'emplacement recommandé.
- Appliquez le code à toutes les pages.
- Publiez le site. La plupart des créateurs de sites n'ajoutent le code personnalisé qu'au site en ligne, pas à l'aperçu de l'éditeur.
- Si la plateforme modifie vos balises script et supprime l'attribut `data-chatbot-id`, passez par Google Tag Manager.

Le code et son unique attribut sont expliqués dans [Installer avec une balise script](/fr/docs/script-tag).

## Créateurs de sites et CMS

| Plateforme | Où placer le code | Guide |
|---|---|---|
| Wix | Paramètres → Code personnalisé, toutes les pages, emplacement **Corps - fin** | [Wix](/fr/integrations/wix) |
| Webflow | Site settings → Custom code → **Footer code**, puis publier | [Webflow](/fr/integrations/webflow) |
| Squarespace | Code personnalisé → Injection de code → **Pied de page** | [Squarespace](/fr/integrations/squarespace) |
| Framer | Project Settings → Custom Code → Add Script, fin du body, exécution Once | [Framer](/fr/integrations/framer) |
| Bubble | Settings → SEO / metatags → champ body | [Bubble](/fr/integrations/bubble) |
| Joomla | Un module Custom dans une position affichée sur chaque page, créé avec un éditeur qui conserve les scripts | [Joomla](/fr/integrations/joomla) |
| Drupal | Une bibliothèque de votre thème qui charge le script dans le pied de page | [Drupal](/fr/integrations/drupal) |
| Ghost | Settings → Advanced → Code injection → **Site footer** | [Ghost](/fr/integrations/ghost) |
| WordPress | L'extension officielle | [Documentation WordPress](/fr/docs/wordpress) |

## Boutiques en ligne

| Plateforme | Où placer le code | Guide |
|---|---|---|
| Shopify | `theme.liquid`, juste au-dessus de `</body>` | [Documentation Shopify](/fr/docs/shopify) |
| WooCommerce | L'extension WordPress officielle | [WooCommerce](/fr/integrations/woocommerce) |
| Magento | Content → Design → Configuration → Footer → **Miscellaneous HTML** | [Magento](/fr/integrations/magento) |
| VTEX | Une balise HTML personnalisée dans Google Tag Manager, ou le code de votre vitrine | [VTEX](/fr/integrations/vtex) |

Sur toutes ces boutiques, **Connect your website** dans l'onglet **Actions** peut aussi donner à l'agent une recherche de produits en direct, à partir des données publiques de la boutique. Voir [Connecter votre boutique](/fr/docs/connect-your-store).

## Frameworks

| Plateforme | Où placer le code | Guide |
|---|---|---|
| Next.js | `next/script` dans le layout racine | [Next.js](/fr/integrations/nextjs) |
| React | `index.html`, ou un composant avec `useEffect` | [React](/fr/integrations/react) |

Les deux sont détaillés dans [Next.js et React](/fr/docs/nextjs-react).

## Google Tag Manager

Google Tag Manager supprime les attributs data comme `data-chatbot-id` des balises script placées dans des balises HTML personnalisées : le code habituel se charge alors sans savoir quel agent afficher. Utilisez plutôt ce code dans une balise HTML personnalisée, avec l'identifiant de votre agent, et déclenchez-la avec un déclencheur **DOM prêt** :

```html
<script>
  (function () {
    if (document.getElementById('intochat-embed')) return;
    var s = document.createElement('script');
    s.id = 'intochat-embed';
    s.src = 'https://www.intochat.ai/api/embed.js';
    s.setAttribute('data-chatbot-id', 'YOUR_AGENT_ID');
    document.body.appendChild(s);
  })();
</script>
```

La vérification au début évite que le script se charge de nouveau si la balise se déclenche deux fois sur la même page. Toutes les étapes sont dans le [guide Google Tag Manager](/fr/integrations/google-tag-manager).

## Votre plateforme n'est pas listée

- Si elle permet d'ajouter du HTML ou un script à la fin du body, la balise script fonctionne.
- Si elle n'accepte du code que dans le head, collez-y la balise script. Elle fonctionne aussi dans le head.
- Si elle n'accepte aucun code personnalisé, ajoutez un bouton ou un élément de menu qui mène à la [page de chat de votre agent](/fr/docs/iframe-and-link).