Comment ajouter un chat en direct sur WordPress (sans coder)

Si votre site tourne sous WordPress ou WooCommerce, installer le chat en direct Hodhod est l'affaire de deux minutes. Ce guide présente trois méthodes : celle que nous recommandons passe par l'extension (plugin) gratuite « Chat en direct Hodhod » ; les deux autres consistent à coller le code avec l'extension WPCode ou directement dans votre thème.

Avant de commencer : récupérez le code dans le panneau

Commencez par créer une boîte de réception « Site internet » dans le panneau Hodhod ; la marche à suivre, captures d'écran à l'appui, est détaillée dans notre guide pour ajouter le chat en direct à votre site. Vous aurez besoin du code d'installation, qui s'affiche à la création de la boîte de réception. Vous pouvez le copier 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 ».

Méthode 1 (recommandée) : l'extension « Chat en direct Hodhod »

L'extension officielle de Hodhod ajoute le widget à toutes les pages de votre site, vous laisse choisir son apparence et le charge sans ralentir vos pages.

1. Téléchargez l'extension : hodhod-live-chat-1.0.1.zip.
2. Dans votre tableau de bord WordPress, allez dans Extensions → Ajouter une extension et cliquez sur « Téléverser une extension ».
3. Choisissez le fichier zip téléchargé, cliquez sur « Installer maintenant », puis sur « Activer l’extension ».
4. Allez dans Réglages → Chat en direct Hodhod.
5. Collez le code complet copié depuis le panneau Hodhod dans le champ « Code ou jeton du site », puis cliquez sur « Enregistrer les modifications ».

Et voilà : l'extension récupère le jeton du site dans le code, et le bouton de chat apparaît sur toutes les pages, y compris les fiches produit, le panier et la page de paiement de WooCommerce. Sur la même page, vous pouvez aussi régler :

• Position : en bas à droite ou en bas à gauche.
• Bouton de chat : un bouton rond, ou un bouton avec le texte de votre choix.
• Thème : selon l'appareil du visiteur, toujours clair ou toujours sombre.
• Langue : par défaut, le widget suit la langue de votre site (avec un affichage de droite à gauche pour le persan et l'arabe) ; vous pouvez aussi utiliser la langue du navigateur du visiteur ou choisir une langue précise.
• Vitesse des pages : l'option « Charger le chat après la page » (activée par défaut) charge le widget dès que le visiteur fait défiler la page, touche l'écran ou tape au clavier, ou quelques secondes après le chargement de la page : la vitesse de vos pages n'en pâtit pas.
• Utilisateurs connectés : si vos clients se connectent à un compte (par exemple leur compte WooCommerce), activez « Envoyer le nom et l'e-mail des utilisateurs connectés à Hodhod » et collez dans le champ « Clé secrète » la clé de la section « Validation d'identité », qui se trouve dans l'onglet « Configuration » de la même boîte de réception. Votre équipe voit alors à qui elle parle, et vos clients retrouvent la même conversation d'un appareil à l'autre. La clé reste sur votre serveur : elle n'est jamais envoyée au navigateur.

Méthode 2 : l'extension WPCode

Si vous utilisez déjà WPCode (nom complet : « WPCode – Insert Headers and Footers + Custom Code Snippets ») pour ajouter du code à votre site, vous pouvez y coller le code Hodhod :

1. Dans votre tableau de bord WordPress, allez dans Extensions → Ajouter une extension.
2. Recherchez « WPCode », puis installez et activez « WPCode – Insert Headers and Footers ».
3. Dans le menu latéral, allez dans Code Snippets → Header & Footer.
4. Collez le code Hodhod dans la zone Footer.
5. Cliquez sur « Save Changes ».

Le code se charge désormais sur toutes les pages de votre site, et il reste en place même si vous mettez à jour ou changez de thème.

Méthode 3 : modifier le fichier de votre thème

Si vous préférez ne pas installer d'extension, vous pouvez coller le code directement dans le fichier de pied de page de votre thème :

1. Dans le tableau de bord, allez dans Apparence → Éditeur de fichiers des thèmes.
2. Ouvrez footer.php dans la liste des fichiers.
3. Collez le code Hodhod juste avant </body> et cliquez sur « Mettre à jour le fichier ».

Deux remarques importantes : si vous modifiez votre thème principal (et non un thème enfant), la prochaine mise à jour du thème effacera cette modification — créez donc un thème enfant, ou utilisez la méthode 1. Les thèmes récents basés sur les blocs (comme Twenty Twenty-Four) n'ont pas de fichier footer.php : avec eux, seules les méthodes 1 et 2 fonctionnent.

Après l'installation : testez le chat

Ouvrez votre site dans une fenêtre de navigation privée et faites défiler un peu vers le bas : le bouton de chat apparaît en bas de la page. Envoyez un message de test et vérifiez qu'il arrive bien dans la section « Conversations » du panneau Hodhod.

Résoudre les problèmes courants

Le widget ne s'affiche pas

Le plus souvent, c'est une question de cache. Videz le cache de vos extensions comme WP Rocket, LiteSpeed Cache ou W3 Total Cache, ainsi que celui de votre CDN si vous en utilisez un, puis réessayez. Avec l'extension Hodhod, vérifiez aussi que la case « Afficher le widget de chat sur mon site » est cochée et que le code du site est bien enregistré.

Le widget met du temps à s'afficher

Avec l'extension Hodhod, c'est voulu : le chat attend la première interaction du visiteur, ou quelques secondes, pour laisser votre contenu se charger d'abord. Pour l'afficher dès le chargement de la page, décochez « Charger le chat après la page ». Avec les méthodes 2 et 3, certaines extensions d'optimisation des performances retardent les scripts jusqu'à la première interaction (par exemple avec une option « Delay JavaScript execution ») ; si vous voulez que le widget soit visible tout de suite, excluez sdk.js de la liste des scripts retardés.

Mon site est multilingue

Avec l'extension Hodhod, laissez la langue sur « Comme ce site » : avec des extensions comme WPML ou Polylang, le widget suit la langue de chaque page. Avec les méthodes 2 et 3, ajoutez window.chatwootSettings avant le code principal, en indiquant dans locale la langue de la page — tous les détails sont dans le guide d'installation.

Questions fréquentes