Embed the Signup Flow Old Version

The Facebook JavaScript SDK and Facebook Login allow you to embed the signup flow into your website or client portal.

Step 1: Load the Facebook JavaScript SDK

The fbAsyncInit function must be attached to the window object before the line of code loading the JavaScript SDK as the SDK calls this function to set up the Facebook Login information.

This setup uses the following parameters:

• appId — The Meta app ID
• cookie — Enables cookies to allow the server to access this session
• xfbml— Parses social plugins on the page
• version — The Graph API version to use

Example

<script>
  window.fbAsyncInit = function () {
    // JavaScript SDK configuration and setup
    FB.init({
      appId:    'facebook-app-id', // Meta App ID
      cookie:   true, // enable cookies
      xfbml:    true, // parse social plugins on this page
      version:  'v19.0' //Graph API version
    });
  };
</script>

Step 2: Set up Facebook Login

Facebook Login allows you to place a button on your website or portal to initiate a connection to Facebook. Businesses can use this login flow to associate their Facebook profiles with their business portfolio in order to streamline onboarding.

The Facebook Login button should be implemented in a location of your choice (platform portal, landing page, etc.) using the instructions below to trigger the Embedded Signup oAuth flow.

After loading the JavaScript SDK and initializing it with the proper information, set up the FB.login() function to trigger the Embedded Signup flow.

Make sure the following are included:

• The response callback function
• The scope object
• The extras object with:
  • The feature parameter set to whatsapp_embedded_signup
  • The setup parameter for any prefilled form data

The scope object lists permissions that the Solution Partner is requesting Embedded Signup customers to grant them, which includes:

• whatsapp_business_management
• whatsapp_business_messaging

Example

<script>
  window.fbAsyncInit = function () {
    // JavaScript SDK configuration and setup
    FB.init({
      appId:    'your-facebook-app-id', // Facebook App ID
      cookie:   true, // enable cookies
      xfbml:    true, // parse social plugins on this page
      version:  'v19.0' //Graph API version
    });
  };

  // Load the JavaScript SDK asynchronously
  (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/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

  // Facebook Login with JavaScript SDK
  function launchWhatsAppSignup() {
    // Conversion tracking code
    fbq && fbq('trackCustom', 'WhatsAppOnboardingStart', {appId: 'your-facebook-app-id', feature: 'whatsapp_embedded_signup'});
    
    // Launch Facebook login
    FB.login(function (response) {
      if (response.authResponse) {
        const accessToken = response.authResponse.accessToken;
        //Use this token to call the debug_token API and get the shared WABA's ID
      } else {
        console.log('User cancelled login or did not fully authorize.');
      }
    }, {
      scope: 'whatsapp_business_management, whatsapp_business_messaging',
      extras: {
        feature: 'whatsapp_embedded_signup',
        setup: {
          ... // Prefilled data can go here
        }
      }
    });
  }
</script>

Step 3: Create a Login Button

Create a button or link on your website to launch the Embedded Signup flow. Use the onClick function to call the launchWhatsAppSignup() function set up in Step 2.

Example

<button onclick="launchWhatsAppSignup()" style="background-color: #1877f2; border: 0; border-radius: 4px; color: #fff; cursor: pointer; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: bold; height: 40px; padding: 0 24px;">Login with Facebook</button>

Step 4 (Optional): Designate Flow Version

You can control which version of the user interface (flow) your end users see by using the optional version parameter in the extras object.

Version 1 is for the original Embedded Signup flow, and version 2 is for the new flow. If a version is not specified, end users will see the new flow. Version 1 requires both business_management, whatsapp_business_management, and whatsapp_business_messaging permissions with advanced access.

Please note that eventually version 1 will go out of support.

{
  "scope": "business_management, whatsapp_business_management, whatsapp_business_messaging",
  "extras": {
    "feature": "whatsapp_embedded_signup",
    // Display original flow to user
    "version": 1,
    "setup": {
      ... // Prefilled data 
    }
  }
});

{
  "scope": "whatsapp_business_management, whatsapp_business_messaging",
  "extras": {
    "feature": "whatsapp_embedded_signup",
    // Display new flow to user
    "version": 2,
    "setup": {
      ... // Prefilled data 
    }
  }
});

Step 5 (Optional): Session Logging

This step is only supported in Version 2 of the Embedded Signup Flow.

You can now get detailed information about a user as they go through the Embedded Signup user journey. To get this detailed information, ensure that both version and sessionInfoVersion are set to 2.

This detailed information is either one of:

• The step where the user canceled the flow if the user canceled the Embedded Signup flow
• The user's phone and WABA IDs if the user successfully completed the Embedded Signup flow

{
  "scope": "whatsapp_business_management, whatsapp_business_messaging",
  "extras": {
    "feature": "whatsapp_embedded_signup",
    "version": 2,
  
    //  Receive Session Logging Info
    "sessionInfoVersion": 2,
  }
}

In addition to specifying the parameters outlined above, add this JavaScript code on your platform

const sessionInfoListener = (event) => {
  if (event.origin !== "https://www.facebook.com") return;
  try {
    const data = JSON.parse(event.data);
    if (data.type === 'WA_EMBEDDED_SIGNUP') {
     // if user finishes the Embedded Signup flow
     if (data.event === 'FINISH') {
       const {phone_number_id, waba_id} = data.data;
     }
     // if user cancels the Embedded Signup flow
     else {
      const{current_step} = data.data;
  }
    }
  } catch {
    // Don’t parse info that’s not a JSON
    console.log('Non JSON Response', event.data);
  }
};

window.addEventListener('message', sessionInfoListener);  

Returned Payload

If the user completes the flow successfully, the returned payload will have the sessionInfo object contain the following information:

{
  data: {
    phone_number_id: "<PHONE-ID>",
    waba_id: "<WABA-ID>",
  },
  type: "WA_EMBEDDED_SIGNUP",
  event: "FINISH",
  version: 2
}

If the user cancels the flow, the returned payload will have the sessionInfo object contain the following information:

{
 data: {
   current_step: "<Current Step ID>",
 },
 type: "WA_EMBEDDED_SIGNUP",
 event: "CANCEL",
 version: 2
}

You can get more details about when the user canceled the flow with the value of currentStep:

Step 6 (Optional): Bypass Phone Number Selection

This step is only supported in Version 2 of the Embedded Signup Flow.

If you are showing your users the new Embedded Signup flow but do not want them to have to enter or choose a business phone number, you can include the featureType object property set to only_waba_sharing. This removes the phone number entry/selection portion of the new flow (you can assign business phone numbers to onboarded WhatsApp Business Accounts later, via WhatApp Manager.)

{
  "scope": "whatsapp_business_management, whatsapp_business_messaging",
  "extras": {
    "feature": "whatsapp_embedded_signup",
    "version": 2,
    
    // Bypass phone number selection
    "featureType": "only_waba_sharing"
  }
}

If using session logging, data.event will be set to FINISH_ONLY_WABA when the user completes the flow.

After Business Completes Signup Flow

Once a business finishes the Embedded Signup flow, an access token is returned to you. Use that token to get the shared WABA ID by calling the debug_token API.