Booking Path Sales Widget
Sitata is able to distribute a number of different types of insurance and assistance products in a variety of different configurations depending on geographies, type of insurance requested, type of trip, and many other factors. This can make designing an API workflow challenging.
Typically, other providers will have an affiliate link and landing page for you, but this introduces additional friction to the purchase and forces your customer to visit a different website. Instead, with our widget, you will be able to sell our products directly within your booking path, allowing for a much easier integration.
This widget is for those that wish to distribute our products on their booking path with minimal code interaction. With just a few lines of code, you can embed this widget within your booking path and start distributing our travel protection products in a matter of minutes.
info
If you are looking for an out-of-booking-path option for hosing sales on your website on a dedicated page, please see Travel Assistance and Insurance Sales Widget
info
We're not like other insurers. Instead of only reacting to bad situations, we proactivly ensure our policyholders stay safe and have a smooth journey. All our plans or policies will include our other services such as our flight tracking service, real-time threat or disruption alerts, telemedicine, and 24/7/365 easy chat emergency assistance. Still wondering how to quickly add insurance to your existing offering? We have global coverage. Contact us and we'll get you up and running in no time!
Getting Started
Embedding the widget into your page is straightforward and can be accomplished with a few lines of code.
To start, make a reference to the widget javascript in your html layout. This widget will inject its content when the widget is started.
<!-- this html div element will contain the widget -->
<div id="insure"></div>
<!-- put this script tag just before your closing </body> tag -->
<script async type="text/javascript" src="https://www.sitata.com/widgets/sitata-inpath-insure.js"></script>
Next, you will need to wait for the widget to inject itself into the page before you can configure it. You can do this by listening on the document object for the sitata:insureReady event.
function startWidget() {
// initialize the widget here
}
window.document.addEventListener('sitata:inpathInsureReady', startWidget)
Lastly, you should initialize the widget with any necessary configuration options.
function startWidget() {
var el = document.getElementById("insure")
// your organization's public token
var token = "<YOUR PUBLIC TOKEN HERE>";
// your organization's identifier
var orgId = "<YOUR ORG ID HERE>";
// sitata will provide a dedicated support email for you
var email = "[email protected]";
// to filter certain products, you can specify productIds (optional)
var productIds = ['sit-insure-1', 'sit-insure-2']
// mandatory - travel details
var trip = {
start: "2024-09-08",
finish: "2024-09-15",
total_cost: 56900,
// keep destination dates in yyyy-mm-dd format
destinations: [
{
country_code: "ES",
entry_date: "2024-09-08",
exit_date: "2024-09-15"
}
],
// please refer to our full API documentation for
// types of itinerary segments that you might be able to provide
air_segments: [
{
airline: "TUI",
arrival_datetime: "2024-09-08T12:25:00",
departure_datetime: "2024-09-08T06:25:00",
destination: "ZTH",
destination_country: "GR",
flight_number: "1744",
iata_code: "TOM",
number_of_pax: 5,
origin: "GLA",
origin_country: "GB",
price: 1771.0
},
{
airline: "TUI",
arrival_datetime: "2024-09-15T15:30:00",
departure_datetime: "2024-09-15T13:25:00",
destination: "GLA",
destination_country: "GB",
flight_number: "1745",
iata_code: "TOM",
number_of_pax: 5,
origin: "ZTH",
origin_country: "GR",
price: 0.0
}
],
hotel_segments: [
{
checkin_date: "2024-09-08T13:00:00",
checkout_date: "2024-09-15T13:00:00",
country: "GR",
hotel_name: "Majestic Hotel and Spa",
lat: 37.72778,
lng: 20.86414,
price: 994.91,
room_type: "Family Room"
},
{
checkin_date: "2024-09-08T13:00:00",
checkout_date: "2024-09-15T13:00:00",
country: "GR",
hotel_name: "Majestic Hotel and Spa",
lat: 37.72778,
lng: 20.86414,
price: 795.93,
room_type: "Standard Room"
}
]
}
// this is the primary purchaser / account holder
// to which the policy will be assigned under
let user = {
// if you do not know the birthday or email
// information at this point, you may omit it.
birthday: "1948-09-12",
email: "[email protected]",
name: "Kingsley Finlay",
address: {
address1: "587 Bank Avenue",
city: "Falkirk",
country: "United Kingdom",
postal_code: "FK3 8QR"
}
}
// these are the rest of the travellers.
// if you do not have the birthday information or name
// at this point, you may omit it. However, the total
// number of travellers is required. You may provide
// empty/null beneficiaries and you may also
// provide an empty list in the case of a solo-traveller.
let beneficiaries = [
{
birthday: "1984-12-06",
home_country: "GB",
name: "Doug Finlay"
},
{
birthday: null,
home_country: "GB",
name: null
}
]
let departureCountryCode = "GB"
let currencyCode = "GBP"
// e.g "US-CA" for California, USA.
// in this example, state is not necessary.
let residentState = null
window.sitataWidget = new window.Sitata.inpathInsure(el, {
orgId: orgId,
token: token,
contactEmail: email,
productIds: productIds,
currencyCode: currencyCode,
trip: trip,
user: user,
otherTravellers: beneficiaries,
departureCountryCode: departureCountryCode,
residentState: residentState
})
// start the widget
window.sitataWidget.run()
}
warning
Note how the widget instance was attached to the browser's window object. This will come in handy later when you will need to execute a few functions from the widget to help complete the sale.
CSS Styles
This widget is intentionally styled with minimum styles. With the exception of some color variables, all styles are nested within a class named sit-ins-wdg which wraps the widget content.
Feel free to experiment with your own css overrides.
Next we will explain how to complete a sale using this widget.
Caching
The widget will save any user selections to the browser's local storage whenever possible. This will ensure that the user's selections are persisted while the user navigates back and forth through your booking/checkout workflow.
In order to invalidate the cache, you can specify a sessionId or a sessionTimeout value. The sessionId will take precedence and it is encouraged that this field be used whenever possible. The sessionId should be a unique id that is generated for the session. For example, you might already have a unique identifier for the user's checkout/cart/booking workflow.
If a sessionId is not specified, the default sessionTimeout value will be used. This value is 24 hours (in milliseconds). After 24 hours, the cache will be invalidated and the user's selections will be cleared. You can override the value for sessionTimeout by specifying a different integer value.
warning
It is highly encouraged to set the sessionId value to the unique checkout/cart/booking id which is likely already available to you. This will allow the user's selections to be automatically persisted as they navigate your checkout/booking workflow.
General Workflow
After successful initialization of the widget, some products should be on display for selection. Following product selection, the following steps will need to be completed.
- Check the validity status of the widget.
- Use the widget to obtain a final Sales Quote.
- Upon successful payment in your booking/checkout workflow, adjust the Sales Quote
request_paramsfield to have the correctUserandBeneficiarydetails (post-purchase). Send the details to Sitata to register the sale.
Let's continue to see some additional details about how to perform these steps and complete the sale.