> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ycloud.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Embedded signup
> Integrate WhatsApp Embedded Signup with your Meta app and partner solution.
Use your Meta app and partner solution to onboard customers to WhatsApp through your software. Complete [Technical development partner onboarding](/en/partner-center/technical-development-partners/technical-development-partner-onboarding) before following these steps.
For the TP Lite integration option, see [Partner Direct Link](/en/partner-center/technical-development-partners/partner-direct-link-tp-lite).
## Step 1: Add Allowed Domains
Log in to the Meta Developer **App Dashboard** and go to **Facebook Login for Business > Settings > Client OAuth settings**:
Set the following switches to **Yes**:
* Client OAuth Login
* Web OAuth Login
* Enforce HTTPS
* Embedded Browser OAuth Login
* Use Strict Mode for redirect URIs
* Login with the JavaScript SDK
⚠️ **Notes**:
* Embedded Signup relies on the JavaScript SDK.
* When enterprise customers complete the Embedded Signup flow, their **WABA ID**, **business phone number ID**, and an **exchangeable token code** are returned to the window that initiated the flow, but only if that page’s domain has been added to both **Allowed Domains** and **Valid OAuth Redirect URIs**.
* Add all domains where you plan to deploy Embedded Signup (including test domains in development environments).
* Only HTTPS-enabled domains are supported.
***
## Step 2: Create a Facebook Login for Business Configuration ID
A Facebook Login for Business configuration defines which permissions to request and what additional information to collect when enterprise customers use Embedded Signup.
In the console, navigate to **Facebook Login for Business > Configurations**.
Click **Create from template** and select **WhatsApp Embedded Signup Configuration With 60 Expiration Token** to create a configuration.
This template generates a configuration with the most commonly used permissions and access levels.
After configuration is complete, record the **Configuration ID** — it will be needed in the next step.
***
## Step 3: Integrate Embedded Signup into Your Website
Add the following HTML and JavaScript code to your website. This is the complete code required to implement Embedded Signup.
We recommend building different Embedded Signup flows depending on your solution or customer needs:
* [**Creating a WhatsApp API Account**](https://www.ycloud.com/whatsapp-business-api)
* [**WhatsApp Business App coexistence**](https://www.ycloud.com/whatsapp-business-app-coexistence)
***
### Embedded Signup – Creating a WhatsApp API Account
#### 1. Create the Embedded Signup Button
```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
```
⚠️ **Notes**:
* Replace `appId`, `config_id`, and `solutionID` with real values.
* The frontend must pass `waba_id` and `phone_number_id` to your backend to retrieve the WABA and register the number (see below).
More details: [https://developers.facebook.com/docs/whatsapp/embedded-signup/implementation](https://developers.facebook.com/docs/whatsapp/embedded-signup/implementation?utm_source=chatgpt.com)
**2. Bind the WABA and Registered Number**
After the customer completes the Embedded Signup, your frontend will obtain the `waba_id` and `phone_number_id`, and pass them to your backend for subsequent API calls.
**Bind WABA**
Call the YCloud WABA Binding API, then associate it with the corresponding customer account in your system.
Request example:
```
curl -X POST -H 'X-API-Key: {{YOUR_API_KEY}}' \
'https://api.ycloud.com/v2/whatsapp/businessAccounts/{wabaId}/tp/bind'
```
Successful response example:
```
{
"id": "{{waba_id}}",
"name": "WABA name",
"accountReviewStatus": "APPROVED",
"paymentMethodAttached": true,
"currency": "AUD",
"timezoneId": "1"
}
```
**Note**: If the response field `paymentMethodAttached` is `true`, it indicates that YCloud has successfully linked a payment method to this WABA. Otherwise, **please contact the YCloud Team to resolve the issue**.
**Register Phone Number**
```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
curl -XPOST 'https://api.ycloud.com/v2/whatsapp/phoneNumbers/{{waba_id}}/{{phone_number_id}}/register' \
-H 'X-API-Key: {{YOUR-API-KEY}}'
```
**Sample Response**
```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
"phoneNumber": "{{phonenumber}}",
"wabaId": "{{waba_id}}",
"verifiedName": "Phone number name",
"qualityRating": "GREEN",
"messagingLimit": "TIER_250",
"status": "CONNECTED"
}
```
***
### Embedded Signup – WhatsApp Business App Coexistence
#### 1. Create the Embedded Signup Button
```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
```
***
#### 2. Retrieve WABA and Bind to YCloud
After customers complete Embedded Signup, your frontend will receive `waba_id`. Pass it to your backend for further API calls.
Call the YCloud **SMB Bind API**. Once successful, associate the WABA with your customer’s account in your system.
```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
curl 'POST /v2/whatsapp/businessAccounts/{wabaId}/smb/bind' \
-H 'X-API-Key: {{YOUR-API-KEY}}'
```
**Sample Response**
```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
"id": "{{phonenumber_id}}",
"phoneNumber": "{{phonenumber}}",
"wabaId": "{{waba_id}}",
"qualityRating": "GREEN",
"messagingLimit": "TIER_1K",
"verifiedName": "John's Cake Shop",
"codeVerificationStatus": "VERIFIED",
"isOfficialBusinessAccount": true,
"status": "PENDING",
"nameStatus": "APPROVED",
"newNameStatus": "APPROVED",
"decision": "APPROVED",
"requestedVerifiedName": "string",
"rejectionReason": "string",
"qualityUpdateEvent": "ONBOARDING"
}
```
## FAQ
If you have configured the **solutionID** correctly, customers will see the real name of the Solution Partner during Facebook authorization.\
If they do not see it, the configuration has not taken effect.
Please make sure that **App Review** has been completed.
This may happen if the user selects an **existing WABA** instead of creating a new one.\
The existing WABA may already have a payment method that has not been removed.
When opening the Embedded Signup page, the following message may appear:
**App not active**\
*This app is not currently accessible and the app developer is aware of the issue. You will be able to log in when the app is reactivated.*
This happens when the app is in **Development** mode, where only test users have permission (see **App Dashboard > App roles > Roles / Test Users**).
**Solution**:\
Switch the app mode to **Live** via [Meta Apps](https://developers.facebook.com/apps) by opening the corresponding app in the Dashboard.\
Alternatively, authorize the current user. See: [Assign business assets to people in your business portfolio](https://www.facebook.com/business/help/325571851329683?id=2190812977867143).
When opening the Embedded Signup page, the following message may appear:
**Feature unavailable**\
*Facebook Login is currently unavailable for this app as we are updating additional details for this app. Please try again later.*
**Solution**:\
Go to **App Dashboard > App Review > Permissions and Features** and apply for **public\_profile** advanced access.
##
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.
Set the following switches to **Yes**:
* Client OAuth Login
* Web OAuth Login
* Enforce HTTPS
* Embedded Browser OAuth Login
* Use Strict Mode for redirect URIs
* Login with the JavaScript SDK
⚠️ **Notes**:
* Embedded Signup relies on the JavaScript SDK.
* When enterprise customers complete the Embedded Signup flow, their **WABA ID**, **business phone number ID**, and an **exchangeable token code** are returned to the window that initiated the flow, but only if that page’s domain has been added to both **Allowed Domains** and **Valid OAuth Redirect URIs**.
* Add all domains where you plan to deploy Embedded Signup (including test domains in development environments).
* Only HTTPS-enabled domains are supported.
***
## Step 2: Create a Facebook Login for Business Configuration ID
A Facebook Login for Business configuration defines which permissions to request and what additional information to collect when enterprise customers use Embedded Signup.
In the console, navigate to **Facebook Login for Business > Configurations**.
Click **Create from template** and select **WhatsApp Embedded Signup Configuration With 60 Expiration Token** to create a configuration.
This template generates a configuration with the most commonly used permissions and access levels.
After configuration is complete, record the **Configuration ID** — it will be needed in the next step.
***
## Step 3: Integrate Embedded Signup into Your Website
Add the following HTML and JavaScript code to your website. This is the complete code required to implement Embedded Signup.
We recommend building different Embedded Signup flows depending on your solution or customer needs:
* [**Creating a WhatsApp API Account**](https://www.ycloud.com/whatsapp-business-api)
* [**WhatsApp Business App coexistence**](https://www.ycloud.com/whatsapp-business-app-coexistence)
***
### Embedded Signup – Creating a WhatsApp API Account
#### 1. Create the Embedded Signup Button
```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
```
⚠️ **Notes**:
* Replace `appId`, `config_id`, and `solutionID` with real values.
* The frontend must pass `waba_id` and `phone_number_id` to your backend to retrieve the WABA and register the number (see below).
More details: [https://developers.facebook.com/docs/whatsapp/embedded-signup/implementation](https://developers.facebook.com/docs/whatsapp/embedded-signup/implementation?utm_source=chatgpt.com)
**2. Bind the WABA and Registered Number**
After the customer completes the Embedded Signup, your frontend will obtain the `waba_id` and `phone_number_id`, and pass them to your backend for subsequent API calls.
**Bind WABA**
Call the YCloud WABA Binding API, then associate it with the corresponding customer account in your system.
Request example:
```
curl -X POST -H 'X-API-Key: {{YOUR_API_KEY}}' \
'https://api.ycloud.com/v2/whatsapp/businessAccounts/{wabaId}/tp/bind'
```
Successful response example:
```
{
"id": "{{waba_id}}",
"name": "WABA name",
"accountReviewStatus": "APPROVED",
"paymentMethodAttached": true,
"currency": "AUD",
"timezoneId": "1"
}
```
**Note**: If the response field `paymentMethodAttached` is `true`, it indicates that YCloud has successfully linked a payment method to this WABA. Otherwise, **please contact the YCloud Team to resolve the issue**.
**Register Phone Number**
```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
curl -XPOST 'https://api.ycloud.com/v2/whatsapp/phoneNumbers/{{waba_id}}/{{phone_number_id}}/register' \
-H 'X-API-Key: {{YOUR-API-KEY}}'
```
**Sample Response**
```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
"phoneNumber": "{{phonenumber}}",
"wabaId": "{{waba_id}}",
"verifiedName": "Phone number name",
"qualityRating": "GREEN",
"messagingLimit": "TIER_250",
"status": "CONNECTED"
}
```
***
### Embedded Signup – WhatsApp Business App Coexistence
#### 1. Create the Embedded Signup Button
```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
```
***
#### 2. Retrieve WABA and Bind to YCloud
After customers complete Embedded Signup, your frontend will receive `waba_id`. Pass it to your backend for further API calls.
Call the YCloud **SMB Bind API**. Once successful, associate the WABA with your customer’s account in your system.
```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
curl 'POST /v2/whatsapp/businessAccounts/{wabaId}/smb/bind' \
-H 'X-API-Key: {{YOUR-API-KEY}}'
```
**Sample Response**
```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
"id": "{{phonenumber_id}}",
"phoneNumber": "{{phonenumber}}",
"wabaId": "{{waba_id}}",
"qualityRating": "GREEN",
"messagingLimit": "TIER_1K",
"verifiedName": "John's Cake Shop",
"codeVerificationStatus": "VERIFIED",
"isOfficialBusinessAccount": true,
"status": "PENDING",
"nameStatus": "APPROVED",
"newNameStatus": "APPROVED",
"decision": "APPROVED",
"requestedVerifiedName": "string",
"rejectionReason": "string",
"qualityUpdateEvent": "ONBOARDING"
}
```
## FAQ