Pre Filled Data

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.

Example

<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:  'v20.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>

The setup parameter

The following table provides the list of fields for pre filling form data in the embedded signup flow UI.

FieldDescription

business.name

type: String

Name of the business.

For example: 'Acme Inc.'.

business.email

type: String (valid email format)

Email of the business.

For example: 'johndoe@acme.com'.

business.website

type: String (valid URL format)

Website URL of the business.

For example: 'https://www.acme.com'.

business.phone.code

type: Number

Country dial code.

For example: 1.

business.phone.number

type: String

Phone number of the business. Remember to exclude the country dial code.

For example: "6505551234".

business.address.streetAddress1

type: String

Street address of the business (line 1).

For example: '1 Acme Way'.

business.address.streetAddress2

type: String

Street address of the business (line 2).

business.address.city

type: String

City of the business address.

For example: 'Acme Town'.

business.address.state

type: String

State or Province of the business address.

For example: 'CA'

business.address.zipPostal

type: String

Zip or Postal code of the business address.

For example: '94000'

business.address.country

type: ISO 3166-1 alpha-2 country code

Country of the business address.

For example: 'US'.

business.timezone

type: UTC Offset format. For example: "UTC -08:00".

Timezone of the business.

For example: 'UTC-08:00'.

phone.displayName

type: String following display name guidelines.

WhatsApp business profile display name visible to end-users in their WhatsApp clients.

For example: 'Acme Inc'.

phone.category

Industry vertical of WhatsApp business. See the WhatsApp Business Profile Categories table below for accepted values.

For example: 'ENTERTAIN'.

phone.description

type: String (Maximum of 256 characters)

Description of the business.

WhatsApp Business Profile Categories

The following table provides a list of accepted values for the WhatsApp business profile category that describe the industry the business operates in.

CategoryAccepted Value

Automotive

AUTO

Beauty, Spa and Salon

BEAUTY

Clothing and Apparel

APPAREL

Education

EDU

Entertainment

ENTERTAIN

Event Planning and Service

EVENT_PLAN

Finance and Banking

FINANCE

Food and Grocery

GROCERY

Public Service

GOVT

Hotel and Lodging

HOTEL

Medical and Health

HEALTH

Non-Profit

NONPROFIT

Professional Services

PROF_SERVICES

Shopping and Retail

RETAIL

Travel and Transportation

TRAVEL

Restaurant

RESTAURANT

Other

OTHER

Example

After set up, your clients will see a screen like this:

Meta Business creation screen

Meta Business creation screen (address prefill)

WhatsApp Business Profile creation screen