Pre-filling screens

If you know details about your customer's business, such as its name and address, you can inject this data into Embedded Signup. This can pre-fill screens or bypass them altogether, dramatically reducing the amount of input and interaction required by your customers.

For example, here is the business portfolio screen, pre-filled with business's name, email address, website, country, and a pre-verified business phone number:

We recommend that you inject business portfolio data, a pre-verified number, and phone profile data. Injecting this data provides the best experience for your customer, as it:

• entirely pre-fills the business portfolio screen
• bypasses the WhatsApp Business Account (WABA) selection and creation screens
• bypasses the business phone number selection and verification screens
• automatically sets the business phone number's profile information in the WhatsApp client

Integration Helper

The Integration Helper provides a convenient way for you to create pre-filled data payloads and test their impact on the flow. To access the payload tool:

• Navigate to App Dashboard > WhatsApp > ES Integration.
• Locate the Embedded Signup Setup section.
• Locate the Embedded Signup Pre-fill row.
• Click the Edit pre-fill data button.

Injecting Data

The FB.login function, which gets called when a business customer launches Embedded Signup, accepts an object as an argument. Use this object's extras.setup property to inject data:

// Launch method and callback registration
const launchWhatsAppSignup = () => {
  FB.login(fbLoginCallback, {
    config_id: '<CONFIGURATION_ID>', // your configuration ID goes here
    response_type: 'code',
    override_default_response_type: true,
    extras: {
      setup: {
        business: {
          // Business portfolio data goes here
        },
        preVerifiedPhone: {
          // Pre-verified phone number IDs go here
        },
        phone: {
          // Phone number profile data goes here
        },
        whatsAppBusinessAccount: {
          // WABA IDs go here
        }
      },
      featureType: '',
      sessionInfoVersion: '3',
    }
  });
}

Business portfolio data

You can inject the following business portfolio details into the business portfolio screen:

• business portfolio name
• business portfolio email address
• business portfolio website
• business portfolio country (as well as additional address details)
• business phone number

Alternatively, you can inject just an existing business portfolio ID, and its existing details will automatically be injected into the screen. This can be useful if you want a pre-verified phone number to be associated with the customer's existing business portfolio.

Injecting business portfolio data will pre-fill the business portfolio screen and also cause Embedded Signup to skip the WABA selection and WABA creation screens.

Injecting business phone number data will pre-fill the phone number addition screen:

Note that even if you inject data, the business customer can still edit this data using the Edit button, if they wish.

When a business customer completes the flow, the business portfolio information you injected will be used to create the business customer's business portfolio and WABA.

Business object syntax

setup: {
  business: {
    id: <BUSINESS_PORTFOLIO_ID>,
    name: '<BUSINESS_PORTFOLIO_NAME>',
    email: '<BUSINESS_PORTFOLIO_EMAIL_ADDRESS>',
    website: '<BUSINESS_PORTFOLIO_WEBSITE>',
    address: {
      streetAddress1: '<BUSINESS_PORTFOLIO_STREET_ADDRESS_LINE_1>',
      streetAddress2: '<BUSINESS_PORTFOLIO_STREET_ADDRESS_LINE_2>',
      city: '<BUSINESS_PORTFOLIO_CITY>',
      state: '<BUSINESS_PORTFOLIO_STATE>',
      zipPostal: '<BUSINESS_PORTFOLIO_ZIP_CODE>',
      country: '<BUSINESS_PORTFOLIO_COUNTRY>'
    },
    phone: {
      code: <BUSINESS_PORTFOLIO_COUNTRY_CALLING_CODE>,
      number: '<BUSINESS_PORTFOLIO_PHONE_NUMBER>'
    },
    timezone: '<BUSINESS_PORTFOLIO_TIME_ZONE>'
  }
}

Business object parameters

Example Business Object

setup: {
  business: {
    name: 'Wind & Wool',
    email: 'support@windandwool.com',
    website: 'https://windandwool.com/',
    address: {
      streetAddress1: '1 Hacker Way',
      streetAddress2: 'Suite 1',
      city: 'Menlo Park',
      state: 'California',
      zipPostal: '94025',
      country: 'US'
    },
    phone: {
      code: 1,
      number: '6505559999'
    },
    timezone: 'UTC-07:00'
  }
}

Pre-verified phone numbers

You can inject a pre-verified business phone number ID into Embedded Signup, which will cause Embedded Signup to skip the phone number addition and phone number verification screens.

If you are injecting a pre-verified phone number along with business portfolio data (either creating a new portfolio or using an existing one), the business portfolio screen will be pre-filled with the pre-verified number:

If you are not injecting business portfolio data along with a pre-verified number ID, the number will appear in the WABA selection screen:

PreVerifiedPhone object syntax

setup: {
  preVerifiedPhone: {
    ids: [
      '<PRE-VERIFIED_PHONE_NUMBER_ID>'
    ]
  }
}

Replace <PRE-VERIFIED_PHONE_NUMBER_ID> with a unique, pre-verified business phone number ID.

Note that although the ids value accepts an array of strings, if you include more than one pre-verified business phone number ID, only the first ID in the array will appear in the WABA selection screen.

Example preVerifiedPhone object

setup: {
  preVerifiedPhone: {
    ids: [
      '106540352242922'
    ]
  }
}

Phone profile data

You can inject the following phone number profile data. This data does not pre-fill any Embedded Signup screens, but it does populate the business phone number's profile in the WhatsApp client, which is visible to WhatsApp users.

• Phone number profile display name
• Phone number category
• Phone number description

If you do not include this data, the category will be set to Other, and the business customer must set or edit their profile data on their own.

Your customers can do this in the WhatsApp Manager > Account tools > Phone numbers panel by selecting their business phone number and accessing the Profile tab. You can also provide a way for them to update it programmatically by using the POST /<WHATSAPP_BUSINESS_PHONE_NUMBER>/whatsapp_business_profile endpoint.

Phone object syntax

setup: {
  phone: {
    displayName: '<PHONE_PROFILE_DISPLAY_NAME>',
    category: '<PHONE_PROFILE_DISPLAY_CATEGORY>',
    description: '<PHONE_PROFILE_DISPLAY_DESCRIPTION>'
  }
}

Phone object parameters

Example phone object

setup: {
  phone: {
    displayName: 'Wind & Wool',
    category: 'APPAREL',
    description: 'Bespoke artisan apparel and lifestyle goods from upcoming designers.'
  }
}

WhatsApp Business Accounts

If you are injecting a pre-verified phone number, you can also include a WABA ID. This will associate the pre-verified number with the existing WABA instead of with a new one that the business customer would be prompted to create as part of the flow.

WhatsAppBusinessAccount object syntax

setup: {
  whatsAppBusinessAccount: {
    ids: '<WABA_ID>'
  }
}

Replace <WABA_ID> with a unique WABA ID.

Example whatsAppBusinessAccount object

This example associates a pre-verified phone number with an existing WABA.

setup: {
  preVerifiedPhone: {
    ids: [
      '106540352242922'
    ]
  },
  whatsAppBusinessAccount: {
    id: [
      '432428883295692'
    ]
  }
}

Examples

New business portfolio, pre-verified number, and display profile

// Launch method and callback registration
const launchWhatsAppSignup = () => {
  FB.login(fbLoginCallback, {
    config_id: '31602279155865',
    response_type: 'code',
    override_default_response_type: true,
    extras: {
      setup: {
        business: {
          name: 'Wind & Wool',
          email: 'support@windandwool.com',
          website: 'https://windandwool.com/',
          address: {
            streetAddress1: '1 Hacker Way',
            streetAddress2: 'Suite 1',
            city: 'Menlo Park',
            state: 'California',
            zipPostal: '94025',
            country: 'US'
          },
          phone: {
            code: 1,
            number: '6505559999'
          },
          timezone: 'UTC-07:00'
        },
        preVerifiedPhone: {
          ids: [
            '106540352242922'
          ]
        },
        phone: {
          displayName: 'Wind & Wool',
          category: 'APPAREL',
          description: 'Bespoke artisan apparel and lifestyle goods from upcoming designers.'
        }
      },
      featureType: '',
      sessionInfoVersion: '3',
    }
  });
}

Existing business portfolio, pre-verified number, and display profile

// Launch method and callback registration
const launchWhatsAppSignup = () => {
  FB.login(fbLoginCallback, {
    config_id: '31602279155865',
    response_type: 'code',
    override_default_response_type: true,
    extras: {
      setup: {
        business: {
          id: '2729063490586005'
        },
        preVerifiedPhone: {
          ids: [
            '106540352242922'
          ]
        },
        phone: {
          displayName: 'Wind & Wool',
          category: 'APPAREL',
          description: 'Bespoke artisan apparel and lifestyle goods from upcoming designers.'
        }
      },
      featureType: '',
      sessionInfoVersion: '3',
    }
  });
}