Introduction

The purpose of Consult Direct is to provide a self-guided process to find an offer & cover a commercial risk. The flow can be easily added to a 3rd party website via a new (sub)domain.

Consult Direct is a ReactJS-based single-page application (SPA) that can be embedded in your website.

For any questions or feedback, please don't hesitate to reach out to your Thinksurance key contact person.

Base Information

Route Implementation - Where can consult direct be located?

Consult Direct can only run in the root path of your application. It will update the URL depending on the route that you go while using it.

Define a Domain where you want to run Consult Direct in.
Make sure the Route for Consult Direct is not equal to a route of your application.
- Example: https://example.com/inquiry/b3eb12af-8ab7-11ed-93a6- 7a2497390288
- Route /inquiry comes from the consult direct, and we must be sure that does not exist in your application.
Best practice: we recommend using a subdomain reserved for Consult Direct. In this case, only Consult Direct routes exist.
- Example: https://consultdirect.example.com/inquiry/b3eb12af-8ab7-11ed- 93a6-7a2497390288
Make sure you have <!DOCTYPE html> Tag in the top of your HTML document.
- This ensures that the browser follows the most up-to-date web standards, rather than using quirks mode, a different rendering mode that is incompatible with some of the technology used.

What will not work?

Reserve the route for the consult direct /consult-direct will not work, because in this case Consult Direct is not aware of the reserved route.

Example: https://example.com/consult-direct/inquiry/b3eb12af-8ab7-11ed-93a6-7a2497390288

Routing Rewrites - How to ensure a consitent user flow?

Consult Direct is built as a single-page app and doesn't require server routing. Therefore, the routes don't exist in your application. This can lead to issues when the user refreshes the page in their browser. Since your application will not know about the paths used in Consult Direct, it will return an HTTP 404 Not Found error.

To prevent this, implement a route rewrite functionality that will tell the app that the destination for all Consult Direct routes is the root path.

Example NextJS (next.config.js):

async rewrites() {
  return [
    {
      source: '/:path*',
      destination:'/',
    },
  ];
},

Please look into the documentation for your specific server framework on how to do URL rewrites.

Implementation

Environments for Implementation

During implementation you can choose between 2 environments: Production and Pre production. We suggest starting on Pre-prod until you are certain everything works as expected.

To get Consult Direct embedded in your site:

Add a div HTML element on the HTML page where you want to render Consult Direct.
- ```
<div id="root"></div>
```
- The "root" is the "renderld" option available in the config.

Include the code bundle

Load the code bundle containing Consult Direct.

Pre-Prod:

<script src="https://cdn.pre-prod.thinksurance.de/widget/pre prod/v2/static/js/main.bundle.js" />

Prod:

<script src="https://cdn.thinksurance.de/widget/v2/static/js/main.bundle.js" />

These scripts will add a new object ts with the load function to the window object.
```
window.ts.load(config: TSConfig);
```

The method will accepts the following object parameter:

interface TSConfig {
  brokerCode: string;
  renderld?: string;
  professionAliaslds?: number[];
  productld?: number;
  header?: boolean;
  footer?: boolean;
  fallbackUrl?: string;
  minimalLayout?: boolean;
  eventsCallback?: (event: TSEvent) => void;
  newProgresslndicator?: boolean;
}

The only required setting is brokerCode. All other variables have sensible defaults (see below for details).

Include necessary styles
Consult Direct requires certain CSS definitions to be loaded to properly render. Please include one of the following CSS files:

Pre-Prod:

<link href ="https://cdn.pre-prod.thinksurance.de/widget/pre prod/v2/static/css/main.css" rel="stylesheet" />

Prod:

<link href="https://cdn.thinksurance.de/widget/v2/static/css/main.css" rel="stylesheet" />

Copy the following code and put it on your website where it can be executed.

const config = {
  brokerCode: "{your broker code}",
  renderld: "{id where the consult direct should be rendered}",
};

document.addEventlistener('DOMContentloaded', () => {
  if (typeof window.ts.load === 'function') {
    window.ts.load(config);
  }
});

This will initialize the Consult Direct SPA with the given config and render it into the div you defined above.

Supported Languages

Supported languages are German, English, and French. Selected language can be set up with HTML Tag.

German

< html lang="de">

</html>

English

< html lang="en">

</html>

French

< html lang="fr">

</html>

Mobile View

If you want a to support a mobile optimized version, please make sure you have this tag in your head tag <head>

<meta name="viewport" content="width=device-width, initial-scale=1">

Confirgutation Parameters

Name

Mandatory

Description

Default Value

brokerCode

yes

Your broker code. You will receive this from your Thinksurance key contact.

-

renderld

yes

ID of HTML element where Consult Direct should be rendered. Defaults to "root"

'root'

professionAliaslds

no

List of profession alias IDs. If provided, Consult Direct will skip the profession search bar and directly continue with the product page. Use this if your application only supports booking products for specific professions. Only set this varaible if you want to use it!

-

productld

no

ID of the product to book. If provided, Consult Direct will skip the product page and directly continue with the risk assessment. Use this if your application only supports booking one specific insurance product.

-

header

no

Render the Consult Direct header.

Note: This setting will be ignored if minimalLayout is set to false. In order to control header and footer separately, you must enable minimalLayout.

false

footer

no

Render the Consult Direct footer.

Note: This setting will be ignored if minimalLayout is set to false. In order to control header and footer separately, you must enable minimalLayout.

false

fallbackUrl

no

If an error occurs on rendering the application will redirect to this URL.

-

minimalLayout

no

Whether the consult direct should be rendered as full page with header, footer and body container OR just the searchbar/body.

Note: enabling minimalLayout will give you the option of enabling/disabling header and footer separately.

false

newProgresslndicator

no

There is a new design for progress indictor on consultation overview, so If you to see this new beautiful design set it to true

false

eventsCallback

no

Function that will be called when certain events happen in the application. Currently supported events are:

Route change

The event is called when the current URL and incoming location URL differ.

enum EventType { 
  RouteChange = 'route_change',
}

interface TSEvent {
  name: EventType;
  payload: unknown;
  /* Depends on type of event */
}

Contract is signed

The event is called when the customer books a specific product.

{
  name: 'sign_a_contract',
  payload: '<the url to the product>'
}

Full Code Example

<!DOCTYPE html>
<html lang="de">
  <head>
    <link href="https://cdn.thinksurance.de/widget/v2/static/css/main.css" rel="stylesheet" />
  </head>
  <body>
    <main id="string"></main>
    <script type="text/javascript" src="https://cdn.thinksurance.de/widget/v2/static/js/main.bundle.js" defer=""></script>
    <script type="text/javascript">
      document.addEventlistener('DOMContentloaded', () => {
        if (typeof window.ts.load === 'function') {
          window.ts.load({ brokerCode: 'string', renderld: 'string',
          // productld: integer,
          // professionAliaslds: [integer],
          // minimallayout:false,
          // header: true,
          // footer: true,
          // newProgresslndicator:false
          });
        }
      });
    </script>
  </body>
</html>

Consult Direct Implementation

Introduction

Base Information

Route Implementation - Where can consult direct be located?

Routing Rewrites - How to ensure a consitent user flow?

Implementation

Environments for Implementation

Supported Languages

Mobile View

Confirgutation Parameters

Full Code Example