WhatsApp pour le support client via l'API : tutoriel pour les éditeurs

Intégrer WhatsApp comme canal de support client dans une plateforme existante demande de maîtriser la réception des messages entrants, la gestion des sessions de conversation et l'envoi des réponses agents. Ce tutoriel couvre les étapes clés de façon pratique, avec des exemples de code, à destination des équipes techniques d'éditeurs de solutions helpdesk, CRM ou service client.

Étape 1 : préparer l'accès API pour le support entrant

Le support client WhatsApp repose principalement sur les conversations initiées par le client : l'utilisateur envoie le premier message, ce qui ouvre une fenêtre de 24h pendant laquelle vous pouvez répondre librement sans template.

Prérequis pour recevoir des messages de support :

• Un numéro WhatsApp Business configuré et vérifié via un Meta Tech Provider (ex. Whakup).
• Une URL de webhook HTTPS exposée publiquement sur votre infrastructure.
• Le webhook abonné aux événements messages, message_deliveries, message_reads.
• Un token de vérification pour la validation initiale du webhook par Meta.

Différence avec l'onboarding : pour le support, votre système est principalement en mode réception. La majorité des envois sont des réponses libres (dans la fenêtre 24h), pas des templates.

Étape 2 : recevoir et router les messages de support

Chaque message envoyé par un client sur votre numéro WhatsApp Business génère un événement webhook. Voici comment le traiter.

Structure d'un message entrant :

{
  "object": "whatsapp_business_account",
  "entry": [{
    "id": "{WABA_ID}",
    "changes": [{
      "value": {
        "messaging_product": "whatsapp",
        "metadata": {
          "display_phone_number": "33123456789",
          "phone_number_id": "{PHONE_NUMBER_ID}"
        },
        "contacts": [{ "profile": { "name": "Marie D." }, "wa_id": "33612345678" }],
        "messages": [{
          "from": "33612345678",
          "id": "wamid.HBgN...",
          "timestamp": "1723000000",
          "type": "text",
          "text": { "body": "Bonjour, je n'arrive pas à me connecter à mon compte." }
        }]
      }
    }]
  }]
}

Handler de routage en Node.js :

async function handleIncomingMessage(message, contact) {
  const { from, type, text, id: messageId } = message;
  const customerName = contact?.profile?.name || 'Client';

  // 1. Vérifier si une conversation ouverte existe pour ce numéro
  let ticket = await Ticket.findOpenByPhone(from);

  if (!ticket) {
    // 2. Créer un nouveau ticket
    ticket = await Ticket.create({
      channel: 'whatsapp',
      customerPhone: from,
      customerName,
      status: 'open',
      firstMessageId: messageId
    });

    // 3. Envoyer un accusé de réception automatique
    await sendAutoAcknowledgement(from, customerName, ticket.id);
  }

  // 4. Ajouter le message au ticket
  await ticket.addMessage({
    direction: 'inbound',
    type,
    content: type === 'text' ? text.body : `[media:${type}]`,
    whatsappMessageId: messageId
  });

  // 5. Notifier les agents disponibles
  await notifyAgents(ticket);
}

Étape 3 : envoyer un accusé de réception automatique

Dès réception du premier message, envoyez immédiatement un message de confirmation au client. Si la fenêtre 24h est ouverte (message entrant récent), utilisez un message libre. Sinon, utilisez un template utility.

Accusé de réception (message libre, dans la fenêtre 24h) :

POST https://graph.facebook.com/v18.0/{phone-number-id}/messages
Authorization: Bearer {ACCESS_TOKEN}

{
  "messaging_product": "whatsapp",
  "to": "33612345678",
  "type": "text",
  "text": {
    "body": "Bonjour Marie, votre demande a bien été reçue (ticket #4521). Notre équipe vous répond sous 2h. Merci pour votre patience."
  }
}

Si le client n'a pas écrit depuis plus de 24h et que vous souhaitez relancer la conversation (ex. pour un suivi), utilisez un template utility pré-approuvé :

{
  "type": "template",
  "template": {
    "name": "ticket_followup",
    "language": { "code": "fr" },
    "components": [{
      "type": "body",
      "parameters": [
        { "type": "text", "text": "Marie" },
        { "type": "text", "text": "4521" }
      ]
    }]
  }
}

Coût du message utility : ~0,0336 €/msg pour les numéros français (0,0088 € Whakup + 0,0248 € Meta).

Étape 4 : interface agent pour les réponses

L'agent de support répond depuis votre interface plateforme. Chaque réponse déclenche un appel API vers WhatsApp.

Composant de réponse agent :

async function sendAgentReply(ticketId, agentMessage) {
  const ticket = await Ticket.findById(ticketId);

  // Vérifier si la fenêtre 24h est ouverte
  const lastCustomerMessage = await ticket.getLastCustomerMessage();
  const windowOpen = Date.now() - lastCustomerMessage.timestamp < 86400000;

  if (!windowOpen) {
    throw new Error('Fenêtre 24h expirée. Utilisez un template de suivi.');
  }

  // Envoyer la réponse via l'API WhatsApp
  const response = await whakupClient.sendMessage({
    to: ticket.customerPhone,
    type: 'text',
    text: { body: agentMessage }
  });

  // Enregistrer la réponse dans le ticket
  await ticket.addMessage({
    direction: 'outbound',
    content: agentMessage,
    agentId: currentAgent.id,
    whatsappMessageId: response.messages[0].id
  });
}

Affichage du statut de livraison : les webhooks delivered et read mettent à jour l'affichage dans l'interface agent en temps réel (icône de coche simple pour livré, double coche pour lu).

Étape 5 : gérer les médias envoyés par les clients

Les clients envoient souvent des captures d'écran, des PDF ou des messages vocaux pour illustrer leur problème. L'API fournit un media_id dans le webhook.

Télécharger un média reçu :

async function downloadMedia(mediaId) {
  // 1. Récupérer l'URL temporaire du fichier
  const { data } = await axios.get(
    `https://graph.facebook.com/v18.0/${mediaId}`,
    { headers: { Authorization: `Bearer ${ACCESS_TOKEN}` } }
  );

  // 2. Télécharger le fichier depuis l'URL (valable ~5 minutes)
  const file = await axios.get(data.url, {
    responseType: 'arraybuffer',
    headers: { Authorization: `Bearer ${ACCESS_TOKEN}` }
  });

  // 3. Stocker dans votre CDN/stockage
  return await Storage.upload(file.data, data.mime_type);
}

Attachez le fichier au ticket dans votre système pour que l'agent le visualise dans son interface.

Pour les aspects d'architecture globale du support WhatsApp, consultez le guide complet du support client WhatsApp pour les éditeurs et la comparaison des meilleurs BSP WhatsApp en France. Pour choisir entre intégration interne ou BSP, lisez build vs buy pour l'API WhatsApp.

FAQ

Comment mesurer le SLA de premier contact sur WhatsApp ?

Enregistrez l'horodatage du premier message entrant du client. Lorsque le webhook delivered confirme la livraison de votre première réponse, calculez la différence. Stockez ces métriques par ticket pour vos rapports SLA. Les timestamps Meta sont en secondes Unix.

Que se passe-t-il si un client envoie un message alors qu'aucun agent n'est disponible ?

Répondez automatiquement avec un message texte libre (dans la fenêtre 24h) indiquant les horaires du support et le délai estimé. Si la demande arrive hors des 24h d'une conversation précédente, utilisez un template utility de prise en charge. Ne laissez jamais un client sans accusé de réception.

Peut-on assigner automatiquement les tickets WhatsApp selon le contenu du message ?

Oui. Implémentez une classification NLP simple : si le message contient des mots clés liés à la facturation, routez vers l'équipe comptable ; si c'est un problème technique, routez vers le support L1. Des APIs de classification légères (ou même des regex bien conçues) suffisent pour la plupart des cas de support.

Comment clore proprement un ticket WhatsApp une fois résolu ?

Envoyez un message de clôture au client ("Votre problème a été résolu. N'hésitez pas à nous contacter si besoin.") et marquez le ticket comme résolu dans votre système. Si le client répond après la clôture, créez automatiquement un nouveau ticket lié à l'original pour conserver le contexte.

---

Vous développez une plateforme support et souhaitez y ajouter WhatsApp sans gérer l'infrastructure Meta ? Accédez à l'API WhatsApp Business de Whakup : Meta Tech Provider certifié, webhooks documentés, SDK REST et support technique dédié aux éditeurs. Intégration opérationnelle en quelques jours.