Ajouter un chat en direct sur son site (gratuit)

Pour ajouter un chat en direct sur votre site, vous copiez un petit code fourni par l'outil de chat et vous le collez une seule fois avant la balise </body>, ou dans la zone « code personnalisé » de votre constructeur de site. Comptez dix minutes, sans développeur. Le plus long n'est pas l'installation : c'est de décider qui répond, à quelles heures, et ce que voit le client quand personne n'est là.

À quoi va servir votre chat

Sur un site de vente, la plupart des premiers messages tournent autour des mêmes cinq questions :

• le délai de livraison (« Si je commande aujourd'hui, je reçois quand ? ») ;
• la zone de livraison (« Vous livrez à Thiès ? À Bonabéri ? ») ;
• le paiement à la livraison ou par Mobile Money ;
• le suivi d'une commande déjà passée ;
• les retours et les échanges.

Un chat sur le site capte ces questions au moment où le client hésite, sur la page du produit, au lieu de le laisser partir chercher votre numéro WhatsApp ou celui d'un concurrent. Si vous hésitez encore entre les deux canaux, nous avons comparé le service client sur WhatsApp et le chat sur votre site.

Les trois façons d'ajouter un chat à un site

Tous les outils de chat sérieux proposent au moins la première méthode. Les deux autres sont des variantes selon la façon dont votre site est construit.

Méthode	Pour quel site	Ce que vous faites
Coller un code	Site HTML, WordPress, Shopify, la plupart des CMS	Vous collez le code avant </body>, dans le modèle commun à toutes les pages
Zone de code du constructeur	Wix, Squarespace et autres éditeurs sans accès aux fichiers	Vous collez le même code dans le champ prévu pour le code personnalisé
Paquet pour développeur	Site construit avec React, Next.js, Vue ou Nuxt	Votre développeur installe le paquet npm de l'outil et ajoute un composant

Certains outils ont aussi une extension WordPress ou une application Shopify. Ce n'est pas obligatoire : le code collé fait le même travail, et c'est une extension de moins à mettre à jour.

Étape 1 : choisir un outil de chat gratuit

Beaucoup d'outils ont une offre gratuite. Avant de créer un compte, vérifiez cinq points qui comptent pour une petite équipe :

1. Une vraie offre gratuite, pas un essai de 14 jours, et sans carte bancaire à l'inscription.
2. Plusieurs personnes sur la même boîte de réception, pour que vous et votre vendeuse voyiez les mêmes conversations et qui a répondu.
3. Une réponse possible depuis le téléphone, parce que vous ne serez pas toujours devant un ordinateur.
4. Le paiement le jour où vous passez à une offre payante : en dollars par carte internationale, ou dans une monnaie et un moyen de paiement que vous avez.
5. La langue : le chat doit parler français à vos clients, et anglais si vous vendez aussi au Nigeria ou au Ghana.

Étape 2 : déclarer votre domaine et copier le code

Une fois le compte créé, l'outil vous demande l'adresse de votre site, puis affiche le code d'installation. Deux erreurs reviennent souvent :

• Le domaine ne correspond pas. Beaucoup d'outils n'affichent le chat que sur le domaine déclaré. Écrivez-le exactement comme vos clients le tapent, avec ou sans « www ». Sur Shopify, c'est votre propre domaine, pas l'adresse en .myshopify.com.
• Le code est recopié à la main. Il contient une clé propre à votre compte : un caractère faux et le chat ne s'affiche pas. Copiez-le avec le bouton prévu.

Dans Zean, le code d'installation se trouve dans Paramètres de l'App, puis Développeurs, puis Démarrage. Il ne change jamais, même quand le chat est mis à jour ou que vous changez sa couleur : vous le collez une fois. Le guide d'installation du chat Zean sur un site montre chaque écran. L'offre gratuite donne accès à toutes les fonctions, sans carte, et les offres payantes se règlent en FCFA par Mobile Money ou par carte, depuis un portefeuille prépayé. D'autres monnaies et moyens de paiement arrivent.

Étape 3 : coller le code sur votre site

Le principe est toujours le même : le code doit être chargé sur toutes les pages, juste avant la fermeture de la balise </body>. Voici où le mettre selon votre outil.

Site en HTML

Ouvrez le fichier modèle commun à vos pages (souvent un pied de page inclus partout) et collez le code juste avant </body>. Si chaque page est un fichier séparé, collez-le dans chacune. Envoyez les fichiers sur votre hébergement.

WordPress

Le plus sûr est une extension qui insère du code dans le pied de page de tout le site, comme WPCode, gratuite sur WordPress.org : collez le code dans la zone « Footer » et enregistrez. Vous pouvez aussi le coller dans le fichier footer.php de votre thème, mais une mise à jour du thème peut l'effacer, sauf si vous utilisez un thème enfant.

Shopify

1. Dans l'administration, ouvrez Boutique en ligne, puis Thèmes.
2. Sur votre thème actif, ouvrez le menu « … » et choisissez Modifier le code. Shopify conseille de dupliquer le thème avant de modifier son code, pour garder une copie de secours.
3. Ouvrez theme.liquid, collez le code juste avant </body> et enregistrez.

Pour Zean, ces deux cas sont détaillés dans le guide installer le chat sur WordPress ou Shopify. C'est le même code d'installation, sans extension à ajouter.

Wix

Dans le tableau de bord du site, ouvrez Paramètres, puis Code personnalisé. Cliquez sur « + Ajouter un code personnalisé », collez le code, choisissez « Toutes les pages » et la position « Corps - fin ». Wix précise que le site doit être publié et relié à un domaine pour que le code fonctionne.

Squarespace

Ouvrez le panneau Injection de code et collez le code dans le champ Pied de page, puis enregistrez. D'après l'aide de Squarespace, l'injection de code est réservée à certaines offres : vérifiez la vôtre avant de commencer.

Site en React, Next.js, Vue ou Nuxt

Le code collé fonctionne aussi, mais un paquet npm s'intègre mieux : il suit les changements de page sans recharger et permet d'ouvrir le chat depuis un bouton de votre site. Laissez votre développeur suivre la documentation de l'outil choisi.

Étape 4 : régler le chat avant de l'annoncer

Un chat installé mais mal réglé fait plus de tort qu'aucun chat. Un client qui écrit sans obtenir de réponse risque d'aller voir ailleurs. Avant de prévenir vos clients, réglez ces six points :

1. Les horaires d'ouverture, dans le bon fuseau horaire.
2. Le message d'accueil : une phrase qui dit ce que vous pouvez faire (« Une question sur une commande, une livraison ou un paiement ? Écrivez-nous ici. »).
3. Le message d'absence : quand vous répondrez, et ce que le client peut préparer, par exemple son numéro de commande. Un bon outil l'envoie tout seul en dehors des horaires, comme le montre le réglage des horaires d'ouverture dans Zean.
4. Qui répond : invitez les personnes de l'équipe, et dites-leur qui surveille le chat le matin, le soir et le week-end.
5. Les pages où le chat ne s'affiche pas, par exemple la page de paiement, si le bouton gêne vos clients à ce moment-là.
6. L'apparence : la couleur de votre marque, votre logo, le côté de l'écran où le bouton apparaît.

Étape 5 : tester sur un téléphone, en données mobiles

Vos clients arrivent souvent depuis un téléphone, parfois sur un réseau lent. Testez dans ces conditions, pas seulement sur l'ordinateur du bureau :

1. Coupez le wifi d'un téléphone et ouvrez votre site en données mobiles, dans une fenêtre de navigation privée.
2. Vérifiez que le bouton du chat ne cache pas le bouton « Ajouter au panier » ni le menu.
3. Envoyez un message comme un client, puis une photo prise avec l'appareil.
4. Répondez depuis la boîte de réception, sur un autre appareil, et vérifiez que la réponse arrive.
5. Refaites un essai en dehors de vos horaires pour lire votre message d'absence.

Si le chat ne s'affiche pas

Les causes les plus courantes :

• la page testée n'est pas sur le domaine déclaré (un « www » en trop ou en moins suffit) ;
• le code est incomplet, collé au mauvais endroit ou seulement sur certaines pages ;
• une extension de cache sert encore l'ancienne version de vos pages : videz le cache ;
• un bloqueur de publicité masque le chat : testez dans une fenêtre privée sans extensions ;
• la page fait partie des pages où vous avez choisi de masquer le chat.

Pour Zean, la page le chat ne s'affiche pas liste chaque cause et le message à chercher dans la console du navigateur.

Questions fréquentes

Peut-on ajouter un chat sur son site gratuitement ?

Oui. Plusieurs outils ont une offre gratuite sans limite de durée. Les limites portent en général sur le nombre de personnes qui répondent ou sur certaines fonctions. Lisez ce qui est inclus avant de créer votre compte.

Faut-il savoir coder ?

Non. Il faut savoir copier un texte et le coller au bon endroit. Sur Wix, Squarespace ou WordPress avec une extension de code, cela se fait depuis l'interface, sans ouvrir de fichier.

Un chat ralentit-il le site ?

Un script de chat bien fait se charge après le contenu de la page, donc le client voit vos produits d'abord. Mesurez votre page avec PageSpeed Insights de Google avant et après l'installation : vous verrez la différence réelle.

Que se passe-t-il quand personne n'est là pour répondre ?

Le client peut quand même écrire. Il reçoit votre message d'absence, et sa question attend dans la boîte de réception. Si l'outil demande son adresse e-mail, il peut être prévenu de votre réponse même après avoir quitté le site.

Chat sur le site ou bouton WhatsApp ?

Un bouton WhatsApp envoie le client hors de votre site, vers un numéro souvent tenu par une seule personne. Un chat garde la conversation sur la page du produit et la partage avec l'équipe. Beaucoup de boutiques gardent les deux.

Pour essayer sur votre propre site, vous pouvez commencer gratuitement avec Zean : l'installation prend le temps de copier un code.