.jpg "Ajouter un Bouton Commander via WhatsApp sur Blogger (E-commerce Serverless)")
Bonjour à tous, ici Lucas Martin sur Cash Astuce. Vous avez créé votre boutique sur Blogger, mais vous remarquez que de nombreux clients abandonnent leur panier lors du paiement classique ? La solution en 2026 est simple, rapide et ne nécessite aucune base de données : Le commerce conversationnel via WhatsApp.
Dans cet article de notre série Création E-commerce, je vais vous montrer comment intégrer un bouton "Commander via WhatsApp" intelligent sur votre blog. Ce script Vanilla JS va automatiquement récupérer le nom du produit et son prix, puis générer un message pré-rempli directement sur l'application WhatsApp de votre client.
Pourquoi utiliser l'API WhatsApp pour votre E-commerce sur Blogger ?
L'intégration de WhatsApp comme méthode de "Checkout" présente des avantages massifs, particulièrement si vous vendez des services, des produits physiques locaux, ou des formations :
- Taux de conversion explosif : Les clients préfèrent discuter avec un humain avant d'acheter. WhatsApp instaure une confiance immédiate.
- Zéro frais de transaction : Contrairement aux passerelles de paiement classiques, vous ne payez aucun pourcentage sur vos ventes.
- 100% Serverless et SEO-Friendly : Notre script JavaScript est ultra-léger (moins de 1 Ko). Il n'impacte pas vos Core Web Vitals ni la vitesse de chargement de votre thème Blogger.
Tutoriel : Créer le Bouton de Commande WhatsApp (Vanilla JS)
Note : Ce tutoriel respecte les standards du web et fonctionne parfaitement sur mobile (redirection vers l'application) et sur PC (redirection vers WhatsApp Web).
Étape 1 : Le Style du Bouton (CSS)
Pour un design professionnel et reconnaissable, ajoutez ce code CSS dans la section style de votre thème ou directement dans votre article (en vue HTML) :
/* Bouton WhatsApp E-commerce - Cash Astuce */
.ca-whatsapp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #25D366;
color: #ffffff !important;
font-family: inherit;
font-weight: bold;
font-size: 16px;
padding: 12px 24px;
border-radius: 5px;
text-decoration: none;
border: none;
cursor: pointer;
box-shadow: 0 4px 6px rgba(37, 211, 102, 0.3);
transition: background-color 0.3s ease, transform 0.2s ease;
margin: 15px 0;
}
.ca-whatsapp-btn:hover {
background-color: #128C7E;
transform: translateY(-2px);
}
.ca-whatsapp-btn svg {
margin-right: 10px;
width: 20px;
height: 20px;
fill: currentColor;
}
Étape 2 : Le Script Javascript et le Bouton HTML
Insérez ce code à l'endroit exact où vous souhaitez voir apparaître le bouton dans votre article Blogger. Modifiez simplement le numéro de téléphone et les informations du produit.
<!-- Configuration du Produit -->
<div id="product-info" data-name="Template Blogger Premium SEO" data-price="25.00"></div>
<!-- Bouton WhatsApp -->
<button class="ca-whatsapp-btn" onclick="sendWhatsAppOrder()">
<svg viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 0 0-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z" /></svg>
Commander via WhatsApp
</button>
<script>
function sendWhatsAppOrder() {
// 1. Remplacez par votre numéro (format international sans le +)
const vendeurPhone = "213550000000";
// 2. Récupération des données du produit
const productEl = document.getElementById("product-info");
const nomProduit = productEl.getAttribute("data-name");
const prixProduit = productEl.getAttribute("data-price");
// 3. Création du message formaté
const message = `Bonjour Lucas ! 👋\nJe souhaite commander le produit suivant :\n\n📦 *${nomProduit}*\n💰 *Prix : ${prixProduit} €*\n\nQuelles sont les étapes pour le paiement ?`;
// 4. Génération de l'URL API WhatsApp
const whatsappUrl = `https://api.whatsapp.com/send?phone=${vendeurPhone}&text=${encodeURIComponent(message)}`;
// 5. Redirection du client
window.open(whatsappUrl, '_blank');
}
</script>
Conclusion
Félicitations ! En quelques lignes de code, vous venez d'ajouter un système de commande hyper efficace sur votre blog. Cette approche "Serverless" garantit une vitesse de chargement optimale, un critère essentiel pour votre SEO et pour vos revenus AdSense.
🔗 Pour aller plus loin dans le E-commerce sur Blogger
Si vous préférez une approche plus "classique" (ajout au panier avant de payer), je vous invite à découvrir notre triptyque sur la création d'un panier d'achat complet :
Commentaires
Enregistrer un commentaire