Introduction
This guide will show you how to embed and configure the Map Element on your web page. By integrating the Map 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 Map Element
Place an empty div element in your site's HTML file where you want the Map Element to appear.
<div id="sherpa-map-element"></div>
Use the sherpa° SDK to create an instance of the Map 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 Map 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('map', elementConfig).mount('#sherpa-map-element')
You should now see the Map 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 origin country.
Extend the elementConfig
object with the appropriate information.
const elementConfig = {
defaultNationality: "GBR",
trip: {
originCountry: 'GBR',
},
}

5. 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 = {
defaultNationality: "GBR",
trip: {
originCountry: 'GBR',
},
placement: 'discovery',
queryParams: {
utm_source: 'email',
utm_medium: 'newsletter',
utm_campaign: 'summer-return-to-travel'
}
}