Accueil
Blogger
HTML

Intégrer une chatbox WhatsApp dans Blogger et Wordpress sans plugin

Dans ce tutoriel, nous allons voir comment installer une Chatbox WhatsApp dans votre site web en utilisant de simple code HTML et CSS

Ajouter un plugin de chat Whatsapp dans Blogger et Wordpress

Vous souhaitez communiquer avec vos lecteurs ou recueillir les commandes de vos clients via WhatsApp et bien vous êtes au bon endroit !

Dans ce tutoriel, nous allons voir comment installer la fonctionnalité « Cliquer pour discuter » dans votre site web en utilisant de simple code HTML et CSS.

 

La mise en place est très simple et convient à tous les sites web. Il suffit d'insérer le code HTML dans votre fichier HTML, ensuite les balises CSS dans le dossier styles qui contient le code utilisé pour la mise en forme du contenu.

    Voici à présent les codes que vous devez utiliser. On verra par la suite plus en détail la mise en place dans WordPress et Blogger.

    Code CSS

    
<style type='text/css'>
/* Chatbox Whatsapp */
:root {
--warna-background: #4dc247; 


--warna-bg-chat: #f0f5fb;
--warna-icon: #fff; 


--warna-text: #505050;
--warna-text-alt: #989b9f;
--lebar-chatbox: 320px;
}

svg{width: 22px;height: 22px;vertical-align: middle;fill: var(--warna-icon)}
.chatMenu, .chatButton .svg-2{display: none}

.chatButton{position: fixed;background-color: var(--warna-background);bottom: 20px;left: 20px;border-radius: 50px;z-index: 20;overflow: hidden;display: flex;align-items: center;justify-content: center;width: 50px;height: 50px;-webkit-transition: all .2s ease-out;transition: all .2s ease-out}
.chatButton svg{margin: auto;fill: var(--warna-icon)}
  
.chatBox{position: fixed;bottom: 70px;left: 20px;width: var(--lebar-chatbox);-webkit-transition: all .2s ease-out;transition: all .2s ease-out;z-index: 21;opacity: 0;visibility: hidden;line-height: normal}
.chatContent{border-radius: 15px;background-color: #fff;box-shadow: 0 5px 15px 0 rgba(0,0,0,.05);overflow: hidden}
.chatHeader{position: relative;display: flex;align-items: center;padding: 15px 20px;background-color: var(--warna-background);overflow: hidden}
.chatHeader svg{width: 32px;height: 32px;flex-shrink: 0;fill: var(--warna-icon)}
.chatHeader .chatTitle{padding-left: 15px;font-size: 14px;color: var(--warna-icon)}
.chatHeader .chatTitle span{font-size: 11.5px;display: block;line-height: 1.58em}
  
.chatText{display: flex;flex-wrap: wrap;margin: 25px 20px;font-size: 12px;color: var(--warna-text)}
.chatText span{display: inline-block;margin-right: auto;padding: 10px 10px 10px 20px;background-color: var(--warna-bg-chat);border-radius: 3px 15px 15px}
.chatText span:after{content: 'à la minute';margin-left: 15px;font-size: 9px;color: var(--warna-text-alt)}
.chatText .typing{margin: 15px 0 0 auto;padding: 10px 20px 10px 10px;border-radius: 15px 3px 15px 15px}
.chatText .typing: after{display: none}
  
.chatStart{display: flex;align-items: center;margin-top: 15px;padding: 18px 20px;border-radius: 10px;background-color: #fff;overflow: hidden;font-size: 12px;color: var(--warna-text)}
.chatMenu:checked + .chatButton{-webkit-transform: rotate(360deg);transform: rotate(360deg)}
.chatMenu:checked + .chatButton .svg-1{display: none}
.chatMenu:checked + .chatButton .svg-2{display: block}
.chatMenu:checked ~ .chatBox{bottom: 90px;opacity: 1;visibility: visible}
</style>

    Code HTML

    <input class='chatMenu hidden' id='offchatMenu' type='checkbox' />
<label class='chatButton' for='offchatMenu'>
  <svg class='svg-1' viewBox='0 0 32 32'><g><path d='M16,2A13,13,0,0,0,8,25.23V29a1,1,0,0,0,.51.87A1,1,0,0,0,9,30a1,1,0,0,0,.51-.14l3.65-2.19A12.64,12.64,0,0,0,16,28,13,13,0,0,0,16,2Zm0,24a11.13,11.13,0,0,1-2.76-.36,1,1,0,0,0-.76.11L10,27.23v-2.5a1,1,0,0,0-.42-.81A11,11,0,1,1,16,26Z'></path><path d='M19.86,15.18a1.9,1.9,0,0,0-2.64,0l-.09.09-1.4-1.4.09-.09a1.86,1.86,0,0,0,0-2.64L14.23,9.55a1.9,1.9,0,0,0-2.64,0l-.8.79a3.56,3.56,0,0,0-.5,3.76,10.64,10.64,0,0,0,2.62,4A8.7,8.7,0,0,0,18.56,21a2.92,2.92,0,0,0,2.1-.79l.79-.8a1.86,1.86,0,0,0,0-2.64Zm-.62,3.61c-.57.58-2.78,0-4.92-2.11a8.88,8.88,0,0,1-2.13-3.21c-.26-.79-.25-1.44,0-1.71l.7-.7,1.4,1.4-.7.7a1,1,0,0,0,0,1.41l2.82,2.82a1,1,0,0,0,1.41,0l.7-.7,1.4,1.4Z'></path></g></svg>
  <svg class='svg-2' viewBox='0 0 512 512'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'></path></svg>
</label>

<div class='chatBox'>
  <div class='chatContent'>
    <div class='chatHeader'>
      <svg viewbox='0 0 32 32'><path d='M24,22a1,1,0,0,1-.64-.23L18.84,18H17A8,8,0,0,1,17,2h6a8,8,0,0,1,2,15.74V21a1,1,0,0,1-.58.91A1,1,0,0,1,24,22ZM17,4a6,6,0,0,0,0,12h2.2a1,1,0,0,1,.64.23L23,18.86V16.92a1,1,0,0,1,.86-1A6,6,0,0,0,23,4Z'></path><rect height='2' width='2' x='19' y='9'></rect><rect height='2' width='2' x='14' y='9'></rect><rect height='2' width='2' x='24' y='9'></rect><path d='M8,30a1,1,0,0,1-.42-.09A1,1,0,0,1,7,29V25.74a8,8,0,0,1-1.28-15,1,1,0,1,1,.82,1.82,6,6,0,0,0,1.6,11.4,1,1,0,0,1,.86,1v1.94l3.16-2.63A1,1,0,0,1,12.8,24H15a5.94,5.94,0,0,0,4.29-1.82,1,1,0,0,1,1.44,1.4A8,8,0,0,1,15,26H13.16L8.64,29.77A1,1,0,0,1,8,30Z'></path></svg>
      <div class='chatTitle'>Contacter notre équipe <span>Un administrateur vous répondra dans les plus bref délais</span></div>
    </div>
    <div class='chatText'>
      <span>En quoi pouvons-nous vous aider ?</span>
      <span class='typing'>...</span>
    </div>
  </div>
  
  <a class='chatStart' href='https://api.whatsapp.com/send?phone=33600000000&text=Bonjour%2C%20je%20souhaite%20vous%20contacter...' rel='nofollow noreferrer' target='_blank'>
    <span>Démarrer la discussion...</span>        
  </a>
</div>

    Installation de la boîte de discussion WhatsApp dans le CMS WordPress sans plugin

    Pour faciliter l'intégration des codes dans les fichiers du thème WordPress, on utilisera un plugin qui permet d'incorporer les codes HTML et CSS sans avoir à toucher aux fichiers sensibles de votre thème que vous trouverez dans "Apparence > Éditeur de thème". Cela dit, si vous vous sentez à l'aise, vous pouvez bien sûr les insérer directement dans les fichiers de votre thème sans plugin.

    Le plugin qu'on va utiliser dans ce tutoriel s'appelle "Insert Headers and Footers", mais vous êtes libre de choisir n'importe quel plugin qui permet d'insérer les codes HTML et CSS dans les fichiers du thème WordPress.

    Ajouter les propriétés CSS dans Wordpress

    1. Commencez par installer et activer le plugin "Insert Headers and Footers"
    2. Accédez ensuite au plugin dans le menu "Réglage" > "Insert Headers and Footers"
    3. Insérez le code CSS ci-dessus dans la première boite "Scripts en en-tête ou Scripts in Header"

    Insérer le code HTML

    Ajoutez le code HTML correspondant dans la boite "Scripts in Body" et cliquez sur "Sauvegarder".

    Gadget Chatbox WhatsApp dans Blogger

    Ajouter les propriétés CSS dans le code HTML du thème Blogger

    1. Cliquez sur "Thème"> "Modifier le code HTML"
    2. Une boite contenant le code HTML de votre thème s'affichera
    3. Cliquez n'importe où à l'intérieur du code HTML
    4. Appuyez ensuite sur Ctrl et F en même temps ou Cmd et F pour Mac, une petite barre de recherche doit apparaître en haut à gauche dans la nouvelle interface de Blogger.
    5. Dans la barre de recherche, cherchez la balise </head>
    6. Insérez le code CSS juste au-dessus de la balise </head>

    Insérer le code HTML

    1. Cherchez la balise </body> dans le code HTML de votre thème
    2. Ajoutez le code HTML au-dessus de la balise </body>
    3. Cliquez sur "Sauvegarder"

    Personnaliser le code HTML et activer la fonctionnalité WhatsApp « Cliquer pour discuter »

    Ajouter votre numéro de téléphone

    Insérer votre numéro de téléphone au format international complet dans le code HTML à l'endroit surligné.

    Remarque : N'écrivez aucun zéro, point ou tiret lorsque vous ajoutez le numéro de téléphone au format international complet.

    Repérez ce morceau de code dans le code HTML :

    
<a class='chatStart' href='https://api.whatsapp.com/send?phone=33600000000&text=Bonjour%2C%20je%20souhaite%20vous%20contacter...' rel='nofollow noreferrer' target='_blank'>

    N’employez pas ce format :

    
href='https://api.whatsapp.com/send?phone=+001-(XXX)XXXXXXX&text=Bonjour%2C%20je%20souhaite%20vous%20contacter...'

    Ajouter un message prédéfini

    Le message prédéfini apparaîtra automatiquement dans le champ de texte d’une discussion. Ajouter votre message directement dans le code précédent, à savoir :

    
href='https://api.whatsapp.com/send?phone=+001-(XXX)XXXXXXX&text=Bonjour%2C%20je%20souhaite%20vous%20contacter...'

    Cela dit, vous devez convertir au préalable votre message avec un encodeur URL.

    Pour ce faire, utilisez un encodeur URL en ligne de votre choix.

    Par exemple, pour le texte suivant "Bonjour, je souhaite vous contacter..." cela donnera après encodage : Bonjour%2C%20je%20souhaite%20vous%20contacter...

    Personnaliser le texte de la boîte de discussion WhatsApp 

    
      <div class='chatTitle'>Contacter notre équipe <span>Un administrateur vous répondra dans les plus bref délais</span></div>
    </div>
    <div class='chatText'>
      <span>En quoi pouvons-nous vous aider ?</span>
      <span class='typing'>...</span>
    </div>
  </div>
    Voilà ! C’est tout pour ce tutoriel consacré à la mise en place d'une chatbox WhatsApp personnalisée dans Wordpress et Blogger. Merci à vous et n'hésitez surtout pas à partager ce tutoriel sur les réseaux sociaux si vous jugez qu'il pourrait être utile pour d'autres personnes.