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 :
- Le numéro de téléphone auquel vous souhaitez envoyer le message WhatsApp
- Le message qui vous sera envoyé
3. Rassembler le tout
Voici votre bouton :
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.php
déposer juste avant le corps
balise 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 CSS
et collez-le dans le vôtre style.css
déposer.
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
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