This is an optional feature that saves users the effort of re-entering their business information during the embedded signup process.
The setup
parameter of the extras
object in your Facebook Login setup can be used to pass data for pre filling forms in the embedded signup flow. You can pass all of the data fields or a subset to be filled in the forms. For example, if you only have the business’s name, email and phone number, you can pass that information alone.
<script>
window.fbAsyncInit = function () {
// JavaScript SDK configuration and setup
FB.init({
appId: 'meta-app-id', // Meta 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 code = response.authResponse.code;
// The returned code must be transmitted to your backend
// there must then perform a server-to-server call to our servers for an access token
} else {
console.log('User cancelled login or did not fully authorize.');
}
},
{
config_id: <CONFIG_ID>, // configuration ID goes here
response_type: 'code', // must be set to 'code' for System User access token
override_default_response_type: true, // when true, any response types passed in the "response_type" will take precedence over the default types
extras: {
setup: {
business: {
name: 'Acme Inc.',
email: 'johndoe@acme.com',
phone: {
code: 1,
number: '6505551234'
},
website: 'https://www.acme.com',
address: {
streetAddress1: '1 Acme Way',
city: 'Acme Town',
state: 'CA',
zipPostal: '94000',
country: 'US'
},
timezone: 'UTC-08:00'
},
phone: {
displayName: 'Acme Inc',
category: 'ENTERTAIN',
description: 'Acme Inc. is a leading entertainment company.',
}
}
}
});
}
</script>
setup
parameterThe following table provides the list of fields for pre filling form data in the embedded signup flow UI.
Field | Description |
---|---|
type: String | Name of the business. For example: |
type: String (valid email format) | Email of the business. For example: |
type: String (valid URL format) | Website URL of the business. For example: |
type: Number | Country dial code. For example: |
type: String | Phone number of the business. Remember to exclude the country dial code. For example: |
type: String | Street address of the business (line 1). For example: |
type: String | Street address of the business (line 2). |
type: String | City of the business address. For example: |
type: String | State or Province of the business address. For example: |
type: String | Zip or Postal code of the business address. For example: |
| Country of the business address. For example: |
type: UTC Offset format. For example: "UTC -08:00". | Timezone of the business. For example: |
type: String following display name guidelines. | WhatsApp business profile display name visible to end-users in their WhatsApp clients. For example: |
| Industry vertical of WhatsApp business. See the WhatsApp Business Profile Categories table below for accepted values. For example: |
type: String (Maximum of 256 characters) | Description of the business. |
The following table provides a list of accepted values for the WhatsApp business profile category that describe the industry the business operates in.
Category | Accepted Value |
---|---|
Automotive |
|
Beauty, Spa and Salon |
|
Clothing and Apparel |
|
Education |
|
Entertainment |
|
Event Planning and Service |
|
Finance and Banking |
|
Food and Grocery |
|
Public Service |
|
Hotel and Lodging |
|
Medical and Health |
|
Non-Profit |
|
Professional Services |
|
Shopping and Retail |
|
Travel and Transportation |
|
Restaurant |
|
Other |
|
After set up, your clients will see a screen like this: