GuidesAPI ReferenceChangelogGet API Access
Guides

eVisa Trip Element Quick Start

Get up and running in 5 minutes

Suggest Edits

Trip Element

Implementing the eVisa 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.

Video Link
You can find a video walkthrough of this Quick Start here: Link

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º.

You will need to select the appropriate URL and APP_ID depending on whether you are using our Sandbox or Production environment: 

<!-- PRODUCTION Environment -->
<script src="https://sdk.joinsherpa.io/widget.js?appId={{APP_ID}}" defer></script>

<!-- SANDBOX Environment -->
<script src="https://sdk-sandbox.joinsherpa.io/widget.js?appId={{SANDBOX_APP_ID}}" defer>"</script>

Step 2: Place
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. 

<script>
	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');
	}
} </script>

You should see the Trip Element appear on your page.

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 Trip Element:

  1. Element placement
  2. Traveller's nationality
  3. Origin
  4. Destination
  5. Departure and arrival date
  6. Flight Number

📘

Choose which properties to pre-configure

In the example below we are pre-configuring the above properties that are common in a Manage My Booking (MMB) page. These were chosen for demonstration purposes only. For your use case, you can choose to pre-configure all, some, or none of these properties.

The data passed as a part of configuration will also be used to pre-fill the application of the traveller. This will reduce the probability of mistakes and the application time, and ultimately lead to a better user experience.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://sdk-sandbox.joinsherpa.io/widget.js?appId=<<YOUR_APP_ID>>" defer></script>
  </head>
  <body>
    <div id='sherpa-trip-element'></div>
    <script type='text/javascript'>
      const elementConfig = {
        // 1. Element Placement: Where the Element is being placed on your site e.g. mmb, discovery            
        placement: "mmb",
        travellers: [{
          // 2. Define the traveller's Nationality:
          nationality: "USA"
        }],
        segments: [
          // Outbound Segment
          {
            segmentType: 'OUTBOUND',
            origin: {
              // 3. Define Origin Airport:    
              airportCode: 'JFK',
            },
            destination: {
              // 4. Define the Destination Airport:    
              airportCode: 'HAN',
            },
            // 5. Define the Departure & Arrival Date
            departureDate: '2021-02-22',
            arrivalDate: '2021-02-22',
            // 6. Set the flight number
            flightNumber: 'AB123'
          }
        ]
      };

      function onSherpaEvent(event) {
        if (event.type === 'sdkLoaded') {
          $sherpa.V2.createElement('trip', elementConfig).mount('#sherpa-trip-element');
        }
      }
    </script>
  </body>
</html>

The output of the above example is shown below:

Updated 6 months ago

What’s Next