Messages interactifs WhatsApp : boutons et listes pour booster l'engagement

Un client qui reçoit "Pour commander tapez 1, pour suivre votre commande tapez 2, pour contacter un agent tapez 3" sur WhatsApp en 2025 aura une perception médiocre de votre service. Les messages interactifs WhatsApp — boutons de réponse rapide et listes de sélection — transforment cette expérience en une interface fluide, intuitive et mobile-first. En Afrique, où une majorité des utilisateurs accèdent à internet uniquement via smartphone, des messages bien conçus avec des boutons clairs font la différence entre un client qui s'engage et un client qui ignore.

Types de messages interactifs disponibles

L'API WhatsApp Cloud propose deux types principaux de messages interactifs :

Messages à boutons (button messages) : jusqu'à 3 boutons de réponse rapide. Idéal pour les questions binaires ou ternaires. Exemples : Confirmer/Annuler, Oui/Non/Peut-être, Livraison/Retrait en magasin/Reporter.

Messages à liste (list messages) : jusqu'à 10 options organisées en sections. Parfait pour les menus, les catalogues de catégories, les choix multiples. Exemples : menu d'un restaurant, liste de services disponibles, sélection d'un créneau de livraison.

Messages de flux (flow messages) : formulaires in-app avancés (voir l'article sur les Meta Flows). Permettent de collecter plusieurs informations en une conversation structurée.

Il existe également les boutons d'appel à l'action (Call to Action) dans les templates : boutons de lien URL ou d'appel téléphonique directement depuis le message.

Envoyer un message avec boutons

async function sendButtonMessage(to, bodyText, buttons, headerText = null, footerText = null) {
    const interactive = {
        type: 'button',
        body: { text: bodyText }
    };
    
    if (headerText) {
        interactive.header = { type: 'text', text: headerText };
    }
    
    if (footerText) {
        interactive.footer = { text: footerText };
    }
    
    interactive.action = {
        buttons: buttons.map((btn, index) => ({
            type: 'reply',
            reply: {
                id: btn.id || `btn_${index}`,
                title: btn.title  // Max 20 caractères
            }
        }))
    };
    
    const payload = {
        messaging_product: 'whatsapp',
        to: to,
        type: 'interactive',
        interactive
    };
    
    const response = await axios.post(API_URL, payload, { headers: HEADERS });
    return response.data;
}

// Exemple : confirmation de commande
await sendButtonMessage(
    '221771234567',
    'Votre panier contient 3 articles pour un total de 18 500 FCFA. Souhaitez-vous confirmer votre commande ?',
    [
        { id: 'confirm_order', title: 'Confirmer' },
        { id: 'modify_order', title: 'Modifier' },
        { id: 'cancel_order', title: 'Annuler' }
    ],
    'Récapitulatif commande #4521',
    'Livraison gratuite dès 15 000 FCFA'
);

Payload JSON envoyé à l'API :

{
  "messaging_product": "whatsapp",
  "to": "221771234567",
  "type": "interactive",
  "interactive": {
    "type": "button",
    "header": { "type": "text", "text": "Récapitulatif commande #4521" },
    "body": { "text": "Votre panier contient 3 articles pour un total de 18 500 FCFA. Souhaitez-vous confirmer votre commande ?" },
    "footer": { "text": "Livraison gratuite dès 15 000 FCFA" },
    "action": {
      "buttons": [
        { "type": "reply", "reply": { "id": "confirm_order", "title": "Confirmer" } },
        { "type": "reply", "reply": { "id": "modify_order", "title": "Modifier" } },
        { "type": "reply", "reply": { "id": "cancel_order", "title": "Annuler" } }
      ]
    }
  }
}

Envoyer un message avec liste de sélection

Les listes sont idéales pour les menus ou toute sélection parmi plusieurs options :

async function sendListMessage(to, bodyText, buttonTitle, sections, headerText = null) {
    const payload = {
        messaging_product: 'whatsapp',
        to: to,
        type: 'interactive',
        interactive: {
            type: 'list',
            header: headerText ? { type: 'text', text: headerText } : undefined,
            body: { text: bodyText },
            action: {
                button: buttonTitle,  // Texte du bouton qui ouvre la liste (max 20 chars)
                sections: sections.map(section => ({
                    title: section.title,
                    rows: section.rows.map(row => ({
                        id: row.id,
                        title: row.title,      // Max 24 caractères
                        description: row.description || undefined  // Max 72 caractères
                    }))
                }))
            }
        }
    };
    
    const response = await axios.post(API_URL, payload, { headers: HEADERS });
    return response.data;
}

// Exemple : menu d'un restaurant ivoirien
await sendListMessage(
    '225071234567',
    'Bonjour Kofi ! Que souhaitez-vous commander aujourd\'hui ?',
    'Voir le menu',
    [
        {
            title: 'Plats principaux',
            rows: [
                { id: 'dish_attiéké', title: 'Attiéké poisson', description: 'Attiéké au poisson braisé - 3 500 FCFA' },
                { id: 'dish_aloco', title: 'Aloco poulet', description: 'Bananes plantain frites et poulet - 3 000 FCFA' },
                { id: 'dish_foutou', title: 'Foutou sauce', description: 'Foutou igname avec sauce arachide - 4 000 FCFA' }
            ]
        },
        {
            title: 'Boissons',
            rows: [
                { id: 'drink_bissap', title: 'Jus de bissap', description: 'Naturel, sans conservateur - 500 FCFA' },
                { id: 'drink_gingembre', title: 'Jus gingembre', description: 'Fait maison - 600 FCFA' }
            ]
        },
        {
            title: 'Services',
            rows: [
                { id: 'track_order', title: 'Suivre ma commande', description: 'Statut en temps réel' },
                { id: 'talk_agent', title: 'Parler à un conseiller', description: 'Disponible 8h-20h' }
            ]
        }
    ],
    'Bienvenue chez Restaurant Mamie Adjoua'
);

Traiter les réponses aux messages interactifs

Quand un utilisateur clique sur un bouton ou sélectionne une option dans une liste, votre webhook reçoit un événement de type interactive :

function handleInteractiveResponse(message) {
    const { from, interactive } = message;
    const interactiveType = interactive.type;
    
    if (interactiveType === 'button_reply') {
        // Réponse à un message avec boutons
        const { id, title } = interactive.button_reply;
        console.log(`Bouton cliqué : ID=${id}, Titre="${title}" par ${from}`);
        
        handleButtonClick(from, id, title);
        
    } else if (interactiveType === 'list_reply') {
        // Sélection dans une liste
        const { id, title, description } = interactive.list_reply;
        console.log(`Item sélectionné : ID=${id}, Titre="${title}" par ${from}`);
        
        handleListSelection(from, id, title);
    }
}

async function handleButtonClick(from, buttonId, buttonTitle) {
    switch (buttonId) {
        case 'confirm_order':
            await processOrderConfirmation(from);
            await sendTextMessage(from, '✅ Votre commande est confirmée ! Vous recevrez une notification dès la livraison.');
            break;
            
        case 'modify_order':
            await sendListMessage(from, 'Que souhaitez-vous modifier ?', 'Modifier', [
                { title: 'Options', rows: [
                    { id: 'change_address', title: 'Changer l\'adresse' },
                    { id: 'remove_item', title: 'Retirer un article' },
                    { id: 'add_item', title: 'Ajouter un article' }
                ]}
            ]);
            break;
            
        case 'cancel_order':
            await sendButtonMessage(from, 
                'Êtes-vous sûr de vouloir annuler votre commande ?',
                [
                    { id: 'confirm_cancel', title: 'Oui, annuler' },
                    { id: 'keep_order', title: 'Non, garder' }
                ]
            );
            break;
    }
}

Pour créer des expériences encore plus riches avec des formulaires multi-étapes, consultez l'article sur les flows WhatsApp et le guide des chatbots WhatsApp. L'API complète est documentée dans le guide WhatsApp Business API.

FAQ

Q: Y a-t-il une différence entre les boutons dans les templates et les boutons dans les messages interactifs ?

R: Oui, ce sont deux systèmes distincts. Les boutons dans les templates HSM sont définis à la création du template et approuvés par Meta — ils peuvent être des boutons Quick Reply, des boutons URL ou des boutons d'appel. Les messages interactifs avec boutons sont dynamiques, générés à la volée lors de la conversation, et ne nécessitent pas d'approbation préalable. Ils ne peuvent être envoyés que dans la fenêtre de 24h (session messages).

Q: Peut-on mettre des images ou vidéos dans les messages avec boutons ?

R: Oui, les messages interactifs avec boutons peuvent avoir un header de type image, video ou document en plus du type text. Uploadez d'abord le média via l'endpoint /media pour obtenir un media_id, puis référencez ce media_id dans le header de votre message interactif.

Q: Les boutons et listes fonctionnent-ils dans tous les pays africains ?

R: Les messages interactifs sont disponibles partout où WhatsApp Business est supporté. Cependant, les clients qui utilisent d'anciennes versions de WhatsApp peuvent ne pas voir l'interface interactive et recevoir le texte brut à la place. Assurez-vous que votre fallback textuel (le contenu du champ body) est compréhensible sans les boutons.

Q: Combien de temps dure la session interactive (les 24h) ?

R: La fenêtre de 24h redémarre à chaque fois que le client vous envoie un message. Si votre client clique sur un bouton (ce qui constitue un message entrant), la fenêtre de 24h repart de zéro. Un flux interactif bien conçu peut donc se dérouler sur plusieurs jours en maintenant la fenêtre ouverte via les interactions régulières.

Q: Comment créer des flux multi-étapes avec les messages interactifs ?

R: Stockez l'état de la conversation en mémoire (Redis) ou en base de données, associé au numéro de téléphone de l'utilisateur. À chaque message entrant, vérifiez l'état actuel du client pour déterminer quelle étape envoyer. Cette approche de "machine à états" est la base de tous les chatbots WhatsApp robustes.

---

Créez des expériences interactives WhatsApp engageantes pour vos clients africains. Whakup propose un éditeur de messages interactifs et des modèles de chatbot prêts à personnaliser.