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.
Créateurs de sites et CMS
| Plateforme | Où placer le code | Guide |
|---|---|---|
| Wix | Paramètres → Code personnalisé, toutes les pages, emplacement Corps - fin | Wix |
| Webflow | Site settings → Custom code → Footer code, puis publier | Webflow |
| Squarespace | Code personnalisé → Injection de code → Pied de page | Squarespace |
| Framer | Project Settings → Custom Code → Add Script, fin du body, exécution Once | Framer |
| Bubble | Settings → SEO / metatags → champ body | Bubble |
| Joomla | Un module Custom dans une position affichée sur chaque page, créé avec un éditeur qui conserve les scripts | Joomla |
| Drupal | Une bibliothèque de votre thème qui charge le script dans le pied de page | Drupal |
| Ghost | Settings → Advanced → Code injection → Site footer | Ghost |
| WordPress | L'extension officielle | Documentation WordPress |
Boutiques en ligne
| Plateforme | Où placer le code | Guide |
|---|---|---|
| Shopify | theme.liquid, juste au-dessus de </body> | Documentation Shopify |
| WooCommerce | L'extension WordPress officielle | WooCommerce |
| Magento | Content → Design → Configuration → Footer → Miscellaneous HTML | Magento |
| VTEX | Une balise HTML personnalisée dans Google Tag Manager, ou le code de votre vitrine | 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.
Frameworks
| Plateforme | Où placer le code | Guide |
|---|---|---|
| Next.js | next/script dans le layout racine | Next.js |
| React | index.html, ou un composant avec useEffect | React |
Les deux sont détaillés dans Next.js et 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 :
<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.
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.