Aller au contenu principal
Guides 7 min de lecture

Embedded Signup WhatsApp : Onboarding Client Simplifié sans Quitter votre App

Comprendre et implémenter l'Embedded Signup WhatsApp pour permettre à vos clients de connecter leur compte WhatsApp Business directement depuis votre interface. Guide technique et cas d'usage.

Embedded Signup WhatsApp : Onboarding Client Simplifié sans Quitter votre App

L'Embedded Signup est l'une des fonctionnalités les plus impactantes de l'écosystème WhatsApp Business API. Pour les BSP (Business Solution Providers) et les plateformes SaaS qui veulent proposer WhatsApp à leurs clients, c'est un game-changer : il permet à un nouveau client de connecter son compte WhatsApp Business en quelques minutes, directement depuis votre interface, sans jamais avoir à naviguer dans le Meta Developer Dashboard. Ce guide explique comment l'implémenter et l'optimiser.

Qu'est-ce que l'Embedded Signup WhatsApp ?

L'Embedded Signup (aussi appelé "Signup Flow" ou "Onboarding Flow") est un mécanisme officiel Meta qui permet aux BSP d'intégrer un flux d'onboarding WhatsApp directement dans leur propre interface utilisateur.

Sans Embedded Signup, le processus d'onboarding d'un nouveau client sur votre plateforme WhatsApp ressemblait à ceci :

  1. Le client crée un Business Manager sur Meta
  2. Il crée une application Meta for Developers
  3. Il ajoute le produit WhatsApp
  4. Il crée un WABA
  5. Il configure son numéro
  6. Il partage ses credentials avec vous
  7. Vous liez son compte à votre plateforme

Ce processus prenait en moyenne 2 à 4 heures pour un non-développeur et générait un taux d'abandon élevé.

Avec l'Embedded Signup, le même processus prend moins de 5 minutes :

  1. Le client clique sur "Connecter WhatsApp" dans votre interface
  2. Une popup Meta s'ouvre (hébergée par Meta, pas par vous)
  3. Le client se connecte à son compte Facebook/Meta
  4. Il sélectionne ou crée son Business Manager, WABA, et numéro
  5. Il retourne sur votre interface, compte connecté et prêt à l'emploi

Prérequis pour Implémenter l'Embedded Signup

Pour pouvoir proposer l'Embedded Signup à vos clients, vous devez :

Être un BSP approuvé par Meta (ou utiliser les APIs Meta sur votre compte) — l'Embedded Signup est une fonctionnalité BSP. Si vous n'êtes pas BSP, vous ne pouvez pas implémenter cette fonctionnalité pour des tiers.

Avoir une application Meta en mode live avec les permissions suivantes :

  • whatsapp_business_management
  • whatsapp_business_messaging
  • business_management

Avoir une URL de callback configurée pour recevoir le token d'accès après l'onboarding.

Avoir le Meta Pixel ou le SDK Facebook JS chargé sur votre page : l'Embedded Signup utilise le SDK JavaScript Facebook pour gérer la popup d'authentification.

Implémentation Technique de l'Embedded Signup

Voici le code complet pour intégrer le flux Embedded Signup sur votre page web :

<!DOCTYPE html>
<html>
<head>
  <title>Connecter WhatsApp Business</title>
</head>
<body>

<!-- Bouton de déclenchement -->
<button id="whatsapp-connect-btn" 
        onclick="launchWhatsAppSignup()"
        style="background-color: #25D366; color: white; padding: 12px 24px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px;">
  Connecter mon compte WhatsApp
</button>

<!-- SDK Facebook JS -->
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId: 'YOUR_META_APP_ID',
      autoLogAppEvents: true,
      xfbml: true,
      version: 'v19.0'
    });
  };

  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/fr_FR/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

  // Lancer le flux Embedded Signup
  function launchWhatsAppSignup() {
    FB.login(function(response) {
      if (response.authResponse) {
        // Récupérer le code d'autorisation
        const code = response.authResponse.code;
        
        // Envoyer le code à votre backend pour échange contre un token
        exchangeCodeForToken(code);
      } else {
        console.log('Connexion annulée par l\'utilisateur');
      }
    }, {
      scope: 'whatsapp_business_management,whatsapp_business_messaging,business_management',
      response_type: 'code',
      extras: {
        setup: {
          solutionID: 'YOUR_SOLUTION_ID' // Votre ID de solution BSP
        },
        featureType: 'only_waba_sharing',
        sessionInfoVersion: '3'
      }
    });
  }

  // Échange du code contre un token d'accès (côté backend)
  async function exchangeCodeForToken(code) {
    const response = await fetch('/api/whatsapp/exchange-token', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ code: code })
    });
    const data = await response.json();
    
    if (data.success) {
      showSuccess('Compte WhatsApp connecté avec succès !');
      // Rediriger vers le dashboard ou rafraîchir
    }
  }
</script>

</body>
</html>

Backend (Node.js) — Échange du code contre un token :

app.post('/api/whatsapp/exchange-token', async (req, res) => {
  const { code } = req.body;
  
  try {
    // Échanger le code contre un token d'accès
    const tokenResponse = await fetch(
      `https://graph.facebook.com/v19.0/oauth/access_token?` +
      `client_id=${process.env.META_APP_ID}&` +
      `client_secret=${process.env.META_APP_SECRET}&` +
      `code=${code}`
    );
    const tokenData = await tokenResponse.json();
    
    // Récupérer les WABA partagés avec ce token
    const wabaResponse = await fetch(
      `https://graph.facebook.com/v19.0/me/businesses?fields=whatsapp_business_accounts`,
      { headers: { Authorization: `Bearer ${tokenData.access_token}` } }
    );
    const wabaData = await wabaResponse.json();
    
    // Sauvegarder les credentials dans votre base de données
    await saveClientCredentials({
      accessToken: tokenData.access_token,
      wabaList: wabaData.data
    });
    
    res.json({ success: true });
  } catch (error) {
    res.status(500).json({ success: false, error: error.message });
  }
});

Personnaliser l'Expérience d'Onboarding

L'Embedded Signup permet quelques niveaux de personnalisation :

Pré-remplissage des informations : Si vous connaissez déjà le Business Manager de votre client (par exemple s'il s'est inscrit via Facebook Login), vous pouvez pré-remplir certains champs du flux pour accélérer l'onboarding.

Customisation du flow : Via les paramètres extras.setup, vous pouvez configurer si le client peut créer un nouveau WABA, utiliser un WABA existant, ou les deux.

Webhook de completion : Configurez un webhook Meta qui notifie votre système quand un client complète le flow — utile pour automatiser les étapes de post-onboarding (création de templates par défaut, configuration des webhooks, etc.).

Pour aller plus loin dans la configuration de votre infrastructure WhatsApp, consultez notre guide WhatsApp Business API et notre article sur WhatsApp Business API sans développeur. Pour le contexte général du marketing WhatsApp, lisez notre guide WhatsApp Marketing 2025.

Cas d'Usage et Bonnes Pratiques UX

Pour les plateformes SaaS : Intégrez l'Embedded Signup dès l'étape d'onboarding de votre produit. Ne demandez pas à votre client de sortir de votre interface pour configurer Meta — faites-le dans votre tunnel d'inscription.

Pour les agences marketing : L'Embedded Signup vous permet de connecter le compte WhatsApp de vos clients sans avoir besoin de leur demander leurs identifiants Meta — plus sécurisé et plus professionnel.

UX recommandée :

  • Ajoutez un guide visuel (étapes, progression) avant de lancer le flow
  • Expliquez clairement ce qui va se passer dans la popup Meta
  • Prévoyez une gestion propre des erreurs (popup bloquée, connexion annulée, permissions refusées)
  • Confirmez visuellement le succès et les prochaines étapes

FAQ — Embedded Signup WhatsApp

L'Embedded Signup est-il disponible pour tous les développeurs ? Non. L'Embedded Signup est réservé aux BSP (Business Solution Providers) approuvés par Meta, ou aux partenaires ayant un accès étendu à l'API. Si vous n'êtes pas BSP, vous pouvez utiliser une version simplifiée (Embedded Signup Lite) avec des fonctionnalités réduites.

Le client doit-il avoir un compte Facebook pour utiliser l'Embedded Signup ? Oui. Le flux Embedded Signup nécessite que votre client se connecte avec un compte Facebook qui est administrateur d'un Meta Business Manager. Sans compte Facebook ou Business Manager, l'onboarding ne peut pas se compléter.

Que se passe-t-il si le client ferme la popup avant la fin ? Le flux est abandonné et aucune donnée n'est transmise à votre système. Votre interface doit gérer cet état gracieusement (pas d'erreur affichée, possibilité de relancer le flux facilement).

Les tokens obtenus via Embedded Signup expirent-ils ? Le token d'accès obtenu via Embedded Signup est un token utilisateur, qui peut expirer. Il est recommandé de l'échanger contre un token système (System User Token) qui n'expire pas, pour une utilisation production stable.


Vous souhaitez proposer une expérience d'onboarding WhatsApp simplifiée à vos clients ? Créez votre compte Whakup et découvrez comment notre plateforme gère l'Embedded Signup pour vous permettre de connecter votre premier client en moins de 5 minutes.

#embedded signup whatsapp#onboarding whatsapp api#intégration rapide bsp#signup whatsapp business
Arthur Lyonnet
Arthur LyonnetCo-fondateur & CEO

Co-fondateur de Whakup, Arthur accompagne les entreprises africaines dans leur transformation digitale via WhatsApp depuis 2022. Passionné par le growth marketing et l'entrepreneuriat en Afrique francophone.

Guides
🚀

Prêt à passer à l'action ?

Essayez Whakup gratuitement pendant 15 jours. Aucune carte bancaire requise.

Démarrer l'essai gratuit