Examples on this page

On this page, you will find examples for configuring the Trip Element in the following ways:

eVisa Trip Element Pre-configuration

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: "CAN"
        }],
        segments: [
          // Outbound Segment
          {
            segmentType: 'OUTBOUND',
            origin: {
              // 3. Define Origin Country:    
              countryCode: 'CAN',
            },
            destination: {
              // 4. Define the Destination Country:    
              countryCode: 'EGY',
            },
            // 5. Define the Departure & Arrival Date
            departureDate: '2021-02-22',
            arrivalDate: '2021-02-22'
          }
        ]
      };
// filter for skdLoaded event then call element
      function onSherpaEvent(event) {
        if (event.type === 'sdkLoaded') {
          $sherpa.V2.createElement('trip', elementConfig).mount('#sherpa-trip-element');
        }
      }
13121312

eVisa and Travel Requirements Pre-Configuration

const elementConfig = {
    // 1. Element Placement: Where the Element is being placed on your site e.g. mmb, discovery            
    placement: "discovery",
    travellers: [{
        nationality: 'CAN', //traveller's passport
        vaccinations: [{
            type: 'COVID_19',
            status: 'FULLY_VACCINATED',
        }, ],
    }, ],
    segments: [{
        segmentType: 'OUTBOUND',
        origin: {
            countryCode: 'CAN',
        },
        destination: {
            countryCode: 'EGY',
        },
        travelMode: 'AIR',
        departureDate: '2021-02-22',
        departureTime: '12:59:00',
        arrivalDate: '2021-02-22',
        arrivalTime: '12:59:00',
    }, ],
};

function onSherpaEvent(event) {
    if (event.type === 'sdkLoaded') {
        $sherpa.V2.createElement('trip', elementConfig).mount('#sherpa-trip-element');
    }
}
19461946

Basic Discovery Placement

📘

Always include a placement

This will help make analytics reports clear, allowing our team to allocate resources more effectively.

const elementConfig = {
  placement: "discovery"
}

// filter for skdLoaded event then call element
      function onSherpaEvent(event) {
        if (event.type === 'sdkLoaded') {
          $sherpa.V2.createElement('trip', elementConfig).mount('#sherpa-trip-element');
        }
      }
20562056

Defining a Traveller

The following configuration shows how to define the passport and vaccination of a traveler using the Traveller and Vaccination Models.

const elementConfig = {
    travellers: [{
        nationality: 'CAN', //traveller's passport
        vaccinations: [{
            type: 'COVID_19',
            status: 'FULLY_VACCINATED', // or NOT_VACCINATED
          },
        ],
      },
    ],
  }

Manage My Booking - Return Trip

The following configuration shows travel restrictions for a return trip from USA to Mexico.

const elementConfig = {
  placement: "mmb",
  segments: [{
      segmentType: 'OUTBOUND',
      origin: {
        countryCode: 'USA',
      },
      destination: {
        countryCode: 'MEX',
      },
      departureDate: '2021-02-22',
            departureTime: '12:59:00',
      arrivalDate: '2021-02-22',
      arrivalTime: '12:59:00',
    },
    {
      segmentType: 'RETURN',
      origin: {
        countryCode: 'MEX',
      },
      destination: {
        countryCode: 'USA',
      },
      departureDate: '2021-03-22',
      // departureTime: '12:59:00',
      arrivalDate: '2021-03-22',
      // arrivalTime: '12:59:00',
    },
  ],
}

// filter for skdLoaded event then call element
      function onSherpaEvent(event) {
        if (event.type === 'sdkLoaded') {
          $sherpa.V2.createElement('trip', elementConfig).mount('#sherpa-trip-element');
        }
      }

Manage My Booking - Return Trip via Connection

The following configuration shows travel restrictions for a return trip from Mexico to Canada via a connection in USA.

20462046

Manage My Booking - Return Trip and outbound via connections

The following configuration shows travel restrictions via connection outbound and return. The use case takes into account origin as Germany (DEU) to Mexico via USA, while the return leg will be Mexico to Germany (DEU) via Canada.

const elementConfig = {
  placement: "mmb",
  segments: [{
      segmentType: 'OUTBOUND',
      segmentSubType: 'TRANSIT',
      origin: {
        countryCode: 'DEU',
      },
      destination: {
        countryCode: 'USA',
      },
      travelMode: 'AIR',
      departureDate: '2021-02-22',
      // departureTime: '12:59:00',
      arrivalDate: '2021-02-22',
      // arrivalTime: '12:59:00',
    },
    {
      segmentType: 'OUTBOUND',      
      origin: {
        countryCode: 'USA',
      },
      destination: {
        countryCode: 'MEX',
      },
    },
    
    {
      segmentType: 'RETURN',
      segmentSubType: 'TRANSIT',
      origin: {
        countryCode: 'MEX',
      },
      destination: {
        countryCode: 'CAN',
      },
      travelMode: 'AIR',
      departureDate: '2021-03-22',
      // departureTime: '12:59:00',
      arrivalDate: '2021-03-22',
      // arrivalTime: '12:59:00',
    },
    {
      segmentType: 'RETURN',      
      origin: {
        countryCode: 'CAN',
      },
      destination: {
        countryCode: 'DEU',
      },
    },
    
  ],

}
// filter for skdLoaded event then call element
      function onSherpaEvent(event) {
        if (event.type === 'sdkLoaded') {
          $sherpa.V2.createElement('trip', elementConfig).mount('#sherpa-trip-element');
        }
      }
18001800

Manage My Booking - Using Airport & Region Code

const elementConfig = {
  placement: "mmb",
  segments: [{
      segmentType: 'OUTBOUND',
      origin: {
        airportCode: 'YYZ',
      },
      destination: {
        regionCode: 'US-NY',
      },
      departureDate: '2021-02-22',
            departureTime: '12:59:00',
      arrivalDate: '2021-02-22',
      arrivalTime: '12:59:00',
    },
   
  ],
}

// filter for skdLoaded event then call element
      function onSherpaEvent(event) {
        if (event.type === 'sdkLoaded') {
          $sherpa.V2.createElement('trip', elementConfig).mount('#sherpa-trip-element');
        }
      }

Manage My Booking - Display An Extended Segment

The following configuration highlights the ability show an extended segment. Consider a trip between USA to Mexico with return from Mexico to USA. The below codes highlights the USA to Mexico leg segment

const elementConfig = {
  placement: 'mmb',
  selected: {
    segment: 1,
    extended: true
  },
  segments: [{
      segmentType: 'OUTBOUND',
      origin: {
        countryCode: 'USA',
      },
      destination: {
        countryCode: 'MEX',
      },
      travelMode: 'AIR',
      departureDate: '2021-02-22',
      departureTime: '12:59:00',
      arrivalDate: '2021-02-22',
      arrivalTime: '12:59:00',
    },

    {
      segmentType: 'RETURN',
      origin: {
        countryCode: 'USA',
      },
      destination: {
        countryCode: 'MEX',
      },
      travelMode: 'AIR',
      departureDate: '2021-03-22',
      departureTime: '12:59:00',
      arrivalDate: '2021-03-22',
      arrivalTime: '12:59:00',
    },
  ],

}

// filter for skdLoaded event then call element
      function onSherpaEvent(event) {
        if (event.type === 'sdkLoaded') {
          $sherpa.V2.createElement('trip', elementConfig).mount('#sherpa-trip-element');
        }
      }
17941794

Manage My Booking - Hide Segments

The following configuration allows you to hide the segments taking a trip that goes from USA to Mexico and has a return leg from Mexico to USA.

const elementConfig = {
  placement: 'mmb',
  selected: {
    segment: 1,
  },
  features: {
    showSegments: false,
  },
  segments: [{
      segmentType: 'OUTBOUND',
      origin: {
        countryCode: 'USA',
      },
      destination: {
        countryCode: 'MEX',
      },
      travelMode: 'AIR',
      departureDate: '2021-02-22',
      departureTime: '12:59:00',
      arrivalDate: '2021-02-22',
      arrivalTime: '12:59:00',
    },

    {
      segmentType: 'RETURN',
      origin: {
        countryCode: 'USA',
      },
      destination: {
        countryCode: 'MEX',
      },
      travelMode: 'AIR',
      departureDate: '2021-03-22',
      departureTime: '12:59:00',
      arrivalDate: '2021-03-22',
      arrivalTime: '12:59:00',
    },
  ],

}

// filter for skdLoaded event then call element
      function onSherpaEvent(event) {
        if (event.type === 'sdkLoaded') {
          $sherpa.V2.createElement('trip', elementConfig).mount('#sherpa-trip-element');
        }
      }
17841784

Manage My Booking - Hide Title

The following configuration allows you to hide the title taking a trip that goes from USA to Mexico and has a return leg from Mexico to USA.

const elementConfig = {
  placement: 'mmb',
  features: {
    showTitle: false
  },
  segments: [{
      segmentType: 'OUTBOUND',
      origin: {
        countryCode: 'USA',
      },
      destination: {
        countryCode: 'MEX',
      },
      travelMode: 'AIR',
      departureDate: '2021-02-22',
      departureTime: '12:59:00',
      arrivalDate: '2021-02-22',
      arrivalTime: '12:59:00',
    },

    {
      segmentType: 'RETURN',
      origin: {
        countryCode: 'USA',
      },
      destination: {
        countryCode: 'MEX',
      },
      travelMode: 'AIR',
      departureDate: '2021-03-22',
      departureTime: '12:59:00',
      arrivalDate: '2021-03-22',
      arrivalTime: '12:59:00',
    },
  ],

}

// filter for skdLoaded event then call element
      function onSherpaEvent(event) {
        if (event.type === 'sdkLoaded') {
          $sherpa.V2.createElement('trip', elementConfig).mount('#sherpa-trip-element');
        }
      }
17901790

Manage My Booking - Hide Segment Editor

The following configuration will allow you to hide the 'Edit my Trip Button

features: {
    enableSegmentEditor:false,
  },
328328 19301930

Show Filter Passport

This configuration will allow you to hide the Passport selector, which is displayed by default.

features: {
    showFilterPassport:false,
  },
19361936

Show Filter Vaccinated

This configuration will allow you to hide the COVID-19 Vaccination selector which is displayed by default.

features: {
    showFilterVaccinated:false,
  },
19301930

Show Results

This configuration allows you to show or hide travel requirements results when the element loads.

features: {
    showResults:false,
  },
19301930

Manage My Booking - Hide 'View all restrictions'

The following configuration allows you to hide 'View all restrictions' link with the below example representing taking a trip that goes from USA to Mexico and has a return leg from Mexico to USA.

const elementConfig = {
  placement: 'mmb',
  selected: {
    segment: 1,
  },
  features: {
    showViewAllLink: false
  },
  segments: [{
      segmentType: 'OUTBOUND',
      origin: {
        countryCode: 'USA',
      },
      destination: {
        countryCode: 'MEX',
      },
      travelMode: 'AIR',
      departureDate: '2021-02-22',
      departureTime: '12:59:00',
      arrivalDate: '2021-02-22',
      arrivalTime: '12:59:00',
    },

    {
      segmentType: 'RETURN',
      origin: {
        countryCode: 'USA',
      },
      destination: {
        countryCode: 'MEX',
      },
      travelMode: 'AIR',
      departureDate: '2021-03-22',
      departureTime: '12:59:00',
      arrivalDate: '2021-03-22',
      arrivalTime: '12:59:00',
    },
  ],

}

// filter for skdLoaded event then call element
      function onSherpaEvent(event) {
        if (event.type === 'sdkLoaded') {
          $sherpa.V2.createElement('trip', elementConfig).mount('#sherpa-trip-element');
        }
      }
17821782

Better Reporting

The following configuration allows for better reporting through analytics by passing utm tags

const elementConfig = {
  placement: 'mmb',
  queryParams: {
    utm_medium: 'medium',
    utm_source: 'source',
    utm_campaign: 'campaign'
  },
  segments: [{
      segmentType: 'OUTBOUND',
      origin: {
        countryCode: 'USA',
      },
      destination: {
        countryCode: 'MEX',
      },
      travelMode: 'AIR',
      departureDate: '2021-02-22',
      departureTime: '12:59:00',
      arrivalDate: '2021-02-22',
      arrivalTime: '12:59:00',
    },

    {
      segmentType: 'RETURN',
      origin: {
        countryCode: 'USA',
      },
      destination: {
        countryCode: 'MEX',
      },
      travelMode: 'AIR',
      departureDate: '2021-03-22',
      departureTime: '12:59:00',
      arrivalDate: '2021-03-22',
      arrivalTime: '12:59:00',
    },
  ],

}

// filter for skdLoaded event then call element
      function onSherpaEvent(event) {
        if (event.type === 'sdkLoaded') {
          $sherpa.V2.createElement('trip', elementConfig).mount('#sherpa-trip-element');
        }
      }

Setting a Cookie Policy

The following configuration sets a cookie policy that allows all cookies on the Element. This cookie policy will also apply to all existing and future Embedded Elements and Application Widgets

const elementConfig = {
  placement: "discovery",
  cookieConsentPreferences: ['ad_storage', 'analytics_storage', 'functionality_storage', 'personalization_storage', 'security_storage']
}

// filter for skdLoaded event then call element
      function onSherpaEvent(event) {
        if (event.type === 'sdkLoaded') {
          $sherpa.V2.createElement('trip', elementConfig).mount('#sherpa-trip-element');
        }
      }

To specify a restrictive cookie policy, include only the 'functionality_storage' and 'security_storage' cookie consent types

const elementConfig = {
  placement: "discovery",
  cookieConsentPreferences: ['functionality_storage', 'security_storage']
}

// filter for skdLoaded event then call element
      function onSherpaEvent(event) {
        if (event.type === 'sdkLoaded') {
          $sherpa.V2.createElement('trip', elementConfig).mount('#sherpa-trip-element');
        }
      }