Embed configuration

Configure a self-service workflow that can be embedded in our existing digital customer journey

Overview

Root Embed is an optional feature that allows you to add a white-labelled, self-service onboarding flow to your existing digital customer journey. You can use Embed in one of two ways:

  • Embedded as an iframe into your website, user portal, or mobile app
  • As a standalone website for your customers that can be accessed via a button or link on your website, user portal, mobile app, marketing email, SMS or a QR-code in your branch.

Please see the Dinosure implementation for a full example of the flow. Embed is typically implemented as a full-page iframe that contains your header and footer, but the iframe fills the body.

You can configure the look and feel of the embedded flow for each product module, making it easy to match the embed flow to your brand, and offer a seamless customer journey without writing any code. The Embed flow is configured in the file workflows > embed-config.json in your product module workbench directory.

This file has the following high-level structure:

{
  "styles": { ... },
  "header": { ... },
  "footer": { ... },
  "landing": { ... },
  "quote": { ... },
  "personalDetails": { ... },
  "application": { ... },
  "summary": { ... },
  "payment": { ... },
  "confirmation": { ... }
}

Each of these sections is then broken down into further sub sections representing specific items on the page.

  • links - This contains any links that are required for the components.
  • images - This is a collection of links to the required images. When including an image we recommend using S3 or Google storage for performance reasons.
  • wording - This is where your desired copy is configured.
  • displayOptionalSections - This is used to enable / disable various optional components of the flow, if you have included wording for an optional section that you have chosen not to display, the corresponding configurations will be ignored.

Styles

The Embed styles section is where you can configure colors and other styling options applicable to the entire Embed flow. The Embed styles are down into the following subsections:

  • colors - This is where you can configure the colors of your Embed flow. Please reference the screenshots below to see which colors are applicable where.
  • fontSize - Here you can set the font sizes for the relevant sections. In the current implementation, these sizes are only relevant for the landing page.
  • fontFamily - This allows you to set your desired fonts for body text and headings.
  • borderRadius - This setting allows you to define the border radius of the buttons. This setting accepts a string representing pixels, e.g. 50px.

An example is provided below:

{
  "styles": {
    "colors": {
      "dark": "#00000",
      "error": "#ff2b38",
      "light": "#FFFFFF",
      "border": "rgba(0, 0, 0, 0.125)",
      "primary": "#240E8B",
      "success": "#1fc881",
      "warning": "#ffab00",
      "disabled": "#CDD4DE",
      "highlight": "#FC64B1",
      "backgroundHighlight": "rgba(245, 247, 252, 1)"
    },
    "fontSize": {
      "body": "14px",
      "title": "40px",
      "button": "14px",
      "subTitle": "22px",
      "subscript": "8px"
    },
    "fontFamily": {
      "body": "Lato",
      "title": "Lato"
    },
    "borderRadius": {
      "button": "50px"
    }
  },
  ...
}

Header and footer

The header and footer are displayed on multiple stages of the Embed sales flow.

The header component controls two elements, namely the optional logo that can be displayed at the top of the landing page, as well as the header text which can be seen on all stages of the Embed sales flow.

The logo at the top of the landing page is optional and can be configured with the titleUrl key. To enable the logo, you will need to set displayOptionalSections.titleImage to true.

The footer component is displayed on all sections of the iframe and is used to display the underwriter’s disclaimer paired with an optional logo.

The logo is optional and can be configured with the disclaimerUrl key. To enable the logo, you will need to set displayOptionalSections.disclaimerImage to true.

An example is provided below:

{
  "header": {
    "links": {},
    "images": {
      "titleUrl": ""
    },
    "wording": {
      "title": "Get Dinosure"
    },
    "displayOptionalSections": {
      "titleImage": false
    }
  },
    "footer": {
    "links": {},
    "images": {
      "disclaimerUrl": "https://storage.googleapis.com/root-production-public-client-images/Dinosure%20Demo/root-logo.svg"
    },
    "wording": {
      "disclaimer": "Dinosure is a sample application by Root. The source code is MIT licensed, while the website content is licensed CC BY NC SA 4.0. Dinosure Services (Pty) Ltd is an unauthorised financial services provider. FSP number: 123456. 3 Sauropoda Lane, Isla Nublar, 1337"
    },
    "displayOptionalSections": {
      "disclaimerImage": true
    }
  },
  ...
}

Landing page

This is the entry point to the Embed sales flow. Use the landing page to inform your customers about your product and prompt them to take out cover.

The following sections of the landing page are optional and can be enabled or disabled in the config file:

  • consentDisclaimer - Enable this section to display a modal to ask consent to collect information and store cookies before the user enters the policy issuing flow. You can configure the content of the content disclaimer in the wording.consentDisclaimer object.
  • watchVideo - Enable this section if you want to add a Youtube video to the landing page. You can configure this section through the wording.videoTitle and the links.youTubeVideoId setting, where you can provide a link to a Youtube video, or a Youtube video ID.
  • descriptionBullets - This section allows you to give a short introduction to your product. You can edit this section in the wording.descriptionBullets option. The value is an array of strings, each item in the array representing a bullet point.

An example is provided below. Please see the screenshots, which shows which options apply to which parts of the landing page.

{
  "landing": {
    "links": {
      "youTubeVideoId": "https://www.youtube.com/watch?v=PJlmYh27MHg"
    },
    "images": {
      "background": "https://storage.googleapis.com/root-production-public-client-images/Dinosure%20Demo/dinosure-background.png"
    },
    "wording": {
      "title": "Get Dinosure",
      "subTitle": "From R149 p/m",
      "videoTitle": "Dinosure Emergency Insurance",
      "description": [
        "Dinosure is a best of breed insurance scheme which not only provides life and disability insurance for dinosaurs attacks, but also provides the following services to prevent that eventuality from ever occurring:"
      ],
      "consentDisclaimer": {
        "title": "Consent",
        "consentItems": [
          "Consent to Dinosure and Root collecting and processing your personal information to provide you with cover."
        ]
      },
      "createQuoteButton": "Let's get started!",
      "descriptionBullets": ["Early warning network", "Extraction team", "Security consultants"]
    },
    "displayOptionalSections": {
      "watchVideo": false,
      "consentDisclaimer": true,
      "descriptionBullets": true
    }
  },
  ...
}
17311731 17311731 17311731

Quote step

In this step the user will fill in all relevant details to receive a quote. The fields on this page are derived from the product module’s quote schema, and do not need to be configured in the configuration file. Read more about how to configure a quote schema for your product in the schemas guide.

You can make small copy and design tweaks in the configuration file, see below for me details.

{
  "quote": {
    "links": {
      "supportEmail": "[email protected]"
    },
    "images": {},
    "wording": {
      "description": "Please complete the steps below to get a personalised quote. Let's dive right in!",
      "coverRejected": "life cover"
    },
    "displayOptionalSections": {}
  },
  ...
}
17311731 17311731

Personal details step

In this step the user will fill in their personal details. The fields captured in this section are standard policyholder policyholder. If multiple identification types are allowed in the product module settings, the form will allow the user to select their identification type and update dynamically.

You can configure the description key, as well as the embed styles which affect the look and feel of the form.

{
  "personalDetails": {
    "links": {},
    "images": {},
    "wording": {
      "description": "Let's get to know you. Please complete your personal details below."
    },
    "displayOptionalSections": {}
  },
  ...
}
17311731

Application step

In this step, additional information can be gathered from the user. The only option that can be configured under this section is wording.description.

The input fields in this step are derived from the product module's application schema, and do not need to configured in the configuration file. This includes the ability to conditionally render fields based on the data received at the quote step. In the case where the product module does not include an application schema, this stage will be skipped in the user flow.

Read more about how to configure an application schema for your product in the schemas guide.

{
  "application": {
    "links": {},
    "images": {},
    "wording": {
      "description": "Please provide some additional details, before we proceed!"
    },
    "displayOptionalSections": {}
  },
  ...
}
17311731

Summary step

This step is where the user can see a summary of the details they have submitted in previous steps, as well as the details of the policy they have applied for. Most sections of this step are standardized and cannot be configured in Workbench. Only the wording.description option and the styles can be configured, as shown below.

{
  "summary": {
    "links": {},
    "images": {},
    "wording": {
      "description": "Need a refresher? Let's walk you through your details."
    },
    "displayOptionalSections": {}
  },
  ...
}
17311731

Payment step

In this step the user is shown a summary of the payment details, such as premium amount and billing date. This is also where they will fill in any required payment details. The allowed payment method types are configurable in the product module billing settings. Note: Currently only the debit order payment method is supported by the Embed sales flow.

17311731

Confirmation page

This is the final step in the Embed sales flow, informing the user that the policy has been issued. The options that can be configured are shown below:

{
  "confirmation": {
    "links": {
      "openClaim": "dinoparks.net/claims",
      "redirectOnCompletedUrl": "issue-policy"
    },
    "images": {},
    "wording": {
      "title": "Confirmation",
      "subTitle": "Thank you for taking out insurance with us.",
      "description": "You are now covered and your policy schedule should arrive in your inbox shortly.",
      "contactNumber": "013 456 7890"
    },
    "displayOptionalSections": {
      "contactNumber": true
    }
  },
    ...
}
17311731