Introduction
This guide will show you how to embed and configure the Trip Element on your web page. By integrating the Trip Element with the sherpa° SDK, you can access a myriad of customizations that help personalize the customer experience on your platform.
You will learn how to pre-fill a traveller's origin and destination and show content localized for the user.
1. Set up sherpa° SDK
You will include the sherpa° SDK by adding a script tag to the head of your HTML file and including your personalized APP_ID (provided by sherpa°).
<script src="https://sdk.joinsherpa.io/widget.js?appId=APP_ID"></script>
2. Embed Trip Element
Place an empty div element in your site's HTML file where you want the Trip Element to appear.
<div id="sherpa-trip-element"></div>
Use the sherpa° SDK to create an instance of the Trip Element object and attach it to the DOM of your site by mounting it to an existing HTML element on your page.
The mount method accepts a valid CSS Selector.
Always include placement
When embedding the Trip Element for engagement and conversion tracking, include a placement attribute. Without the placement, analytics reports will be limited.
const elementConfig = {
placement: "discovery"
}
$sherpa.V2.createElement('trip', elementConfig).mount('#sherpa-trip-element')
You should now see the Trip Element appear on your page.
3. Localization (Optional)
Add a language parameter to show information in your user's preferred language. See the list of supported languages here in our help centre.
const elementConfig = {
language: 'es-ES'
}
4. Traveller Details (Optional)
Personalize the experience for the traveller by pre-filling their passport and vaccination status.
Extend the elementConfig object with information about the traveller. The configuration only supports a single traveller.
Learn more about the Traveller Model from our official product documentation.
What if I don't have this information?
We recommend using the following values by default:
- Status:
FULLY_VACCINATED - Nationality: infer from IP or the origin country
const elementConfig = {
travellers: [{
nationality: 'CAN', //traveller's passport nationality
vaccinations: [{
type: 'COVID_19',
status: 'FULLY_VACCINATED',
},
],
},
],
}
5. Itinerary (Optional)
The Trip Element can be configured to show travel restrictions for a specific itinerary. You can do this for simple one-way flights or complex itineraries with virtual connecting layovers.
Extend the elementConfig object with the itinerary.
Learn more about itineraries from our official product documentation.
const elementConfig = {
travellers: [{
nationality: 'CAN',
vaccinations: [{
type: 'COVID_19',
status: 'FULLY_VACCINATED',
},
],
},
],
segments: [{
segmentType: 'OUTBOUND',
origin: {
countryCode: 'CAN',
},
destination: {
countryCode: 'USA',
},
travelMode: 'AIR',
departureDate: '2022-06-06',
arrivalDate: '2022-06-06',
},
{
segmentType: 'RETURN',
origin: {
countryCode: 'USA',
},
destination: {
countryCode: 'CAN',
},
travelMode: 'AIR',
departureDate: '2022-06-13',
arrivalDate: '2022-06-13',
},
],
}
6. Analytics (Optional)
Improve analytics reports by specifying standard UTM tags. These tags will show up in your analytics reports provided by sherpa°.
The utm tags are not manipulated by sherpa°.
Extend the elementConfig object with analytics.
Learn more about analytics here in our help centre.
const elementConfig = {
placement: "discovery",
queryParams: {
utm_source: "email",
utm_medium: "newsletter",
utm_campaign: "summer-return-to-travel"
},
travellers: [{
nationality: 'CAN',
vaccinations: [{
type: 'COVID_19',
status: 'FULLY_VACCINATED',
},
],
},
],
segments: [{
segmentType: 'OUTBOUND',
origin: {
countryCode: 'CAN',
},
destination: {
countryCode: 'USA',
},
travelMode: 'AIR',
departureDate: '2022-06-06',
arrivalDate: '2022-06-06',
},
{
segmentType: 'RETURN',
origin: {
countryCode: 'USA',
},
destination: {
countryCode: 'CAN',
},
travelMode: 'AIR',
departureDate: '2022-06-13',
arrivalDate: '2022-06-13',
},
],
}
