Comment ajouter un chat en direct sur Shopify, Wix, Squarespace et Webflow

Le widget de chat en direct de Hodhod est un court extrait de code JavaScript : il fonctionne donc sur tout créateur de site qui permet d'ajouter du code personnalisé. Ce guide montre précisément où le coller sur Shopify, Wix, Squarespace et Webflow, et comment l'ajouter avec Google Tag Manager si vous préférez ne pas toucher du tout au code du site.

Vous utilisez WordPress ou WooCommerce ? Commencez par le guide WordPress : une extension toute prête existe.

Avant de commencer

Il vous faut l'extrait de code d'installation de votre boîte de réception. Si vous n'avez pas encore créé de boîte de réception de site, les étapes 1 à 4 du guide d'installation sur un site prennent quelques minutes. Vous pouvez copier le code de nouveau à tout moment : ouvrez Paramètres → Boîtes de réception → la boîte de réception de votre site puis, dans l'onglet « Paramètres », basculez l'aperçu du widget de « Prévisualiser » sur « Script ».

Les noms de menus de ces plateformes sont cités en anglais, comme dans leur interface d'origine ; ils peuvent différer si la plateforme a été mise à jour ou si votre interface est réglée dans une autre langue.

Ajouter un chat en direct sur Shopify

1. Dans l'administration de Shopify, allez dans Online Store → Themes.
2. À côté du thème que vous voulez modifier, cliquez sur le bouton « … » et choisissez « Duplicate ». Travailler sur une copie vous permet de tester en toute sécurité.
3. Sur la copie, cliquez de nouveau sur « … » et choisissez « Edit code ».
4. Dans le dossier « Layout », ouvrez theme.liquid.
5. Descendez tout en bas et collez l'extrait de code Hodhod juste au-dessus de la balise fermante </body>.
6. Enregistrez, prévisualisez la copie et, quand tout fonctionne, publiez-la.

Remarques :

• Le code se trouve dans le thème. Si vous changez de thème, ajoutez-le au nouveau. Shopify prévient aussi que les modifications du code d'un thème peuvent être perdues lors d'une mise à jour du thème.
• Un thème que vous ne faites qu'essayer ne peut pas être modifié.
• Le paiement de Shopify est séparé de votre thème : le widget apparaît donc sur les pages de votre boutique (accueil, collections, produits, panier), mais pas dans les étapes du paiement elles-mêmes.

Ajouter un chat en direct sur Wix

1. Dans le tableau de bord de votre site, allez dans Settings et ouvrez « Custom Code » sous « Development & integrations ».
2. Cliquez sur « + Add Custom Code » et collez l'extrait de code Hodhod.
3. Donnez-lui un nom facile à reconnaître, comme « Hodhod chat ».
4. Sous « Add Code to Pages », choisissez « All pages » et, sous « Place Code in », choisissez « Body – end ».
5. Décidez si le code se charge une fois par visite ou à chaque page, puis cliquez sur « Apply ».

Remarques :

• Le site doit être publié et avoir un domaine connecté, ce qui exige à son tour une formule Premium.
• Les extraits de code sont liés au domaine : si vous attribuez un autre domaine au site, ils sont supprimés.
• Wix n'assure pas de support pour le code tiers. Si le widget n'apparaît pas après la publication, consultez les consignes de Wix sur le code personnalisé pour connaître les restrictions récentes.

Ajouter un chat en direct sur Squarespace

1. Ouvrez le panneau de votre site et allez dans Website Tools → Code Injection. (Squarespace a renommé et déplacé des menus d'une version à l'autre : cherchez « Code Injection » si le chemin diffère.)
2. Collez l'extrait de code Hodhod dans le champ « Footer ».
3. Cliquez sur « Save ».

Remarques :

• Code Injection est disponible avec les formules Core, Plus et Advanced (et certaines anciennes formules), mais pas avec Basic.
• Le code du pied de page est ajouté avant la balise fermante </body> sur chaque page.
• Squarespace peut ne pas exécuter les scripts injectés lorsque vous êtes connecté : vérifiez donc le résultat dans une fenêtre de navigation privée, sur votre site publié.

Ajouter un chat en direct sur Webflow

1. Ouvrez les Site settings de votre projet et allez dans l'onglet « Custom code ».
2. Collez l'extrait de code Hodhod dans « Footer code », pour qu'il se charge juste avant la balise fermante </body>, puis cliquez sur « Save changes ».
3. Publiez votre site. Le code personnalisé s'affiche dans l'aperçu, mais ne passe en ligne qu'après la publication.

Remarques :

• Pour ajouter le widget à une seule page, utilisez les réglages de cette page, dans la zone « Before </body> tag ».
• Si vous ne trouvez pas le réglage, consultez l'aide de Webflow pour savoir ce que permettent votre formule et votre rôle.

Ajouter un chat en direct sur n'importe quel site avec Google Tag Manager

Si Google Tag Manager est déjà installé sur votre site, vous pouvez ajouter le widget sans modifier le site du tout :

1. Dans Tag Manager, allez dans Tags et cliquez sur « New ».
2. Choisissez le type de balise « Custom HTML » et collez l'extrait de code Hodhod.
3. Sous Triggering, choisissez « All Pages ».
4. Enregistrez, puis faites Submit et Publish sur le conteneur.

Le widget conserve un petit cookie dans le navigateur du visiteur pour qu'une conversation puisse se poursuivre d'une page à l'autre. Si votre site demande le consentement aux cookies, utilisez le déclencheur de votre outil de consentement pour que la balise ne se déclenche qu'après l'accord du visiteur.

Testez le résultat

Ouvrez votre site publié dans une fenêtre de navigation privée. Le bouton de chat doit apparaître dans un coin en bas de la page ; envoyez un message de test et vérifiez qu'il arrive bien dans « Conversations » dans Hodhod.

Si vous avez défini des « Domaines autorisés » dans l'onglet « Configuration » de la boîte de réception, ajoutez-y chaque domaine sur lequel le widget fonctionne, séparés par des virgules : votre domaine de production, mais aussi tout domaine d'aperçu ou par défaut sur lequel vous testez (par exemple votre-boutique.myshopify.com, votresite.wixsite.com ou votreprojet.webflow.io). Sinon, le widget reste masqué sur ceux qui manquent.

Si le widget n'apparaît pas

1. Vérifiez que vous avez publié. Wix et Webflow n'exécutent le code personnalisé que sur le site publié.
2. Vérifiez l'emplacement. L'extrait doit se trouver dans la zone de pied de page ou « Body – end » qui se charge sur toutes les pages.
3. Vérifiez les « Domaines autorisés ». Le domaine sur lequel vous testez doit figurer dans la liste.
4. Cherchez une seconde copie. Si vous voyez deux boutons de chat, le code a été ajouté deux fois, par exemple dans le thème et dans un gestionnaire de balises. N'en gardez qu'un.
5. Essayez sans bloqueur de publicités, et regardez la console du navigateur (F12) pour repérer d'éventuelles erreurs.

Questions fréquentes