Intégrer un chatbot IA sur WordPress, Shopify et Wix (2026)

Le snippet Heeya à copier-coller

Avant d'aller plus loin : récupérez votre script d'intégration. Dans votre dashboard Heeya, rendez-vous dans Paramètres de l'agent > Intégration. Vous y trouvez un snippet qui ressemble à ceci :

<script
  src="https://heeya.fr/static/js/widget.js"
  data-agent-id="VOTRE_AGENT_ID"
  defer
></script>

Remplacez VOTRE_AGENT_ID par l'identifiant affiché dans votre tableau de bord. C'est ce seul bloc que vous allez insérer dans les sections suivantes — la procédure change selon le CMS, pas le code lui-même.

Vous n'avez pas encore de chatbot ? Créez-en un en quelques minutes avec notre guide chatbot no code : créer un assistant IA sans coder.

Intégration sur WordPress

Deux méthodes selon votre niveau de confort. Les deux fonctionnent en moins de 5 minutes.

Méthode 1 : via le plugin "Insert Headers and Footers" (recommandée)

C'est la méthode la plus propre — elle ne touche pas aux fichiers de thème et survit aux mises à jour.

1. Dans votre administration WordPress, allez dans Extensions > Ajouter une extension.
2. Recherchez "Insert Headers and Footers" (plugin de WPBeginner) et installez-le.
3. Allez dans Réglages > Insert Headers and Footers.
4. Collez votre snippet Heeya dans la section "Scripts in Footer".
5. Cliquez sur Enregistrer. C'est tout.

Le widget apparaît sur toutes les pages de votre site. Rechargez une page en navigation privée pour confirmer.

Méthode 2 : directement dans le fichier footer.php

Si vous préférez ne pas ajouter de plugin, éditez votre thème directement.

1. Allez dans Apparence > Éditeur de thème (ou utilisez un éditeur FTP).
2. Ouvrez le fichier footer.php de votre thème enfant (impératif : thème enfant, jamais le thème parent).
3. Collez votre snippet juste avant la balise </body>.
4. Cliquez sur Mettre à jour le fichier.

Attention : modifiez toujours le thème enfant, jamais le thème parent. Une mise à jour du thème parent écraserait votre modification. Si vous n'avez pas de thème enfant, créez-en un ou utilisez la Méthode 1.

Pour un guide complet sur l'intégration spécifique à WooCommerce : chatbot WooCommerce : guide d'intégration.

Intégration sur Shopify

Shopify permet l'injection de code personnalisé via l'éditeur de thème. Pas besoin d'application tierce.

Étapes d'intégration Shopify

1. Dans votre panneau d'administration Shopify, cliquez sur Boutique en ligne > Thèmes.
2. En face de votre thème actif, cliquez sur les trois points puis sur "Modifier le code".
3. Dans l'arborescence de gauche, sous Layout, ouvrez le fichier theme.liquid.
4. Repérez la balise </body> (utilisez Ctrl+F pour la trouver rapidement).
5. Collez votre snippet Heeya juste avant cette balise.
6. Cliquez sur Enregistrer.

Le widget s'affiche sur l'ensemble de la boutique, y compris les pages produit, le panier et la page de paiement (si votre thème l'autorise). Idéal pour automatiser le service client e-commerce — réponses sur les délais de livraison, les retours et les tailles en temps réel.

Cibler certaines pages uniquement sur Shopify

Si vous voulez limiter le widget aux pages produit uniquement, enveloppez le snippet dans une condition Liquid :

{% raw %}{% if template == 'product' %}
  <script
    src="https://heeya.fr/static/js/widget.js"
    data-agent-id="VOTRE_AGENT_ID"
    defer
  ></script>
{% endif %}{% endraw %}

Intégration sur Wix

Wix permet l'ajout de code personnalisé via son gestionnaire de code intégré. La fonctionnalité est disponible sur tous les plans payants.

Étapes d'intégration Wix

1. Dans votre éditeur Wix, cliquez sur Paramètres du site (icône engrenage, coin inférieur gauche).
2. Sélectionnez Code personnalisé dans la section Avancé.
3. Cliquez sur + Ajouter un code personnalisé.
4. Collez votre snippet Heeya dans la zone de texte.
5. Donnez-lui un nom (ex. : "Chatbot Heeya") et choisissez l'emplacement "Fin du corps".
6. Sélectionnez "Toutes les pages" pour une diffusion globale.
7. Cliquez sur Appliquer, puis publiez votre site.

Important : le widget n'est pas visible dans l'aperçu de l'éditeur Wix — c'est normal. Il n'apparaît que sur le site publié. Ne pensez pas que l'intégration a échoué si vous ne le voyez pas en mode édition.

Intégration sur Webflow

Webflow offre deux points d'injection : au niveau du projet (toutes les pages) ou page par page.

Option A : code global (toutes les pages)

1. Dans votre dashboard Webflow, ouvrez votre projet.
2. Cliquez sur l'icône W en haut à gauche, puis sur Project Settings.
3. Allez dans l'onglet Custom Code.
4. Collez votre snippet Heeya dans la zone "Footer Code".
5. Cliquez sur Save Changes, puis republiez votre site.

Option B : code sur une page spécifique

1. Dans l'éditeur, sélectionnez la page cible dans le panneau Pages.
2. Cliquez sur l'icône engrenage pour ouvrir les paramètres de la page.
3. Faites défiler jusqu'à "Custom Code" et collez le snippet dans "Before </body> tag".
4. Publiez la page.

Intégration sur un site HTML personnalisé

La méthode la plus directe. Ouvrez chaque fichier HTML (ou votre template de base si vous utilisez un framework) et ajoutez le snippet juste avant </body> :

<!-- Chatbot Heeya -->
<script
  src="https://heeya.fr/static/js/widget.js"
  data-agent-id="VOTRE_AGENT_ID"
  defer
></script>
</body>
</html>

Si votre site est généré avec un SSG (Next.js, Gatsby, Hugo, Astro), injectez le script dans le layout principal ou le composant _document.js / app.html selon le framework. L'attribut defer garantit que le chargement du widget ne ralentit pas le rendu de vos pages.

Pour aller plus loin sur les bonnes pratiques d'intégration : tout savoir sur l'intégration d'un chatbot sur votre site internet.

Tableau comparatif par CMS

Erreurs courantes et comment les corriger

L'intégration est simple, mais quelques pièges récurrents font perdre du temps. Voici les 6 erreurs les plus fréquentes et leurs solutions.

Erreur 1 : le widget n'apparaît pas du tout

Cause probable : le script est mal placé (dans le <head> sans defer, ou le fichier n'a pas été enregistré).

Diagnostic : ouvrez la console de votre navigateur (F12 > Console) et cherchez une erreur de chargement de script. Si vous voyez 404 sur l'URL du widget, l'agent ID est incorrect ou le snippet a été tronqué lors du copier-coller.

Solution : retournez dans votre dashboard Heeya, copiez de nouveau le snippet complet, et vérifiez que votre éditeur n'a pas ajouté de caractères invisibles.

Erreur 2 : le widget s'affiche en mode édition mais pas sur le site publié (Wix)

C'est normal sur Wix. Le code personnalisé est injecté uniquement sur le site publié, pas dans l'aperçu de l'éditeur. Publiez votre site et testez via l'URL publique.

Erreur 3 : le widget disparaît après une mise à jour du thème (WordPress)

Cause : vous avez modifié le footer.php du thème parent, pas du thème enfant. Une mise à jour du thème a écrasé votre modification.

Solution : passez à la Méthode 1 (plugin "Insert Headers and Footers"). C'est indépendant du thème, mis à jour ou non.

Erreur 4 : le widget se charge mais le chatbot ne répond pas

Cause probable : l'agent ID dans le snippet ne correspond pas à l'agent que vous avez configuré, ou l'agent n'a pas encore de base de connaissances associée.

Solution : dans le dashboard Heeya, vérifiez que l'agent est bien actif et que des documents ont été indexés. Testez d'abord via le chat de test intégré avant de tester sur le site.

Erreur 5 : le widget masque des éléments de la page (z-index)

Sur certains sites, le widget peut passer derrière un menu sticky ou un bandeau cookies. C'est un conflit de z-index CSS.

Solution : contactez le support Heeya pour ajuster la valeur z-index du widget. Vous pouvez aussi ajouter cette règle CSS dans votre feuille de style :

#heeya-widget-container {
  z-index: 9999 !important;
}

Erreur 6 : le widget ralentit le site (score PageSpeed impacté)

Si vous avez placé le script dans le <head> sans l'attribut defer, il bloque le rendu de la page.

Solution : assurez-vous que l'attribut defer est présent dans le snippet (il l'est par défaut dans le code Heeya). Le chargement du widget se fait alors après le chargement initial de la page — aucun impact sur le LCP ou le FID.

Pour aller plus loin sur les performances et l'optimisation : comprendre la technologie RAG derrière votre chatbot et notre page expertise RAG.

FAQ

Pour aller plus loin

• Créer un chatbot IA sans coder : guide no code complet
• Chatbot WooCommerce : guide d'intégration étape par étape
• Chatbot sur votre site internet : tout ce qu'il faut savoir
• Solution chatbot pour e-commerce : automatiser ventes et support
• Automatiser votre service client avec un chatbot IA
• Qu'est-ce que le RAG ? Le guide complet en français
• Automatiser son service client sans développeur en 2026