Passer au contenu principal
portable

Intégrer Whatsapp Click to Chat dans WordPress

Par 27 juillet 2020#!31Fri, 07 Août 2020 17:24:57 +0200+02:005731#31 Fri, 07 Août 2020 17:24:57 +0200+02:00-5Europe/Rome3131Europe/Rome2031 07pm31pm-31 Fri, 07 Août 2020 17 :24:57 +0200+02:005Europe/Rome3131Europe/Rome2020312020ven, 07 Août 2020 17:24:57 +0200245248pmvendredi=7133# !31Fri, 07 Août 2020 17:24:57 +0200+02:00Europe/Rome8#août 7th, 2020#!31Fri, 07 Août 2020 17:24:57 +0200+02:005731#!31 Fri, 07 Août 2020 17:24:57 +0200+02:00-5Europe/Rome3131Europe/Rome202031#!31 Fri, 07 Août 2020 17:24:57 +0200+02:00Europe/Rome8#Sans commentaires

1. Trouver une icône Whatsapp

Tout d'abord, nous avons besoin d'une icône sur laquelle l'utilisateur pourra cliquer. Il existe de nombreux sites d'images libres de droits. Téléchargez une icône qui vous plaît, publiez-la dans la section Médias et ajoutez l'URL sur le côté pour l'instant.

2. Définir les paramètres

Il y a 2 paramètres que vous devez décider :

  1. Le numéro de téléphone auquel vous souhaitez envoyer le message WhatsApp
  2. Le message qui vous sera envoyé

3. Rassembler le tout

Voici votre bouton :

< Un href= "https://api.whatsapp.com/send?phone=00155555555&text=Je suis intéressé par votre service" cible = "_blanc" classe = "Whatsapp" >
< img source= "https://site.com/wp-content/uploads/2018/07/whatsapp.png" alt= "Whatsapp" >
< / pour >

Copiez ce qui précède, mais assurez-vous de modifier le numéro de téléphone et le message.

4. Collez le code

Pour les besoins de ce didacticiel, nous allons placer l'icône en bas à gauche de l'écran et lui donner une position fixe afin que vous ne puissiez pas la manquer.

Donc pour faire cela, je vais coller le code ci-dessus dans mon footer.phpdéposer juste avant le corpsbalise de fermeture .

Une fois mon fichier enregistré et mon navigateur actualisé, je pourrai voir l'icône en bas de la page. Nous allons maintenant lui donner un style.

5. Dessinez le bouton Whatsapp

Il vous suffit d'écrire quelques lignes CSSet collez-le dans le vôtre style.cssdéposer.

.Whatsapp {
position : fixe ;
gauche : 5px ;
bas : 65 px ;
}

Comme vous pouvez le voir, j'ai positionné mon icône à 5 pixels de la gauche de l'écran et à 65 pixels du bas. Cela bloquait du texte dans mon pied de page lorsque je faisais défiler la page vers le bas, mais vous pouvez ajuster cela comme vous le souhaitez.

6. Le moment de vérité

Il ne vous reste plus qu'à actualiser la page, à vous assurer que vous aimez l'endroit où l'icône est placée, à cliquer dessus et à vous assurer que vous êtes transféré vers WhatsApp pour envoyer votre message.

Bien que ce tutoriel devrait être incroyablement facile à réaliser sur votre site, si vous avez toujours besoin d'un plugin, voici un plugin qui vous aidera à implémenter un bouton de clic pour appeler WhatsApp.

Cliquez sur Chat pour discuter par WhatsApp

Cliquez sur Chat pour le chat WhatsApp

Ce plugin propose 10 styles de design différents et est très facile à utiliser. Voici quelques autres fonctionnalités :

  • Choisissez votre icône/image
  • animations
  • Style sur une page/publication spécifique
  • Définissez votre message
  • Prise en charge des événements Google Analytics et Tag Manager
  • Prise en charge des événements Facebook

Laisser un commentaire