1 Introduction
2 Base Information
- 2.1 Route Implementation - Where can consult direct be located?
- 2.2 Routing Rewrites - How to ensure a consitent user flow?
3 Implementation
- 3.1 Environments for Implementation
- 3.2 Supported Languages
- 3.3 Mobile View
- 3.4 Confirgutation Parameters
4 Full Code Example

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
1. Load the code bundle containing Consult Direct.
2. Pre-Prod:
  <script src="https://cdn.pre-prod.thinksurance.de/widget/pre prod/v2/static/js/main.bundle.js" />
3. Prod:
4. These scripts will add a new object ts with the load function to the window object.
5. The method will accepts the following object parameter:
  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:
2. Prod:
Copy the following code and put it on your website where it can be executed.
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

English

French

Mobile View

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

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
hideNavigationBar	no	There is a progress bar on the consultation overview 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. ** 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. Contract is signed The event is called when the customer books a specific product.

Thinksurance Public WIKI

Consult Direct Implementation