JavaScript SDK V2

sherpa° javascript sdk

Integrate sherpa in a matter of minutes. The sherpa JavaScript SDK provides a convenient wrapper around the sherpa APIs and streamlines the developer experience. Use the SDK to add an Embeddable Element to your web platform.

🚧

App Id

When using the SDK to integrate an Embeddable Element (for example, Travel Restrictions Map), you will need an App Id. Please request one from your contact @ sherpa°.

Setup sherpa° SDK

You need to include the sherpa° SDK on your website by adding the script tag to the head of your HTML file:

<!-- load script -->
<script src="https://sdk.joinsherpa.io/widget.js?appId=APP_ID"></script>

Loading the sherpa° SDK dynamically

If you prefer to load the script asynchronously, you can place the script tag anywhere on your website or load it on-demand. Once the script is loaded, a callback function will be called with a 'loaded' event to indicate that the SDK is ready and a new Embedded Element can be created.

// onSherpaEvent needs to be declared before the script is loaded
function onSherpaEvent(event){
  if(event.type === 'sdkLoaded'){
    // sdk is ready, create and mount new elements
    $sherpa.V2.createElement(....) 
  }
}

// load the script asynchronous
<script src="https://sdk.joinsherpa.io/widget.js?appId=APP_ID" async></script>

🚧

declare onSherpaEvent before the SDK is loaded

Browsers run the code on your page from the top to the bottom. For the sherpa° SDK to work correctly, the javascript code needs to be fully loaded first.

Track what your users are searching

The 'sdkLoaded' event type is not the only one available for you to watch for. By watching for the event type of 'sdkEventRequirementsSearch', which is sent each time a user searches for a trip using either the Trip or Map Element, you can capture valuable analytics about the trip they searched.

Similar to the steps outlined above, by creating a function that watches for an event from the sherpa° SDK, you can capture this analytics data when the event type detected is 'sdkEventRequirementsSearch'.

// onSherpaEvent needs to be declared before the script is loaded
function onSherpaEvent(event){
  if(event.type === 'sdkEventRequirementsSearch'){
    // a trip has been searched
    // capture analytics data from the returned data object here
    // see below for an example of the returned data structre
  }
}

Below is an example of the data structure returned by the browser with the 'sdkEventRequirementsSearch' event.

{type: "sdkEventRequirementsSearch", data: Array[2], scope: "@joinsherpa/v2", elementId: "Y1NDI"…}
data: Array[2]
    0: Object
        data: Object
            attributes: Object
                travelNodes: Array[2]
                    0: Object
                        countryCode: "CAN"
                        departure: Object
                            date: "2022-06-13"
                            time: "00:00"
                            travelMode: "AIR"
                            __proto__: Object
                        type: "ORIGIN"
                        __proto__: Object
                    1: Object
                        arrival: Object
                            date: "2022-06-13"
                            time: "00:00"
                            travelMode: "AIR"
                            __proto__: Object
                        countryCode: "MEX"
                        type: "DESTINATION"
                        __proto__: Object
                traveller: Object
                    nationality: "CAN"
                        vaccinations: Array[1]
                            0: Object
                                status: "FULLY_VACCINATED"
                                type: "COVID_19"
                                __proto__: Object
                            __proto__: Object
                type: "DEPARTURE"
                __proto__: Object
            type: "ITINERARY"
            __proto__: Object
        __proto__: Object
    1: Object
        data: Object
            attributes: Object
                travelNodes: Array[2]
                    0: Object
                        countryCode: "MEX"
                        departure: Object
                            date: "2022-06-20"
                            time: "00:00"
                            travelMode: "AIR"
                            __proto__: Object
                        type: "ORIGIN"
                        __proto__: Object
                    1: Object
                        arrival: Object
                            date: "2022-06-20"
                            time: "00:00"
                            travelMode: "AIR"
                            __proto__: Object
                        countryCode: "CAN"
                        type: "DESTINATION"
                        __proto__: Object
                traveller: Object
                    nationality: "CAN"
                    vaccinations: Array[1]
                        0: Object
                            status: "FULLY_VACCINATED"
                            type: "COVID_19"
                            __proto__: Object
                    __proto__: Object
                type: "RETURN"
                __proto__: Object
            type: "ITINERARY"
            __proto__: Object
        __proto__: Object
elementId: "Y1NDI"
scope: "@joinsherpa/v2"
type: "sdkEventRequirementsSearch"

Did this page help you?