Comment ajouter le chat en direct Hodhod à votre site, étape par étape

Dans ce guide, vous allez installer le widget de chat en direct Hodhod sur votre site, de la création de la boîte de réception dans le panneau jusqu'au premier message d'un client. Comptez quelques minutes, et rien à installer sur votre serveur : il suffit de coller un court extrait de code dans votre site.

Avant de commencer

• Un accès administrateur au panneau Hodhod. Seuls les administrateurs du compte peuvent créer des boîtes de réception.
• Un moyen de modifier le code ou le thème de votre site. Si votre site tourne sous WordPress, le guide WordPress est encore plus simple.

Étape 1 : créez une boîte de réception « Site internet »

Dans le panneau, allez dans Paramètres → Boîtes de réception et cliquez sur « Ajouter une boîte de réception ». Dans la liste des canaux, choisissez « Site internet » (Créer un widget de chat en direct).

Étape 2 : remplissez le formulaire « Canal site Web »

• Nom du site web : le nom que les clients voient en haut du widget — par exemple le nom de votre boutique ou de votre marque.
• Domaine du site Web : le domaine sur lequel le widget fonctionnera, comme example.com.
• Couleur du Widget : choisissez la couleur de votre marque pour que le widget s'intègre à votre site.
• Titre de Bienvenue et Slogan d'accueil : les textes que les clients voient sur le premier écran du widget.
• Activer l'accueil du canal (facultatif) : un message envoyé automatiquement au début de chaque conversation.

Cliquez ensuite sur « Créer une boîte de réception ».

Étape 3 : ajoutez des agents à la boîte de réception

Choisissez ensuite, dans « Sélectionner les agents de la boîte de réception », les personnes qui répondront aux conversations de ce site, puis cliquez sur « Ajouter des agents ». Seuls les agents ajoutés ici voient les messages de cette boîte : si vous voulez répondre vous aussi, ajoutez-vous.

Étape 4 : copiez l'extrait de code

L'écran « Votre boîte de réception est prête ! » affiche l'extrait de code d'installation. Cliquez sur « Copier ».

L'extrait ressemble à celui-ci, à ceci près que la valeur de websiteToken est propre à votre boîte de réception : copiez donc toujours le code depuis votre propre panneau.

<script>
  (function(d,t) {
    var BASE_URL="https://hodhod.chat";
    var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=BASE_URL+"/packs/js/sdk.js";
    g.async = true;
    s.parentNode.insertBefore(g,s);
    g.onload=function(){
      window.chatwootSDK.run({
        websiteToken: 'YOUR_WEBSITE_TOKEN',
        baseUrl: BASE_URL
      })
    }
  })(document,"script");
</script>

Besoin du code plus tard ? Ouvrez la boîte de réception, repérez l'aperçu du widget dans l'onglet « Paramètres » et basculez-le sur « Script ».

Étape 5 : collez le code dans votre site

Collez le code juste avant la balise de fermeture </body> du modèle principal de votre site, pour qu'il se charge sur toutes les pages :

• Site en HTML classique : dans chaque page, ou dans votre pied de page commun si vous en avez un.
• Modèles PHP : en général footer.php ou votre fichier de mise en page principal.
• Applications monopages (React, Vue, etc.) : une seule fois dans index.html, pas dans les composants.
• WordPress : suivez le guide WordPress dédié.
• Shopify, Wix, Squarespace, Webflow ou Google Tag Manager : suivez le guide des créateurs de site.

L'extrait se charge de façon asynchrone : il ne bloque pas l'affichage de votre page.

Étape 6 : testez

Ouvrez votre site (idéalement dans une fenêtre de navigation privée). Le bouton de chat doit apparaître dans le coin inférieur de la page. Envoyez un message de test et vérifiez qu'il arrive bien dans la section « Conversations » du panneau. Et voilà : votre widget est en ligne.

Les réglages conseillés après l'installation

Alignez la langue et le thème du widget sur votre site

Par défaut, le widget utilise la langue de votre compte et suit le réglage clair/sombre du système du visiteur. Pour coller exactement à votre site, ajoutez ceci avant l'extrait principal :

<script>
  window.chatwootSettings = {
    locale: 'en',
    darkMode: 'auto',
  };
</script>

• locale est la langue du widget — par exemple fr sur vos pages en français et en sur vos pages en anglais.
• darkMode accepte light, dark ou auto.
• Si votre site a son propre sélecteur de thème ou de langue, appelez window.$chatwoot.setColorScheme('dark') ou window.$chatwoot.setLocale('fr') au moment du changement, pour que le widget suive immédiatement.

Affichez la file d'attente et le temps d'attente estimé

Dans la boîte de réception, onglet « Paramètres », section « Fonctionnalités du widget », activez « Show estimated wait time » et « Show live queue position » ; ces deux options s'affichent en anglais dans le panneau en français. Les clients en attente voient alors combien de personnes les précèdent et leur temps d'attente approximatif. L'estimation n'apparaît que lorsque la boîte dispose d'assez de données récentes pour être significative.

D'autres réglages à regarder

• Onglet « Heures de bureau » : définissez les horaires de votre équipe pour que les clients sachent quand attendre une réponse en dehors de ces horaires.
• Onglet « Formulaire avant chat » : demandez un nom, un e-mail ou un numéro de téléphone avant le début du chat, si vous en avez besoin (quoi demander ?).
• Onglet « CSAT » : activez l'enquête de satisfaction après le chat ; vous pouvez aussi ajouter des questions de suivi.
• Onglet « Configuration » → « Domaines autorisés » : assurez-vous que le widget ne fonctionne que sur vos propres domaines.
• « Activer la boîte de collecte des courriels » dans l'onglet « Paramètres » : les clients qui quittent la page reçoivent quand même la réponse par e-mail.

Si le widget ne s'affiche pas

1. Videz le cache. Une extension de cache ou un CDN sert peut-être une ancienne version de la page.
2. Vérifiez l'emplacement du code. Il doit se trouver dans un modèle chargé sur toutes les pages.
3. Vérifiez les « Domaines autorisés ». Si vous avez défini une liste, le domaine de votre site (et ses sous-domaines, si besoin) doit y figurer.
4. Regardez la console du navigateur. Appuyez sur F12, ouvrez la console et cherchez des erreurs. Si vous utilisez un bloqueur de publicités, essayez une fois sans.

Toujours bloqué ? Écrivez-nous depuis le widget en bas de cette page.

Questions fréquentes