Whatsapp Prestashop

Prestashop avec Whatsapp, le top pour la relation client (ép. 95)

Comme vous le savez certainement Whatsapp s’est démocratisé un maximum ces dernières années et est devenu l’application de référence pour envoyer des messages, surpassant de très loin le fameux SMS classique. Je vous explique comment saisir cette opportunité !

Les visiteurs de votre shop sont toujours hésitants

Certainement vous aussi quand vous faites un achat en ligne, à un moment donné vous vous posez une question qui vous freine dans votre processus d’achat… du genre : « Est-ce que c’est le bon produit qu’il me faut ? Est-ce que je vais être livré dans les temps ? Est-ce que ce site est fiable ? ». Ce qui est frustrant c’est de ne pas pouvoir obtenir une réponse instantanée… A l’époque j’avais déjà expliqué une autre manière de créer de l’interaction avec vos clients grâce au système de chat pour Prestashop.

Whatsapp est puissant & gratuit

Le 1er constat à faire concernant Whatsapp… c’est que presque tout le monde l’a installé sur son smartphone et fait partie des applications « indispensables ». Le 2ème point intéressant c’est que l’application est gratuite, on bénéficie donc de tous les avantages de la technologie pour 0€/CHF (oui c’est fou). Faire le choix d’établir un lien entre Prestashop & Whatsapp n’est donc pas une question de budget, mais c’est plutôt une volonté ou non de votre part de communiquer avec vos clients.

Etre disponible = générer plus de ventes

Si vous mettez en place un système de ce genre permettant à vos clients de vous envoyer des messages sur Whatsapp, oui peut-être que vous serez moins tranquille dans votre coin (aie)… Mais il faut surtout comprendre que l’internaute qui peut obtenir une réponse « rapidement » au moment où il a sa carte de crédit en main, peut vraiment faciliter la conversion sur votre boutique Prestashop. Parfois, il manque à votre visiteur quelques points clés pour qu’il se sente suffisamment en confiance pour finaliser & confirmer son achat… cela peut se jouer en quelques minutes, il est donc important d’être réactif.

Pas le temps de faire de la causette…

Vous n’avez pas envie de passer votre temps à écrire des messages ? Cela vous agace ? Une alternative intéressante reste de répondre à vos clients par message vocal, cela présente l’avantage de donner beaucoup d’information sans devoir l’écrire et vous gagnerez un temps précieux. Cela ne perturbera pas non plus le visiteur, car vous ne lui faites pas un appel commercial… vous déposez seulement un message qu’il peut écouter à sa convenance (cette manière de faire peut mener bien plus rapidement à la conversion au lieu d’écrire des textes interminables).

Votre profil doit être rassurant sur Whatsapp

Si vous utilisez votre profil privé sur Whatsapp, faites attention à votre image de profil ainsi qu’à votre statut (évitez les « TROP GENIAL CE WEEK-END » montrant une photo de vous bière à la main). Idéalement si vous pouvez, je conseille de prendre un 2ème numéro… éventuellement avec une carte prépayée et vous faites juste d’utiliser la connexion Wifi pour que votre Whatsapp fonctionne (sans forcément contracter un abonnement). Les gens sont toujours sensibles aux apparences (j’en sais quelque chose)… il faut donc être assez neutre pour que vos visiteurs ne puissent pas avoir de jugement ou des a priori sur vous.

Pour ce tutoriel Prestashop vous avez à disposition :

  • 1 x fichier pour le bouton Whatsapp (footer.tpl)
  • 1 x fichier de mise en forme (custom.css)

Télécharger

Résumé de la vidéo : Avec Whatsapp vous pouvez mieux convertir

  • Pour commencer on va simplement suivre les recommandations du site Callbell qui nous explique comment intégrer manuellement Whatsapp.
  • Ensuite, c’est assez facile, on va simplement copier du code dans le footer de la boutique Prestashop et ajouter des règles CSS pour l’apparence du bouton.
  • A voir si vous voulez faire afficher ce bouton en permanence partout, ou si comme moi vous voulez l’afficher seulement aux emplacements plus stratégiques (accueil / fiche produit / panier / page de contact).
  • Sur mobile je montre aussi le rendu, le bouton est plus discret pour ne pas le perturber l’expérience utilisateur lors de la navigation.

BOUM !

1 seul mail par semaine - pas de publicité

36 commentaires sur “Prestashop avec Whatsapp, le top pour la relation client (ép. 95)”

  1. Excellent article Germain, et je ne peux qu’abonder dans ton sens ! Il y a à peine deux semaines, j’ai eu des questions concernant des sièges enfants (marque Cybex) pour ma voiture. Je suis allé sur le site du fabricant et j’ai vu qu’on pouvait les contacter via WhatsApp, chose que j’ai faite (c’était la première fois et je t’avoue que je me suis demandé comment ça allait « marcher »…). J’ai posé ma question et, sous même pas 12h, le service client m’a répondu et de manière super précise! Chose très appréciable, c’est que « l’opérateur » m’a mis des liens vers des produits que je retrouve super facilement. Donc, franchement, effectivement, je pense que c’est un canal de communication qu’il faut impérativement offrir aux clients. Par contre, est-ce qu’il pourrait y avoir un effet pervers, p.ex. que les clients s’attendent à une réponse sous 2 minutes comme ils ont tendance à le faire dans le privé?

    Répondre

    1. Hello Massimo,

      C’est très intéressant, ton expérience confirme ce que je pouvais penser… Moi-même il m’arrive parfois de solliciter des systèmes de CHAT online pour différent services et c’est vrai qu’on aime avoir notre réponse tout de suite, c’est très valorisant pour l’expérience client.

      En ce qui concerne le délai, une suggestion est par exemple de mettre une mention « popup » avant d’ouvrir le message Whatsapp indiquant à l’utilisateur que l’on essaie de faire au plus vite, mais que la réponse n’est pas garantie instantanée (afin de se décharger en partie).

      J’ai eu aussi des retours d’e-commerçants qui ont suggéré d’afficher le chat Whatsapp, seulement sur certaines tranches horaires afin de ne pas devenir 100% esclave du système.

      Merci & à bientôt !

      Répondre

  2. Bonjour Germain, utilisant un théme spécifique j’ai bien suivi le tuto à la lettre, mais l’icon whatsapp reste tout petit et en bas a gauche, j’ai vidé le cache de chrome et coché l’option dans F12 …. mais cela ne change rien 🙁
    J’ai copié le texte dans le « footer.tpl » du thème principal et l’autre bout de code dans « Custom.css » du théme enfant concerné, est ce juste ?

    Répondre

    1. Hello,

      Peut-être qu’il faudrait ouvrir les 2 fichiers (à télécharger) avec « Notepad++ » pour vérifier s’il n’y a pas un problème d’encodage dû au copier-coller.

      A bientôt !

      Répondre

      1. Salut Germain,
        Après avoir tout vérifié 2 fois et ouvert les fichier avec notepad++.
        toujours le même résultat!!! dommage pour moi.
        Impossible d’avoir le même rendu.
        Si tu as une autre idéé je suis sur presta 1.7.5.1

        Répondre

  4. Whattsap propose une version Business, gratuite. Avec un applicaiton différente qui permet de l’attacher à un numéro fixe. Et on peut y mettre des réponses automatiques sur une plage horaire…

    Répondre

    1. Hello,

      Concept intéressant je pense, surtout avec la notion de réponses automatiques ça fait très professionnel (pour l’instant pas eu l’occasion de tester).

      A bientôt !

      Répondre

  5. Très bon tutoriel.
    Whatsapp est effectivement très utilisé, même si je ne l’utilise pas vraiment moi-même, il faut croire que je ne suis pas représentatif !! Merci pour cette idée en tout cas, d’autant que cela évite d’installer un Nième module qui viendrait surcharger le natif !

    Répondre

    1. Hello Johan,

      C’est encore assez rare les sites e-commerces qui proposent Whatsapp comme interface de communication, mais la nouvelle génération de consommateurs est assez friande de cette application 😉 A suivre, car la technologie avance tellement vite… l’avantage c’est que c’est vite mis en place.

      A bientôt !

      Répondre

  6. Bonjour Germain et super tuto…

    J’avais un problème d’affichage de l’icône, il y avait seulement un rectangle. J’ai remplacé dans le fichier footer.tpl la ligne :

    <i class="fa fa-whatsapp my-float-whatsapp"></i>

    par : 

     
<i class="fab fa-whatsapp my-float-whatsapp"></i>

    Ca fonctionne maintenant, si cela peut servir à quelqu’un…
    Bon week end et à jeudi 😉

    Répondre

  7. Bravo Germain, je t’ai mis des likes un peu partout. On a tous de vieux téléphones que l’on peut dédier à ça (en coupant la sonnerie).
    C’est exact qu’il faut avertir les clients d’un temps de réponse adapté.
    Merci à toi pour ton expertise.

    Répondre

    1. Hello,

      Oui, en plus ça peut être un moyen intelligent de faire du recyclage 😉 après bien sûr il faut aussi avoir du répondant pour que ça prenne tout son sens.

      Merci du retour positif & à bientôt !

      Répondre

  8. Bonsoir Germain.
    Merci pour ce tuto. Pas très chaud au départ, mais convaincu par la video. Pour avoir un numéro dédié, je ne voulais pas d’un téléphone supplémentaire (un appareil de plus, avec sa batterie à gérer, pas top pour la mobilité, etc..), donc pour éviter l’option dual SIM, j’ai adopté l’application ONOFF qui permet d’avoir des numéros supplémentaires et dédiés sur une même carte SIM, pour 3 Euros/mois. Après la période d’essai de 3 jours, Whatsapp version Business est fonctionnel (merci à Ludo pour le tuyau, sans çà je ne m’y serais pas lancé), et donc implémenté sans soucis sur le site depuis ce soir, avec quelques modifs graphiques mineures… Reste à voir à l’usage maintenant.
    En tous cas merci pour ce tuto très clair et facile à mettre en oeuvre.

    Répondre

    1. Hello,

      Personnellement je l’ai jamais mis chez des clients, parce qu’il faut aussi une certaine maturité / disponibilité de la part de l’e-commerçant. Mais vu comme évolue le web, je pense que ça peut être un deal intéressant pour rassurer les internautes qui veulent acheter.

      A bientôt !

      Répondre

  9. Bonjour Germain,

    Comme toujours, un grand Merci… 🙂

    Juste un petit problème avec votre code en W3C…
    « Error: Bad value https://api.whatsapp.com/send?phone=33781983022&text=Bonjour, j’ai une question… for attribute href on element a: Illegal character in query: space is not allowed. »

    J’ai donc minimiser le texte au maximum – avec « Question… » (sans espace), comme cela plus d’erreur dans le W3C.

    Aussi, pour ce que ça intéresse, j’ai adapté le code pour Skype…

    <a href="VOTRE-ID?chat" title="Poser une question avec Skype" rel="nofollow ugc">
<i>Skype</i>
</a>

    Et aussi dupliqué le CSS en changeant le nom « whatsapp » par « skype », et changé la place du logo…

    .float-skype{
    position:fixed;
    width:62px;
    height:62px;
    bottom:85px;
    right:20px;
    background-color:#31ACE3;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    font-size:45px;
    z-index:100;
    padding-top:8px;
}
.my-float-skype{
    padding-top:8px;
}
/* all mobiles */
@media(max-width:767px){
    .float-skype{
        width:40px;
        height:40px;
        bottom:60px;
        right:10px;
        font-size:25px;   
    }
    .my-float-skype{
        margin-top:8px;
    }
}

    Voili, voilou, et bonne fin de semaine.

    Eric

    Répondre

  11. Merci Germain…

    Voici donc le code Skype en entier, pour ceux qui en aurait besoin – dans l’espoir qu’il passe cette fois avec les balise PHP 😉

     {if $page.page_name=='index' || $page.page_name=='product' || $page.page_name=='contact' || $page.page_name=='cart'}
    
        <a href="VOTRE-ID?chat" title="Poser une question avec Skype" rel="nofollow ugc">
        <i></i>
    </a>
{/if}

    Et ajoutez dans le CSS les lignes qui sont dans mon message du 28 février 2020 à 9 h 24 min…

    Eric

    Répondre

  13. salut, je galere avec tes tutos qui sont vraiment bien. J’ai la version 1.7.6.4 et je ne sais pas si c’est les adresses des pages ou autre chose qui change mais c’est pas tout a fait pareil et bcp de tes bout de code ne marche plus sur cette version.
    Peux tu m’aider?

    Répondre

    1. Hello,

      Les versions évoluent vite et cela dépend aussi du thème Prestashop utilisé. Je conseille de comparer le fichier du tutoriel et le tient avec un outil comme WinMerge pour bien vérifier les différences.

      A bientôt !

      Répondre

  14. Bonjour,

    J’ai utilisé le procédé indiqué mais je n’ai toujours pas le whatsapp disponible sur ma page.
    Est ce parce que je n’utilise pas le template initial de prestashop ?

    Répondre

  15. Bonjour Germain

    Un grand merci pour tous tes tutos. Je suis en train de préparer la migration de mon vieux presta 1.4.6.2 vers la version 1.7.6.8 et je voulais installer un module smartsupp pour nos clients.

    Je vais plutot tenter d’intégrer whatsapp pour éviter d’avoir plusieurs interface de communication et surtout éviter de trop charger en modules mon nouveau presta.

    Je vais étudier les lignes de codes pour whatsapp business

    Répondre

  16. Bon je reviens pour encore te dire merci.

    Grace à ce tuto, j’ai pu integrer smartsupp directement sans installer leur module.
    Il donne des lignes de codes pour intégration direct dans le site mais n’indique pas vraiment le chemin.
    en suivant ton tuto et on utilisant leur ligne de code, j’ai pu faire exactement la même installation ( reduction taille icone sur mobile comprise )

    Un GRAND merci à toi.

    Répondre

  17. Bonjour,

    Intéressant comme idée, par contre sur la version prestaShop 1.6 cela ne fonctionne pas de mon coté avec un thème spécifique responsive

    Merci

    Répondre

  19. bonsoir tout le mode je viens de tomber sur ce tuto super bien fait, mais helas pour moi je n’arrive pas a faire apparaitre l’icone whatzaap en grand il reste désespérement petit et en bas a gauche.
    pour infos j’utilise presftashop 1.7 et la template diamont, je pense
    j’ai fait cette manip :
    dans themes- at_diamont- templates- partials- footer.tpl : j’ai insérer le code « footer » correspondant.
    dans thémes- classic – assets – css – custom.css : j’ai incserer le code « custom »
    par contre je pensait qu’il fallait inserer ce code plutot dans la template diamont (que j’utilise) mais je ne retrouve pas dutout les mémes dossiers que le tuto, donc je n’ais pas osé faire..
    peut etre la est le soucis ??
    si qulqu’un pourrais m’aider,
    note j’ai vider le cash, j’ai essayé en mode privé, jai aussi essayé sur le tel, et toujours l’icone bloqué en bas a gauche presque invisible.
    cordialement et merci par avance pour votre aide

    Répondre

  20. bonsoir j’ai réussit a trouver la solution, en fait il fallait créer un fichier custom.css, dans le théme diamont qui n’en avait pas de prévus dans le dossier « css »et mettre le code dedans, et la miracle, ca fonctionne sans méme faire f12…
    voila si cela peut aider
    bonne soirée

    Répondre

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *