Consult Direct Implementation

Owned by Alexander von Orloff
Last updated: Aug 08, 2024 by Mostafa Saffari
5 min read

 

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.

  1. Define a Domain where you want to run Consult Direct in.

  2. 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.

  3. 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

  4. 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:

 

  1. 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.

  2. 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).

  3. 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:

  4. 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.

 

 

Full Code Example