Whatsapp Prestashop

Prestashop avec Whatsapp fait bim bam boum (é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.

28 commentaires sur “Prestashop avec Whatsapp fait bim bam boum (é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é?

    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 !

  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 ?

    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 !

      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

  3. 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…

    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 !

  4. 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 !

    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 !

  5. 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 😉

  6. 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.

    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 !

  7. 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.

    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 !

  8. 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

  9. 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

  10. 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?

    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 !

Laisser un commentaire

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