Twim
 

Trip Element

Last modified: 13 diciembre 2023

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 SDK

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

<!-- PRODUCTION Environment -->
<script src="https://sdk.joinsherpa.io/widget.js?appId={{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="trip-element"></div>

Step 3: Create element

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

const elementConfig = {
    language: 'es-ES',
    placement: "mmb",
    segments: [
        {
            segmentType: 'OUTBOUND',
            destination: {countryCode: 'ESP',},
        },
        {
            segmentType: 'RETURN',
            origin: {countryCode: 'ESP',},
        }
    ]
    };
    function onSherpaEvent(event) {
    // Ensure that the sdk is loaded before creating the element:
    if (event.type === 'sdkLoaded') {
        $sherpa.V2.createElement('trip', elementConfig).mount('#trip-element');
    }
}

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 & Travel Requirements Trip Element:

  • Element placement

  • Traveller's nationality

  • COVID-19 vaccination status

  • Origin

  • Destination

  • Departure and arrival date

Choose which properties to pre-configure

In the example below we are pre-configuring the above properties. These were chosen for demonstration purposes only. For your use case, you can choose to pre-configure all, some, or none of these properties

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('#trip-element');
    }
}

note

Powered By Sherpaº