WhatsApp Business Embedded Signup
Setup your scripts, tokens, session-info, and pre-fill data to onboard your clients to WhatsApp Cloud API in under 60 seconds.
Meta-Hosted Client Onboarding Landing Page
Direct landing page URI or modal popup via Facebook JavaScript SDK
Embed Meta JavaScript SDK into Your Pages
Enables you to use Facebook Login to lower the barrier for people to sign up on your site. The Facebook SDK for JavaScript doesn't require standalone downloads; simply include this asynchronous snippet in your HTML.
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '2163983267884332',
autoLogAppEvents : true,
xfbml : true,
version : 'v26.0'
});
};
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>sdk.js should run on the page.Pre-fill Data for Embedded Signup
Pre-fill your client's business profile, address, and display name so Meta automatically populates the form during onboarding.
{
"business": {
"name": "Pak-LLM Sovereign AI Platform",
"email": "info@gravitas-minds.org",
"phone": {
"country_code": "92",
"phone_number": "3001234567"
},
"website": "https://pak-llm.com",
"address": {
"street_address1": "Main Shahrah-e-Faisal",
"street_address2": "Floor 4, Tech Hub",
"city": "Karachi",
"state": "Sindh",
"zipPostal": "75400",
"country": "PK"
},
"timezone": "UTC+05:00"
},
"phone": {
"displayName": "Pak-LLM AI",
"category": "TECH",
"description": "Pak-LLM Sovereign Bilingual AI & Customer Automation Engine"
}
}Sequence of Steps to Implement the Embedded Signup Flow Code
Follow these sequential steps to integrate the full client onboarding flow in your web application.
Include the asynchronous JavaScript snippet in your HTML or Next.js layout to initialize Facebook SDK with version v26.0.
This listener is executed when the user completes the flow. Store the WhatsApp Business Account ID (WABA) and Phone Number ID locally.
window.addEventListener('message', (event) => {
if (event.origin.includes('facebook.com') || event.origin.includes('meta.com')) {
try {
const data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
if (data.type === 'WA_EMBEDDED_SIGNUP') {
// Store the WhatsApp business account and phone IDs locally
console.log('WABA ID:', data.data?.waba_id);
console.log('Phone Number ID:', data.data?.phone_number_id);
}
} catch {}
}
});The returned authorization code must be transmitted to your backend first and then perform a server-to-server call to Meta servers for a system user token.
const fbLoginCallback = async (response) => {
if (response.authResponse) {
const code = response.authResponse.code;
// Transmit code + WABA ID + Phone ID to backend
await fetch('/api/webhooks/whatsapp/embedded-signup', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
code,
wabaId: sessionInfo?.data?.waba_id,
phoneNumberId: sessionInfo?.data?.phone_number_id
})
});
}
};const launchWhatsAppSignup = () => {
FB.login(fbLoginCallback, {
config_id: '3012452542424289', // Configuration ID
response_type: 'code', // Must be set to 'code' for System User access token
override_default_response_type: true, // Takes precedence over default types
extras: {
version: 'v4',
sessionInfoVersion: '3',
featureType: 'whatsapp_business_app_onboarding',
setup: {
"business": {
"name": "Pak-LLM Sovereign AI Platform",
"email": "info@gravitas-minds.org",
"phone": {
"country_code": "92",
"phone_number": "3001234567"
},
"website": "https://pak-llm.com",
"address": {
"street_address1": "Main Shahrah-e-Faisal",
"street_address2": "Floor 4, Tech Hub",
"city": "Karachi",
"state": "Sindh",
"zipPostal": "75400",
"country": "PK"
},
"timezone": "UTC+05:00"
},
"phone": {
"displayName": "Pak-LLM AI",
"category": "TECH",
"description": "Pak-LLM Sovereign Bilingual AI & Customer Automation Engine"
}
}
}
});
};Embedded Signup Launch
Complete the Embedded Signup flow to share a WhatsApp account and get a token.
Embedded Signup Dialog Parameters
This section's value will update with the post-message response from Embedded Signup. It will respond with the WABA ID and Phone Number IDs.
[
{
"data": {
"phone_number_id": "1223167714222801",
"waba_id": "1541588577651241",
"page_ids": [],
"catalog_ids": [],
"dataset_ids": [],
"business_id": "1154277954426296",
"instagram_account_ids": []
},
"type": "WA_EMBEDDED_SIGNUP",
"event": "FINISH"
}
]Exchange Token (Server-to-Server)
Exchange this code for an access token by performing a server-to-server call to Meta Graph API servers. When the user completes the login dialog flow, Meta redirects with an authorization code.
Get your App secret from the Basic Settings page and OAuth redirect URI from FB Login Settings. It is extremely important that it remains completely secret as it is the core of the security of your app.
const url = "https://graph.facebook.com/v25.0/oauth/access_token";
const response = await fetch(url, {
method: "POST",
body: JSON.stringify({
"client_id": "2163983267884332",
"client_secret": "********************************",
"code": "AQKSuoUtC2i9QJDX3tLdXAZUyu9oyBAmdZcT0BjL7BMpR692U0Lg2UnuVv_TGfS7UV5c8e07Js444aHmld5HZdHzbPifrOaxC9HzqeKB7gP8icnOhTnQUeNDf-X--fuyGmnYLkvkQcCf_0UNoHtkuxfjMz8EMtx29EZMD_TK4KSGycyzUXNmWsxX46Itz2j54-oknK9ZPE62P7K96CjDMClUwV3kRksXbzFuth-rET2kq9w4CHSaGkZHRUskhwZLMbb_TBp9QRKyaxYPVCydNt8XhntDHlLQqbrtyx3MudxIp_b3pKVFEw_iVkE0NV0WVj_SRZqp5_1YOQx2sesXhABKPFScVgLmEaDpZLEtkqog7sHXeCgRYcrD_2r4kQyenUQxUZWm5MIze4kHPqMJ5wFKDOIhBQ90not8xEWDH159qEJlmbGlKkc4jcpl4P4vUl8",
"grant_type": "authorization_code",
"redirect_uri": "https://developers.facebook.com/es/oauth/callback/?product_route=whatsapp-business&business_id=1000640332489595&use_case_enum=WHATSAPP_BUSINESS_MESSAGING&selected_tab=es-integration&features_enabled[0]=app_only_install&feature_type=whatsapp_business_app_onboarding&nonce=LwRs4dnGmNoKoU5tJZ0A47Ki8tHpQIL5"
}),
headers: { "Content-Type": "application/json" }
});
const data = await response.json();
console.log(data);Create a Meta System User Token
To continue integration with WhatsApp Cloud API, you need to create a permanent System User Admin token.
Required System User Admin Permissions:
Manage Meta Business Portfolio assets & system users
Manage WABA phone numbers, templates, and certificates
Send & receive live customer care messages & OTPs
Business ID: 1000640332489595 • Token is securely processed with AES-256-GCM / Post-Quantum vault protection.
Integrate with WhatsApp Cloud APIs
Interactive playground and code generator for WABAs, phone registration, webhooks, templates, and messaging.
const url = "https://graph.facebook.com/v25.0/1000640332489595/client_whatsapp_business_accounts" +
"?fields=id,name,currency,owner_business_info" +
"&limit=20" +
"&access_token=EAAewIZA37bSwBSnZCrhQXJTVJAZAfUjJ1uVSnHAmi3JA9WS5BqC81rZBfCLZAsutRW8wy05vZBxotN4KJTjJFTYkjr1pYiKDBoR3JSZBMOFrqVRU5dRTvcoi4quAFS2JAF3vM1aOt4py3SvBZA1jQDfINUAqgDpZAhHbwWUw9FIreOD8knF9QvF3PQ0yoq268C5eSon6pgtGn9xsbibC1mNLNexm2fSZC5auGC92ZCDEDZBYAqnH9XpdJHrQVaj3IMslwlaiThezVCgZBXi8X3R2Dmp9XvQaI02NdG56xMcpU4N4WAUjfDChXQJ2qyEkkSou7rc3ZAjcAk1MlCZBEOtYwrEG4TQ6MJk";
const response = await fetch(url, {
method: "GET",
headers: { "Content-Type": "application/json" }
});
const data = await response.json();
console.log(data);