Flows WhatsApp (Meta Flows) : créer des formulaires et expériences in-app

WhatsApp Flows (officiellement Meta Flows) représente une évolution majeure de ce que vous pouvez faire dans WhatsApp Business. Avant les Flows, si vous vouliez qu'un client remplisse un formulaire, prenne un rendez-vous ou passe une commande structurée, vous deviez soit diriger vers un site web externe, soit construire un chatbot complexe avec une gestion d'état élaborée. Désormais, les Flows permettent de créer des formulaires interactifs et des parcours multi-étapes qui s'exécutent entièrement dans WhatsApp, sans jamais quitter l'application. Pour les marchés africains où les abandons de formulaires web sont élevés en raison de connexions instables, c'est une opportunité considérable.

Qu'est-ce que Meta Flows pour WhatsApp ?

WhatsApp Flows est un framework de Meta qui permet de créer des interfaces graphiques structurées (screens) dans WhatsApp. Ces interfaces peuvent contenir des champs de saisie, des sélections, des images, du texte formaté et des boutons d'action — le tout dans un format natif WhatsApp optimisé pour mobile.

Les cas d'usage principaux sont :

• Formulaires de collecte : inscription, demande de devis, feedback
• Réservation et prise de RDV : choix de date, créneau, service
• Processus d'achat guidé : sélection de produits, personnalisation, commande
• Onboarding client : collecte de profil, vérification d'éligibilité, KYC simplifié
• Enquêtes de satisfaction : NPS, évaluation post-achat

Architecture d'un Flow WhatsApp

Un Flow est défini par un fichier JSON qui décrit une série d'écrans (screens) et les transitions entre eux. Voici la structure de base :

{
  "version": "3.0",
  "data_api_version": "3.0",
  "routing_model": {
    "SCREEN_APPOINTMENT": ["SCREEN_CONFIRMATION"],
    "SCREEN_CONFIRMATION": []
  },
  "screens": [
    {
      "id": "SCREEN_APPOINTMENT",
      "title": "Prendre un rendez-vous",
      "data": {
        "services": {
          "type": "array",
          "__example__": [
            { "id": "consultation", "title": "Consultation médicale" },
            { "id": "visite_domicile", "title": "Visite à domicile" },
            { "id": "teleconsultation", "title": "Téléconsultation" }
          ]
        }
      },
      "layout": {
        "type": "SingleColumnLayout",
        "children": [
          {
            "type": "Form",
            "name": "form_appointment",
            "children": [
              {
                "type": "Dropdown",
                "label": "Service souhaité",
                "name": "service",
                "data-source": "${data.services}",
                "required": true
              },
              {
                "type": "TextInput",
                "label": "Votre nom complet",
                "name": "full_name",
                "input-type": "text",
                "required": true
              },
              {
                "type": "TextInput",
                "label": "Date souhaitée (JJ/MM/AAAA)",
                "name": "preferred_date",
                "input-type": "text",
                "required": true
              },
              {
                "type": "RadioButtonsGroup",
                "label": "Créneau préféré",
                "name": "time_slot",
                "data-source": [
                  { "id": "morning", "title": "Matin (8h-12h)" },
                  { "id": "afternoon", "title": "Après-midi (14h-18h)" }
                ],
                "required": true
              },
              {
                "type": "Footer",
                "label": "Continuer",
                "on-click-action": {
                  "name": "navigate",
                  "next": { "type": "screen", "name": "SCREEN_CONFIRMATION" },
                  "payload": {
                    "service": "${form.service}",
                    "full_name": "${form.full_name}",
                    "preferred_date": "${form.preferred_date}",
                    "time_slot": "${form.time_slot}"
                  }
                }
              }
            ]
          }
        ]
      }
    },
    {
      "id": "SCREEN_CONFIRMATION",
      "title": "Confirmation",
      "terminal": true,
      "data": {},
      "layout": {
        "type": "SingleColumnLayout",
        "children": [
          {
            "type": "TextBody",
            "text": "Votre demande de rendez-vous a été enregistrée ! Notre équipe vous contactera pour confirmer le créneau."
          },
          {
            "type": "Footer",
            "label": "Terminer",
            "on-click-action": {
              "name": "complete",
              "payload": {}
            }
          }
        ]
      }
    }
  ]
}

Créer et publier un Flow via l'API

async function createWhatsAppFlow(wabaId, flowJson, flowName) {
    // Étape 1 : Créer le Flow
    const createResponse = await axios.post(
        `https://graph.facebook.com/v18.0/${wabaId}/flows`,
        {
            name: flowName,
            categories: ['APPOINTMENT_BOOKING'],  // ou CUSTOMER_SERVICE, SURVEY, etc.
            clone_flow_id: null
        },
        { headers: HEADERS }
    );
    
    const flowId = createResponse.data.id;
    console.log(`Flow créé avec ID: ${flowId}`);
    
    // Étape 2 : Uploader le JSON du Flow
    const form = new FormData();
    form.append('file', Buffer.from(JSON.stringify(flowJson)), {
        filename: 'flow.json',
        contentType: 'application/json'
    });
    form.append('name', 'flow.json');
    form.append('asset_type', 'FLOW_JSON');
    
    await axios.post(
        `https://graph.facebook.com/v18.0/${flowId}/assets`,
        form,
        { headers: { ...HEADERS, ...form.getHeaders() } }
    );
    
    // Étape 3 : Publier le Flow (le rendre actif)
    await axios.post(
        `https://graph.facebook.com/v18.0/${flowId}/publish`,
        {},
        { headers: HEADERS }
    );
    
    console.log(`Flow ${flowName} publié avec succès`);
    return flowId;
}

// Envoyer un Flow à un utilisateur
async function sendFlowMessage(to, flowId, bodyText, ctaText, flowData = {}) {
    const payload = {
        messaging_product: 'whatsapp',
        to: to,
        type: 'interactive',
        interactive: {
            type: 'flow',
            body: { text: bodyText },
            action: {
                name: 'flow',
                parameters: {
                    flow_message_version: '3',
                    flow_id: flowId,
                    flow_cta: ctaText,
                    flow_action: 'navigate',
                    flow_action_payload: {
                        screen: 'SCREEN_APPOINTMENT',
                        data: flowData
                    }
                }
            }
        }
    };
    
    const response = await axios.post(API_URL, payload, { headers: HEADERS });
    return response.data;
}

// Exemple : déclencher le flow de prise de RDV
await sendFlowMessage(
    '237671234567',
    'flow_rdv_clinique_123',
    'Bonjour ! Prenez votre rendez-vous médical directement ici, sans appel téléphonique.',
    'Prendre un rendez-vous',
    { services: [
        { id: 'consultation', title: 'Consultation générale' },
        { id: 'specialiste', title: 'Spécialiste' },
        { id: 'bilan', title: 'Bilan de santé' }
    ]}
);

Recevoir les données soumises via webhook

Quand un utilisateur complète un Flow, les données saisies arrivent dans vos webhooks :

function handleFlowCompletion(message) {
    if (message.type === 'interactive' && 
        message.interactive.type === 'nfm_reply') {
        
        const flowData = JSON.parse(message.interactive.nfm_reply.response_json);
        const from = message.from;
        
        console.log('Flow complété par', from, ':', flowData);
        
        // Traiter la prise de RDV
        if (flowData.service && flowData.full_name) {
            processAppointmentRequest({
                phone: from,
                service: flowData.service,
                name: flowData.full_name,
                date: flowData.preferred_date,
                timeSlot: flowData.time_slot
            });
        }
    }
}

Pour des automatisations sans code autour des Flows, consultez l'article sur l'automatisation WhatsApp flows, le guide des chatbots WhatsApp et la documentation API WhatsApp Business.

FAQ

Q: Les WhatsApp Flows sont-ils disponibles pour tous les comptes WhatsApp Business ?

R: WhatsApp Flows est disponible pour les comptes utilisant l'API WhatsApp Cloud (pas l'application WhatsApp Business standard). Il faut un compte Meta Business vérifié et une application Meta avec les permissions appropriées. La fonctionnalité est disponible dans tous les pays où WhatsApp Business API est actif, y compris en Afrique.

Q: Peut-on connecter un Flow WhatsApp à une base de données externe en temps réel ?

R: Oui, via le mode "Data Exchange" des Flows. Dans ce mode, chaque écran peut appeler un endpoint de votre serveur pour récupérer des données dynamiques (créneaux disponibles, produits en stock, prix) ou valider des saisies en temps réel (vérification d'un numéro client, d'une adresse email). Cela demande une implémentation backend mais offre des possibilités considérables.

Q: Les Flows WhatsApp fonctionnent-ils hors connexion (mode avion) ?

R: Non, les Flows nécessitent une connexion internet active car ils interagissent avec les serveurs Meta. Si la connexion est coupée pendant la saisie, les données non encore soumises seront perdues. C'est un point à considérer pour les marchés africains avec une connectivité variable — assurez-vous que vos Flows sont courts et efficaces pour minimiser ce risque.

Q: Peut-on styliser l'apparence d'un Flow (couleurs, polices) pour correspondre à sa charte graphique ?

R: Les options de personnalisation visuelle des Flows sont limitées par Meta — l'interface respecte le thème WhatsApp de l'utilisateur (clair ou sombre). Vous pouvez ajouter des images dans les écrans pour renforcer votre identité visuelle, mais vous ne pouvez pas modifier les couleurs de l'interface ou les polices. L'objectif de Meta est de garantir une expérience cohérente pour tous les utilisateurs.

Q: Combien d'étapes/écrans peut contenir un Flow WhatsApp ?

R: Meta permet jusqu'à 20 écrans par Flow. Pour la plupart des cas d'usage (prise de RDV, formulaire de commande, sondage), 3-7 écrans sont suffisants. Des Flows trop longs (10+ écrans) risquent de faire abandonner les utilisateurs. Si votre processus est complexe, découpez-le en plusieurs Flows liés entre eux plutôt qu'un seul flow monolithique.

---

Créez des expériences utilisateur fluides directement dans WhatsApp avec Whakup. Notre plateforme supporte les Meta Flows et vous permet de collecter des données clients sans jamais les faire sortir de WhatsApp.