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"
Updated 3 months ago