Embedded Signup lets you register a WhatsApp Business Account through a single workflow, reducing registration time from days to minutes.
Prerequisites
Complete the following before you begin:
-
Register an Alibaba Cloud account and complete enterprise identity verification. For more information, see Register an Alibaba Cloud account and enterprise identity verification.
-
Register as a Tech Provider with WhatsApp. For more information, see the official WhatsApp documentation: Become a Tech Provider.
Procedure
Meta is rolling out a new version (Version 2) of the Embedded Signup flow. You can use the optional version parameter in the extras object to control which version of the embedded interface is displayed to the end user.
Version 1 is the initial Embedded Signup flow, and Version 2 is the new flow. If you do not specify a version, the end user sees the new Embedded Signup flow.
If you use Version 2 (the default), you can directly call the ChatappBindWaba operation.
Meta will eventually deprecate Version 1. For more information, see the official Meta documentation: Specify the Flow Version.
Call embedded signup
After registering as a Tech Provider, use the Facebook SDK for JavaScript to implement the embedded signup flow.
Code sample
const onRegisterButtonClick = ()=>{
// const { appId , configId } = this.state;
// Initialize the SDK.
window.fbq &&
window.fbq("trackCustom", "WhatsAppOnboardingStart", {
appId: <APP_ID>,
feature: "whatsapp_embedded_signup"
});
// Define the SDK callback function.
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
);
}
}
} catch {
console.log("Non JSON Response", event.data);
}
};
// Listen for the message event.
window.addEventListener("message", sessionInfoListener);
// Trigger the SDK.
window.FB.login(
response => {
if (response.authResponse) {
const accessToken = response?.authResponse?.accessToken;
} else {
console.log("User cancelled login or did not fully authorize.");
}
},
{
config_id: '<CONFIG_ID>',
// The config_id obtained from Meta.
response_type: "code",
// The response_type parameter must be set to 'code'.
override_default_response_type: true,
// This parameter must be set to true.
extras: {
feature: "app_only_install",
version: 4,
sessionInfoVersion: 4,
// Both version parameters must be set to 4.
setup: {
solutionID: '<SOLUTION_ID>' // add solution ID here
},
}
}
);
}
// Example Button
<button onclick="launchWhatsAppSignup()">Login with Facebook</button>;For more details, see the Meta documentation on the Embedded Signup flow.
Authorize in Meta App Management
As a Tech Provider, add the ads_read permission on the Meta App Dashboard.
After requesting permissions in Step 4, follow the on-screen instructions in Meta App Management to complete the authorization flow. Authorization is complete when the final result matches the outcome shown in Step 5.
In the left-side navigation pane of the Meta App Dashboard, select Permissions and Features. In the search box, enter ads_read. In the results list, find the ads_read permission row and click Request advanced access in the Action column. Follow the on-screen instructions to complete the application. Authorization is successful when the Access level shows a green Advanced access tag and the Status shows Advanced access granted.
Trigger the flow for users
The following example shows how to trigger Embedded Signup from a ChatApp page:
Authorize Message Media Library (MML) for the WABA channel that requires authorization.
In the Meta Business login window, confirm the Meta Business Tools Terms and the WhatsApp Marketing Messages API Terms of Service, and then click Continue to bind your account to Alibaba Cloud Singapore.
Bind WABA
After Embedded Signup completes, the message event listener returns a wabaId. Pass this wabaId to the ChatappBindWaba API to associate it with your Alibaba Cloud account PID. The API returns a unique identifier, custSpaceId, which you must include in subsequent API calls.
API reference
Example
Sample success response in JSON format:
{
"RequestId": "90E63D28-E31D-1EB2-8939-A948664****",
"Code": "OK",
"Message": "OK",
"Data": {
"CustSpaceId": "C0202939293****",
"WabaId": "29398*****"
}
}Query WABA business information
Call the QueryWabaBusinessInfo operation to retrieve WABA business information from Meta for an account authorized through Embedded Signup.
API reference
Example
Sample success response in JSON format:
{
"RequestId": "90E63D28-E31D-1EB2-8939-A948664****",
"Code": "OK",
"Message": "OK",
"Data": {
"BusinessId": "19288282****",
"BusinessName": "Alibaba****",
"VerificationStatus": "verified",
"Vertical": "Retail"
}
}