SDK Widget

The Distribusion JS SDK allows you to easily integrate a powerful search engine on your website.

The goal of this document is to explain how to integrate the Distribusion JS SDK.

Main Features

We have two main options at this moment in the JS SDK.

Search Widget

The best option when you have many routes and you are not sure about which one the user wants to choose. The main features of this search engine are

1. Search can be done for a station, city or area.
2. To dynamically display the active departure options based on the carriers enabled for your account.
3. To dynamically display the active arrival options depending on the chosen departure.
4. Autocomplete and auto-suggestion feature for departure and arrival stations.
5. Date selector for the trip
6. Selection of one-way or a return ticket
7. The number of passengers
8. The Departure date time (interesting for high-frequency routes like airport transfers)

Route Widget

The best option is when you provide only one route on the page and you know in advance the trip that the user is going to search for. This is really useful for carrier websites that provide only city-to-airport transfers.

Set Up

The first step to use the Distribusion JavaScript SDK is to include it on your page. This needs to be done for both widgets.

Adding the SDK

 
<script src="https://book.distribusion.com/sdk.1.0.0.js"></script>
<link href="https://book.distribusion.com/sdk.1.0.0.css"> rel="stylesheet">

Once the Distribusion JS SDK is added to your page you can initialise it.

Search Widget Set Up

Initialize the Widget

When you load the page, you should use the following function to initialize the search engine.

 
<div id="distribusion-search"></div>
<script src="https://book.distribusion.com/sdk.1.0.0.js"></script>
<link href="https://book.distribusion.com/sdk.1.0.0.css" rel="preload">
<script>
  window.addEventListener('load', () => {
    const root = document.getElementById('distribusion-search')

    Distribusion.Search.mount({
      root,
      partnerNumber: {retailer_partner_number},
      locale: 'en',
      currency: 'EUR', // optional
      defaults: { // optional 
        departureStation: 'CODE', // or
        departureArea: 'CODE', // or
        departureCity: 'CODE',  
        arrivalStation: 'CODE', // or
        arrivalArea: 'CODE', // or
        arrivalCity: 'CODE'  
      },
      utm: { // optional
        utm_campaign: 'VALUE',
        utm_content: 'VALUE',
        utm_id: 'VALUE',
        utm_medium: 'VALUE',
        utm_source: 'VALUE',
        utm_term: 'VALUE'
      }
   })
})
</script>

Search Redirection

The widget will handle the search redirection for users. The user will be redirected to the result page.

Route Widget Set Up

Initialize the Widget

When you load the page, you should use the following function to initialize the search engine.

 
<div id="distribusion-route"></div>
<script src="https://book.distribusion.com/sdk.1.0.0.js"></script>
<link href="https://book.distribusion.com/sdk.1.0.0.css" rel="preload">
<script>
    window.addEventListener('load', () => {
        const root = document.getElementById('distribusion-route')
        Distribusion.Route.mount({
            root,
            partnerNumber: 222222,
            carrierCode: ‘NBEA’,
            departureStation: ‘FRPARPBE’,
            arrivalStation: ‘FRPARABE’,
            locale: ‘en’,
            currency: 'EUR' // optional
        })
    })
</script>

Redirection

The widget will handle the redirection for users. The user will be redirected to the express checkout page.

Layout options

We have two layout options for the widget: 1) Vertical, 2) Horizontal