eVisa & Travel Requirements Trip Element Quick Start

Get up and running in 5 minutes

Trip Element

Implementing the Trip Element with the SDK is quick and simple.

In the following guide, we will show you how to embed the Trip Element on a page in 3 simple steps.

We will also show you some additional customization options for more advanced users.

Step 1: Setup sherpa° SDK

You need to include the sherpa° SDK by adding the script tag to the head of your HTML file and include your unique APP_ID provided by sherpaº.

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

Step 2: Place <div> tag

Place an empty <div> tag on your page where you want the Trip Element to appear.

<div id="sherpa-trip-element"></div>

Step 3: Create element

Use the sherpaº SDK to create an instance of the Trip Element and mount it to the <div> tag you created in step 2.

const elementConfig = {
  placement: "discovery"
}

function onSherpaEvent(event) {
// Ensure that the sdk is loaded before creating the element:
  if (event.type === 'sdkLoaded') {
        $sherpa.V2.createElement('trip', elementConfig).mount('#sherpa-trip-element');
  }
}

You should see the Trip Element appear on your page.

20882088

Personalization

To provide the best user experience, you can pre-fill the Trip Element with a traveller's details.

In the example below, we will pre-configure the following parameters for an eVisa & Travel Requirements Trip Element:

  1. Element placement
  2. Traveller's nationality
  3. COVID-19 vaccination status
  4. Origin
  5. Destination
  6. Departure and arrival date
const elementConfig = {
  // 1. Element Placement: Where the Element is being placed on your site e.g. mmb, discovery 
  placement: "discovery",
  travellers: [
    {
      // 2. Define the traveller's Nationality:
      nationality: "USA",
      // 3. Define the traveller's Vaccination Status:
      vaccinations: [
      {
          type: "COVID_19",
          status: "FULLY_VACCINATED"
      }
      ]
    }
  ],
  segments: [
    // Outbound Segment
    {
      segmentType: 'OUTBOUND',
      // 4. Define Origin Country:
      origin: {
        countryCode: 'USA',
      },
      destination: {
        // 5. Define the Destination Country:
        countryCode: 'TUR',
      },
      
      // 6. Define the Departure & Arrival Date
      departureDate: '2022-11-25',
      arrivalDate: '2022-11-25',
    },
    // Return Segment
    {
      segmentType: 'OUTBOUND',
      origin: {
        countryCode: 'TUR',
      },
      destination: {
        countryCode: 'USA',
      },
      departureDate: '2022-12-02',
      arrivalDate: '2022-12-02',
    }
  ]
}

function onSherpaEvent(event) {
  // Ensure that the sdk is loaded before creating the element:
        if (event.type === 'sdkLoaded') {
          $sherpa.V2.createElement('trip', elementConfig).mount('#sherpa-trip-element');
        }
      }

The output of the above example is shown below:

21222122

What’s Next