Table of Contents

style	none

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

...

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.

...

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.

...

Code Block

language	js

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

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

IMPLEMENTATION

...

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.

...

Add a div HTML element on the HTML page where you want to render Consult Direct.
- Code Block
  language html
  <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:

Code Block

language	html

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

Prod:

Code Block

language	html

<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.
Code Block
language js
window.ts.load(config: TSConfig);

The method will accepts the following object parameter:

Code Block

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

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:
1. Pre-Prod:
  Code Block
  language html
  <link href ="https://cdn.pre-prod.thinksurance.de/widget/pre prod/v2/static/css/main.css" rel="stylesheet" />
2. Prod:
  Code Block
  language html
  <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.

Code Block

language	js

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.

...

Code Block
< 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>

Code Block

language	html

<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

newProgresslndicatorhideNavigationBar

no

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

false

which you can use to navigate between steps. If you hide it (set this config to true), you will no longer see this progress indicator.

false

callbackUrlOnQaSubmit

no

If you set a URL to this field, the behavior of the questionnaire submit button will change and redirect you to the URL that you set to this field instead of showing the result page.

This redirection works with the action form method which the method is POST and the body includes.

Code Block
inquiryId: string; jwt: string; inquiryHash: string;

** This config is used for specific reasons, so do not use this config without consulting our experts.

-

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.

Code Block

language	typescript

enum EventType { 
  RouteChange = 'route_change',
}

Code Block

language	typescript

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.

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

...

Full Code Example

Code Block

language	html

<!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:falsehideNavigationBar?: boolean;
          // callbackUrlOnQaSubmit?: string;
          });
        }
      });
    </script>
  </body>
</html>

Versions Compared

Old Version 1

New Version Current

Key

Introduction

BASE INFORMATION

Base Information

Route Implementation - Where can consult direct be located?

Routing Rewrites - How to ensure a consitent user flow?

IMPLEMENTATION

Implementation

Environments for Implementation

Supported Languages

Mobile View

Confirgutation Parameters

Full Code Example

Page Comparison

Versions Compared

Old Version 1

New Version Current

Key

Introduction

BASE INFORMATION

Base Information

Route Implementation - Where can consult direct be located?

Routing Rewrites - How to ensure a consitent user flow?

IMPLEMENTATION

Implementation

Environments for Implementation

Supported Languages

Mobile View

Confirgutation Parameters

Full Code Example