Insurance Recommendation

Passing cart items

Ath the point when you want to request an insurance offer pass the following parameters to the SDK. Make sure to repeat this step every time when one of the parameters gets updated (e.g. the journey's start has changed).

vern.travels([{
    start: '2019-09-01T17:00:00.000Z',
    end: '2019-09-01T19:00:00.000Z',
    activity: 'skiing',
    from: 'Hungary'
    to: 'France',
    transportation: null,
    travellerGroup: 'family'
    adults: 2,
    children: 3,
    currency: 'HUF'
}]);

Where:

  • currency: currency code (currently only HUF is allowed)
  • start: start date of the event as UTC ISO8601 string (eg: 2019-04-11T13:03:54.002Z)
  • end: end date of the event as UTC ISO8601 string (eg: 2019-04-11T15:03:54.002Z)
  • activity: type of the activity during the trip, it can be either skiing, sightseeing or beach vacation
  • from: country of departure
  • to: country of arrival
  • transportation: type of transportation, it be either car, plane or null (use null for public transport or if you don't want to receive special discount for plane or car)
  • travellerGroup: type of traveller group, it can be either: single, partner, family, kids or friends
  • adults: number of adults
  • children: number of children
  • currency: the currency the quote should be returned in

Note: don't forget to wait until the SDK is ready.

Loading a recommendation

The Vern backend will attempt to find a recommended configuration for the given contents of the cart. At the start of this process, the SDK fires the quote.requested event, in order to make the display of a loading state available.

Although this step improves the user experience, it is only optional.

vern.on('quote.requested', function() {
    console.log('Display loading bar');
});

Display available recommendation

This event fill be fired when there is an available insurance for the current cart:

vern.on('quote.create.succeeded', function(insurance) {
    console.log(insurance.price, insurance.currency);
});

In the callback you'll receive an object with the following structure:

{
    "price": 1340, // price of the insurance
    "currency": "HUF" // currency of the insurance
}

Once you receive an available insurance you can either automatically choose it or let the user decide whether they want activate it.

vern.on('quote.create.succeeded', function(insurance) {
    vern.open();
});

or

vern.on('quote.create.succeeded', function(insurance) {
    var activateButton = document.createElement('button');
    activateButton.addEventListener('click', () => vern.open(), false);
});

If you are a Vern partner, we will also provide you a ready-made example component to display and select the insurance.

Store the recommendation

After the insurance modal was activated and the customer filled out all the required information, the SDK will fire the quote.configured event and you can add the insurance to the cart.

Please note that the vern.travels() event shouldn't be called this time!

vern.on('quote.configured', function(insurance) {
    storeOnBackend(insurance.quoteId)
});

The quote is an identifier of the created recommendation which you should store on your backend and let us know once the order on your side has been fulfilled.

Delete recommendation from the cart (optional)

If the user decides to remove the insurance from the cart, you have to call vern.remove(), so we can invalidate the created recommendation.

Control the modal (optional)

In any case if you have to control the display of the insurance modal from the content, you can call vern.open() to open, and vern.close() to close the modal. Be aware that force closing the modal might result in loss of entered input.

← ConfigurationFinalise Purchase →