Passer au contenu principal
portable

Intégrer Whatsapp Click to Chat dans WordPress

Par 27 juillet 2020#!31Ven, 07 Août 2020 17:24:57 +0200+02:005731#31Ven, 07 Août 2020 17:24:57 +0200+02:00-5Europe/Rome3131Europe/Romex31 07pm31pm-31Ven, 07 Août 2020 5. 24h : 57 +0200+02:005Europe/Rome3131Europe/Romex312020Ven. 07 août 2020 17:24:57 +0200245248pmvendredi=7133#!31Ven. 07 août 2020 17:24:57 +0200+02:0 0Europe/Rome8#août 7 jeu. 2020#!31ven. 07 Août 2020 17:24:57 +0200+02:005731#/31Vendredi 7 août 2020 17:24:57 +0200+02:00-5Europe/Rome3131Europe/Romex31#!31Vendredi 7 août 2020 17:2 4: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 peut cliquer. Il existe de nombreux sites d'images libres de droits parmi lesquels vous pouvez choisir. Téléchargez une icône que vous aimez, téléchargez-la dans la section média et mettez 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 ce faire, je vais coller le code d'en haut dans le mien footer.phpdéposer juste avant le corpsbalise fermante.

Une fois que j'aurai enregistré mon fichier et actualisé mon navigateur, je pourrai voir l'icône en bas de la page. Maintenant, nous allons continuer et le modéliser.

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 placé mon icône à 5 pixels de la gauche de l'écran et à 65 pixels du bas. La raison pour laquelle j'ai fait cela est qu'il a collé du texte sur mon pied de page lorsque j'ai fait défiler vers le bas de ma page, mais vous pouvez jouer avec cela comme vous le souhaitez.

6. Le moment de vérité

Tout ce que vous devez faire maintenant est d'actualiser la page, assurez-vous que vous aimez l'emplacement de l'icône, cliquez dessus et assurez-vous que vous êtes transféré sur Whatsapp pour envoyer votre message.

Alors que ce tutoriel devrait être incroyablement facile à faire sur votre site, si vous avez encore besoin d'un plugin, voici un plugin qui vous aidera à implémenter un bouton Whatsapp click to call.

Cliquez sur Chat pour discuter par WhatsApp

Cliquez sur Chat pour le chat WhatsApp

Ce plugin a 10 styles de conception différents et est vraiment 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 de Google Analytics et de l'événement Tag Manager
  • Prise en charge des événements Facebook

Laisser un commentaire