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" defer></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
console.log(JSON.stringify(event.data));
}
}
By Request Only
The
sdkEventRequirementsSearchis a Feature Flag which can be turned on by request. Please contact your PSM if you would like to use it.
Below is an example of the data structure returned by the browser with the sdkEventRequirementsSearch event.
[
{
"data": {
"type": "TRIP",
"attributes": {
"locale": "en-US",
"traveller": {
"passports": [
"USA"
],
"vaccinations": [
{
"type": "COVID_19",
"status": "FULLY_VACCINATED"
}
]
},
"travelNodes": [
{
"type": "ORIGIN",
"departure": {
"date": "2022-12-21",
"time": "00:00",
"travelMode": "AIR"
},
"locationCode": "USA"
},
{
"type": "DESTINATION",
"arrival": {
"date": "2022-12-21",
"time": "00:00",
"travelMode": "AIR"
},
"locationCode": "MEX"
}
]
}
}
},
{
"data": {
"type": "TRIP",
"attributes": {
"locale": "en-US",
"traveller": {
"passports": [
"USA"
],
"vaccinations": [
{
"type": "COVID_19",
"status": "FULLY_VACCINATED"
}
]
},
"travelNodes": [
{
"type": "ORIGIN",
"departure": {
"date": "2022-12-28",
"time": "00:00",
"travelMode": "AIR"
},
"locationCode": "MEX"
},
{
"type": "DESTINATION",
"arrival": {
"date": "2022-12-28",
"time": "00:00",
"travelMode": "AIR"
},
"locationCode": "USA"
}
]
}
}
}
]
Updated almost 2 years ago