Overview

The prefill values feature enables you to enhance the customer experience of the Sales add-on by injecting data into the iframe via query parameters.

The injected values then automatically populate the appropriate fields in the sales flow. Additionally, you can use prefil actions to either hide, disable or allow editing of the populated fields.

There are four steps in the embed flow that can be populated using prefill values: quote, personal details, application, and payment. The specific keys that need to be added for each section can be seen below

Quote values

The quoteValues query parameter can be used to prefill values for the quote step. The specific keys to use depend on your quote schema, so you can pass in any values that match the schema's keys and data types. If all required quote fields are provided as prefill values, a quote will be generated automatically.

Below is an example of a quote schema's output.

{
  "type": "dinosure",
  "life_cover": 200000000, // This is in cents
  "age": 32,
  "cardio_fitness_level": "moderate",
  "smoker": false,
  "early_warning_network_benefit": true,
  "extraction_benefit": true,
  "consultants_benefit": false
}

To have these values injected into the quote step the query parameter below is constructed and should be added to the base url

"quote_values={"type":"dinosure","life_cover":200000000,"age":32,"cardio_fitness_level":"moderate","smoker":false,"early_warning_network_benefit":true,"extraction_benefit":true,"consultants_benefit":false}

Personal details values

The personalDetailsValues query parameter can be used to prefill values for the personal details step. The structure of this object must follow the provided example and all key-value pairs are optional. If you want to skip or automatically submit the personal details step, you can enable the personalDetails.displayOptionalSections.skipOnPrefill setting in the product module Embed config.

For guidance on data validation see the Policyholder object documentation.

Below is an example of the policyholder data object for a policyholder with a passport as the identification type.

{
 "first_name": "Erlich",
 "last_name": "Bachman",
 "identification_number": "ABA9875413",
 "identification_country": "GB",
 "identification_type": "passport",
 "identification_expiration_date": "2025-12-02",
 "email": "[email protected]",
 "cellphone_number": "0821234567",
 "gender": "male",
 "date_of_birth": "1989-06-11",
 "address_opt_in": true,
 "address_line_1": "123 Main Street",
 "address_line_2": "Unit 4B",
 "suburb": "Birmingham",
 "area_code": "B16 8HA",
 "city": "Birmingham",
 "country": "GB",
 "policyholder_type": "individual",
}

To have these values injected into the personal details step the query parameter below is constructed and should be added to the base url

&personal_details_values={"first_name":"Erlich","last_name":"Bachman","identification_number":"ABA9875413","identification_country":"GB","identification_type":"passport","identification_expiration_date":"2025-12-02","email":"[email protected]","cellphone_number":"0821234567","gender":"male","date_of_birth":"1989-06-11","address_opt_in":true,"address_line_1":"123 Main Street","address_line_2":"Unit 4B","suburb":"Birmingham","area_code":"B16 8HA","city":"Birmingham","country":"GB","policyholder_type":"individual"}

Application values

The applicationValues query parameter allows you to prefill values for the application step. The specific keys to use depend on your application schema, so you can pass in any values that match the schema's keys and data types.

Below is an example of an application schema's output.

{
 "spouse: ": {
   "first_name": "Monica",
   "last_name": "Hall",
   "date_of_birth": "1993-09-27"
 },
}

To have these values injected into the application step the query parameter below is constructed and should be added to the base url

&application_values={"spouse: ":{"first_name":"Monica","last_name":"Hall","date_of_birth":"1993-09-27"}}

Payment values

The paymentValues query parameter can be used to prefill values for the payment step. The specific key-value pairs required depend on the payment method configured for the product module. Currently, the supported payment methods that can be prefilled are debit orders and external. The structure of the prefill values must match one of the examples provided, depending on the payment method being used.

Debit order example:

{
 "branch_code": "7898",
 "account_holder": "E Bachman",
 "bank": "Standard Bank",
 "debit_day": 5,
 "account_type": "cheque",
 "account_number": "1234"
}

External payment method example:

{
 "debit_day": 5,
 "external_reference": <value>,
}

To have these values injected into the payment step the query parameter below is constructed using the debit order example and should be added to the base url

&payment_values={"branch_code":"7898","account_holder":"B Gilfoyle","bank":"Standard Bank","debit_day":5,"account_type":"cheque","account_number":"1234","external_reference":"some_account_number"}

Prefill actions

Prefill actions allow you to customize how a field behaves when it has been prefilled. By default, a prefilled field will remain visible and editable. You can use prefill actions to specify alternative behavior. The options are:

• hidden: If the prefill value is valid, the field will be hidden from the user. This can be useful for handling steps that are unnecessary for the user to see.
• disabled: If the prefill value is valid, the field will be visible to the user but disabled. This allows the user to see the prefilled value but not modify it.

The prefill action behavior is added at the Root schema component level in the props attribute

For more information on schemas, see the Schemas overview documentation.

Below is an example of a quote schema component with the prefill actions prop of disabled

{
   "key": "cardio_fitness_level",
   "type": "radio",
   "label": "What is your cardio fitness level?*",
   "props": {
     "prefillAction": "disabled"
   },
   "options": [
   ],
   "outputPath": "cardio_fitness_level"
 },