Passer directement au contenu principal

Article 7 min read

Comment ajouter une messagerie instantanée sur son site

Envie d'intégrer la messagerie instantanée de WhatsApp, Messenger ou Zendesk à votre site Web WordPress, Shopify, Wix ou bien Squarespace ? Suivez le guide !

Dernière mise à jour 8 mars 2023

Personne tenant dans sa main droite un stylo et une paire de lunettes

Pourquoi ajouter une messagerie instantanée ?

Les outils de messagerie instantanée sont toujours plus prisés par les clients. Entre 2020 et 2021, on observe une hausse fulgurante du nombre de demandes d’assistance adressées aux entreprises via WhatsApp (+190 %), Facebook (+63 %) et les outils de chat en direct (+52 %).

La raison ? Les consommateurs veulent aller au plus simple. Ils utilisent déjà ces applications au quotidien pour échanger avec leurs proches et c’est donc tout naturellement qu’ils souhaitent aussi pouvoir trouver leurs marques fétiches sur ces canaux.

Aujourd’hui, proposer son aide par messagerie instantanée est indispensable pour gagner les faveurs des clients. Dans une étude menée par Facebook, 55 % d’entre eux confient nouer un lien plus fort avec les enseignes accessibles sur ces outils de discussion et ils sont plus de 68 % à affirmer que ce type de service rend l’expérience client plus agréable.

Et si ces chiffres ne suffisaient pas à vous convaincre, soulignons également que Facebook et WhatsApp comptent respectivement 3 milliards et 2 milliards d’utilisateurs actifs dans le monde. Le calcul est vite fait : comme la majorité des consommateurs sont déjà adeptes de ces canaux conversationnels, il est très judicieux d’intégrer ces outils à votre site Web pour aller chercher les clients et les prospects là où ils se trouvent.

À présent, voyons ensemble comment faire !

Comment intégrer la messagerie instantanée WhatsApp à votre site Web

WhatsApp ne propose malheureusement pas de solution clé en main.

Ajouter la messagerie instantanée WhatsApp à un site WordPress

C’est assez simple, il vous suffit d’utiliser le plugin dédié de WordPress.

  1. Allez au menu Extensions de WordPress

  2. Recherchez WhatsApp Chat WP

  3. Cliquez sur Installer

  4. Cliquez sur Activation

  5. Rendez-vous dans les options WhatsApp Chat dans le tableau de bord

Ajouter la messagerie instantanée WhatsApp à un site Shopify

Vous trouverez de nombreuses extensions dédiées dans le Shopify App Store, comme WhatsApp App.

Ajouter la messagerie instantanée WhatsApp à un site Wix

  1. Cliquez sur Ajouter + en haut à gauche de votre Editor X.

  2. Faites glisser un bouton vers l’emplacement souhaité sur votre page.

  3. (Facultatif) Modifiez le texte du bouton (par exemple, Contact sur WhatsApp).

  4. Cliquez sur l’icône Lien.
  5. Cliquez sur Adresse internet.
  6. Choisissez Créer un lien avec un premier message automatisé ou Créer un lien sans message
  7. Cliquez sur Terminé

Ajouter la messagerie instantanée WhatsApp à un site Squarespace

La solution la plus simple est d’utiliser un plugin dédié, comme celui proposé par Elfsight.

Comment intégrer la messagerie instantanée Messenger à votre site Web

Avec Messenger, quelques clics suffisent ! Vous devrez d’abord configurer le plugin comme suit :

  1. Accédez aux paramètres de votre Page et cliquez sur Messagerie.
  2. Sous Ajouter Messenger à votre site Web, cliquez sur Démarrer.
  3. Vous pouvez alors effectuer les actions suivantes :
    • Effectuer une installation manuelle en cliquant sur Configuration. À cet endroit, vous pouvez sélectionner votre langue, ajouter vos domaines de site Web et copier le code à coller sur votre site Web.
    • Suivre les instructions de la section Ajouter le plugin de discussion à votre site Web ci-dessous en fonction du concepteur de votre site Web et coller le code sur la ou les pages où vous souhaitez que le plugin de discussion apparaisse.
  4. Sous Démarrer une conversation, vous pouvez créer un message de bienvenue et ajouter des réponses automatiques aux questions courantes.
  5. Les options sous Personnaliser votre plugin de discussion vous permettent de personnaliser les paramètres de couleur, d’alignement et d’extension.

Ensuite, il ne vous reste plus qu’à coller le code directement sur votre site Web

Ajouter le code Messenger sur un site WordPress

  1. Accédez à la page d’accueil de WordPress et accédez à WP Admin.
  2. Accédez au menu Extensions.
  3. Cliquez sur Ajouter des extensions.
  4. Dans le champ de recherche, entrez Facebook Chat Plugin.
  5. Cliquez sur Rechercher des extensions.
  6. Sélectionnez le plugin de discussion Facebook.

  7. Cliquez sur Installer.
  8. Cliquez sur Activer.
  9. Vous devriez désormais voir un onglet intitulé Discussion Client. Accédez à la section Démarrer et cliquez sur Modifier le plugin de discussion.
  10. Personnalisez votre plugin de discussion et terminez la configuration.

Ajouter le code Messenger sur un site Shopify

  1. Accédez à Admin Panel (Panneau d’administration).
  2. Accédez à Sales Channels (Canaux de vente). En dessous de Online Store (Boutique en ligne), cliquez sur Themes (Thèmes) pour ouvrir la page des thèmes.
  3. En dessous de la section Current Theme (Thème actuel), cliquez sur Customize (Personnaliser).
  4. Un aperçu de votre boutique s’affiche. Cliquez sur Theme Actions (Actions liées au thème).
    Dans le menu contextuel, cliquez sur Edit code (Modifier le code).
  5. Plusieurs fichiers avec l’extension .liquid apparaissent. Recherchez le fichier du thème principal, généralement intitulé theme.liquid. Le contenu du fichier du thème principal débute généralement par .
  6. Faites défiler le code dans le volet droit et recherchez la ligne qui commence par .

  7. Sur la ligne située en dessous du code , collez le code issu des paramètres du plugin de discussion Facebook.

  8. Cliquez sur Save (Enregistrer) en haut de la page pour terminer.

Ajouter le code Messenger sur un site Wix

  1. Cliquez sur Settings (Paramètres) dans votre panneau d’administration.
    • Remarque : selon la page où vous vous trouvez, il se peut que vous deviez cliquer sur Site dans la bannière en haut de la page avant d’accéder aux paramètres.

  2. En dessous de la section Advanced (Avancé), cliquez sur Custom Code (Code personnalisé).
  3. En dessous de la section Head (En-tête), cliquez sur Add Code (Ajouter du code).
  4. Collez le code dans la section Paste the code snippet here (Coller l’extrait de code ici), puis indiquez un nom facilement reconnaissable (comme Messenger) en dessous du champ Add Code to Pages (Ajouter du code aux pages).
  5. Sélectionnez All pages (Toutes les pages), puis Load code once (Télécharger le code une fois).
  6. En dessous de Place Code in (Placer le code dans), assurez-vous que Head (En-tête) est bien sélectionné, puis cliquez sur Apply (Appliquer).
  7. Cliquez sur Publish (Publier) en haut de la page.

Ajouter le code Messenger sur un site Squarespace

  1. Cliquez sur Settings (Paramètres) dans votre panneau d’administration.

  2. Cliquez sur Advanced (Avancé).

  3. Cliquez sur Code Injection (Injection de code).

  4. Collez l’extrait de code dans la section Footer (Pied de page).

  5. Cliquez sur Save (Enregistrer).

Comment intégrer la messagerie instantanée Zendesk à votre site Web

En premier lieu, vous devrez activer le Web Widget dans votre compte :

  1. Dans le Centre d’administration, cliquez sur l’icône Canaux dans la barre latérale, puis sélectionnez Messagerie et réseaux sociaux > Messagerie. Un Web Widget élémentaire est activé par défaut et s’affiche dans la liste des canaux.
  2. Cliquez sur Commencer au premier écran d’intégration, puis sur Configurer maintenant au deuxième écran. Si vous ne voyez pas de bouton Commencer, cliquez sur le widget par défaut dans la liste des canaux.
  3. Dans Commencez par les bases, si vous avez plusieurs marques, sélectionnez une marque, puis confirmez ou modifiez le nom du canal.
  4. Cliquez sur Suivant.
  5. Dans Installation sur vos sites, copiez le snippet de code à coller sur votre site Web avant la balise HTML de fermeture. Ajoutez le code à chaque page Web sur laquelle vous voulez que s’affiche le widget.

Ajouter le code Zendesk sur un site WordPress

  1. Dans WordPress, sélectionnez Paramètres dans le volet Zendesk.
  2. Sélectionnez l’un des paramètres d’affichage suivants pour le Web Widget :
    • Do not display the Web Widget anywhere (Ne pas afficher le Web Widget) (valeur par défaut)
    • Display the Web Widget on all posts and pages (Afficher le Web Widget sur toutes les publications et pages)
    • I will decide where the Web Widget displays using a template tag (Me laisser décider où afficher le Web Widget à l’aide d’un marqueur modèle)
  3. Si vous avez choisi d’utiliser un marqueur modèle, vous pouvez placer le Web Widget où vous le souhaitez sur votre site en utilisant le marqueur modèle suivant :
  4. Cliquez sur Enregistrer les paramètres.

Ajouter le code Zendesk sur un site Shopify

  1. Connectez-vous à votre boutique Shopify et ouvrez l’option Edit code (Modifier le code) dans la section Themes (Themes).
  2. Localisez la balise contenue dans theme.liquid et collez votre code juste au-dessus.
  3. Cliquez sur Save (Enregistrer) et redémarrez votre navigateur pour charger le Web Widget.

Ajouter le code Zendesk sur un site Wix

  1. Connectez-vous à Wix.

  2. Cliquez sur Edit Site (Modifier le site).
  3. Cliquez sur Add > More > HTML Code (Ajouter > Plus > Code HTML).
  4. Cliquez sur Enter Code (Saisir le code), puis collez votre code la fenêtre qui s’affiche :
    
    <html>
    <body>
    Insérez le code ici
    </body>
    </html>
    
  5. Cliquez sur Update (Mettre à jour).
  6. Doublez la taille du champ HTML. Vérifiez que la largeur est supérieure à 300 pixels et la hauteur à 400 pixels. Faites glisser le widget dans le pied de page, qui est défini sur fixe/gelé, et vérifiez que l’affichage de toutes les pages est activé dans le widget HTML.

  7. Dans l’éditeur WiX, cliquez sur Publish (Publier) dans la barre supérieure pour que le widget soit actif dans votre site Web.

Ajouter le code Zendesk sur un site Squarespace

  1. Dans le panneau latéral gauche de Squarespace, cliquez sur Settings > Website > Advanced (Paramètres > Site Web > Avancé).
  2. Cliquez sur Code Injection (Ajout de code).
  3. Saisissez le code fourni par Zendesk.

  4. Cliquez sur Save (Enregistrer) pour appliquer les changements et charger le widget.

Voilà, l’intégration d’une messagerie instantanée ne devrait plus avoir de secret pour vous !

Articles associés

Article
2 min read

Les caractéristiques d'une plateforme ITSM informatique

Pourquoi utiliser une plateforme ITSM ? Aujourd’hui, la gestion de l’IT dépasse largement la simple maintenance…

Article
4 min read

Comment déployer un chatbot sur WordPress

Les visiteurs sur site Web sont plus exigeants que jamais. Ils aiment que tout aille vite…

Article
8 min read

Les objectifs fondés sur la science sont la clé d’une entreprise durable

Pour participer à la lutte contre le changement climatique, de nombreuses entreprises définissent des objectifs de réduction des émissions fondés sur la science. En savoir plus sur les mesures prises par ces entreprises et leur impact sur la planète.

Article

Pourquoi le secteur public doit adopter la numérisation

Que nous le voulions ou non, les événements récents nous ont catapultés dans le monde du…