Create a WABA with a signup tool - Chat App Message Service

This topic guides you through registering a WhatsApp Business Account (WABA) using the official registration tool provided by Meta. Utilizing embedded signup can significantly reduce your registration time. Embedded signup simplifies the registration process by consolidating all steps into a single workflow, thereby shortening the registration time from days to just a few minutes.

Prerequisites

Before embedded signup, make sure that the following prerequisites are met:

An Alibaba Cloud account has been created and enterprise authentication has been completed.
Chat App Message Service has been activated. For more information, see Getting started.
You are a WhatsApp Tech Provider. To become a Tech Provider, see the Facebook documentation Become a Tech Provider.

Procedure

Important

Facebook has started to roll out the new version (Version 2) of the embedded signup process. You can use the version parameter within the extras object (optional) to control which version of the embedded interface (process) the end user sees.

Version 1 is for the initial embedded signup process. Version 2 is for the new embedded signup process. If no version is specified, the end user will see the new embedded signup process (Version 2). For more information, see the Facebook documentation Embedded Signup.

When no version is specified or when Version 2 is specified (which is the default if no version is specified), you can directly bind a WABA. For more information, see Bind the WABA to Chat App Message Service.

Please note that Facebook will eventually discontinue support for Version 1. For more information, see the Facebook documentation Implementation.

Implement embedded signup

As a Tech Provider, you can use the Facebook JS SDK to perform embedded operations.

Sample code

const onRegisterButtonClick = ()=>{
// const { appId , configId } = this.state;
// Initialize the SDK.
window.fbq &&
window.fbq("trackCustom", "WhatsAppOnboardingStart", {
           appId: <APP_ID>,
           feature: "whatsapp_embedded_signup"
});

// Configure SDK callback functions.
const sessionInfoListener = event => {
    if (event.origin !== "https://www.facebook.com") return;
    try {
        const eventData = JSON.parse(event.data);

        console.log("[sessionInfoListener] Event Data", eventData, event.data);

        if (eventData.type === "WA_EMBEDDED_SIGNUP") {
            if (
                eventData.event === "FINISH" ||
                eventData.event === "FINISH_ONLY_WABA"
            ) {
                const { waba_id } = eventData.data;
                console.log(
                    "[sessionInfoListener] waba_id",
                    waba_id
                );
                // TODO: Call the ChatappBindWaba API operation provided by Chat App Message Service. // After this operation is called, the value of the custSpaceId parameter is returned.

            }
        }
    } catch {
        console.log("Non JSON Response", event.data);
    }
};

// Listen to a message event.
window.addEventListener("message", sessionInfoListener);

// Invoke the SDK.
window.FB.login(
    response => {
    // You do not need to call the ChatappEmbedSignUp operation provided by Chat App Message Service to obtain the value of the accessToken parameter. (The ChatappEmbedSignUp operation is deprecated.)
    if (response.authResponse) {
        const accessToken = response?.authResponse?.accessToken;
    } else {
        console.log("User cancelled login or did not fully authorize.");
    }
},
{
    config_id: '<CONFIG_ID>',
    // The configId obtained from Meta.
    response_type: "code",
    // Set the response_type parameter to code.
    override_default_response_type: true,
    // Set the override_default_response_type parameter to true.
    extras: {
        feature: "whatsapp_embedded_signup",
        // featureType:"only_waba_sharing",
        // The only_waba_sharing parameter specifies that a phone number is not required for implementing embedded signup. (The AddChatappPhoneNumber operation is provided by Chat App Message Service to add a phone number.)
        // If you need to enter a phone number during embedded signup, do not set the featureType parameter to only_waba_sharing.
        version: 2,
        sessionInfoVersion: 3,
        // Set the version and sessionInfoVersion parameters to 3.
        setup: {
            solutionID" '<SOLUTION_ID>' // add solution ID here
        },
    }
}
);
}

// Example Button
<button onclick="launchWhatsAppSignup()">Login with Facebook</button>;

For more information about how to implement embedded signup, see the Facebook documentation Implementation.

Example

Sample success response in the JSON format

{
  "RequestId": "744c4b5c79c9432497a075bdfca3***",
  "Code": "OK",
  "Message": "null",
  "AppId": "23h***",
  "ConfigId":"3548941223****"
}

Bind the WABA to Chat App Message Service

After completing the embedded signup via the Facebook JS SDK, you can obtain the wabaId within the message event listener. Pass this wabaId to the ChatappBindWaba API operation, and the platform will associate it with your Alibaba Cloud PID, returning a unique identifier: custSpaceId. This parameter will be required in subsequent API operations as a reference.

API reference

ChatappBindWaba

Example

Sample success response in the JSON format

{
  "RequestId": "90E63D28-E31D-1EB2-8939-A948664****",
  "Code": "OK",
  "Message": "null",
  "Data": {
    "CustSpaceId": "C0202939293****",
    "WabaId": "29398*****"
  }
}

Query the business profile of the WABA

You can query the business profile of the WABA by calling the QueryWabaBusinessInfo operation.

API reference

QueryWabaBusinessInfo

Example

Sample success response in the JSON format

{
  "RequestId": "90E63D28-E31D-1EB2-8939-A948664****",
  "Code": "OK",
  "Message": "null",
  "Data": {
    "BusinessId": "19288282****",
    "BusinessName": "Alibaba****",
    "VerificationStatus": "verified",
    "Vertical": "Retail"
  }
}