Overview
Get API access
API
Overview
Get API access
API

Configuration examples

Note

Below, you will find several example configuration for the Trip Element from real-world integrations. The screenshots shown are illustrations and only updated from time to time.

Reach out to your partner success manager if you require additional examples for your specific use-case.

Defining a Traveller

The following configuration shows how to define the passport of a traveler using the Traveller Model.

elementOptions
{
  "travellers": [
    {
      "nationality": "CAN"
    }
  ]
}

Localize Trip Element

The following configuration shows how to define the language to display the Trip Element in one of the supported languages.

elementOptions
{
  "language": "de-DE"
}

Basic Discovery Placement

📘 Always include a placement

This will help make analytics reports clear, allowing our team to allocate resources more effectively. Not setting a placement can impact your attributions.

index.html
const elementConfig = {
  placement: 'discovery',
};

Trip Element One-Way

index.html
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: '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: '2026-06-22',
      arrivalDate: '2026-06-22',
      // 6. Set the flight number
      flightNumber: 'AB123',
    },
  ],
};

Return Trip

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

index.html
const elementConfig = {
  placement: 'mmb',
  segments: [
    {
      segmentType: 'OUTBOUND',
      origin: {
        countryCode: 'USA',
      },
      destination: {
        countryCode: 'MEX',
      },
      departureDate: '2026-02-22',
      departureTime: '12:59:00',
      arrivalDate: '2026-02-22',
      arrivalTime: '12:59:00',
      flightNumber: 'AB123',
    },
    {
      segmentType: 'RETURN',
      origin: {
        countryCode: 'MEX',
      },
      destination: {
        countryCode: 'USA',
      },
      departureDate: '2026-03-22',
      departureTime: '12:59:00',
      arrivalDate: '2026-03-22',
      arrivalTime: '12:59:00',
      flightNumber: 'XY4321',
    },
  ],
};

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

Return Trip via Connection

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

index.html
const elementConfig = {
  travellers: [
    {
      nationality: 'CAN',
    },
  ],
  placement: 'mmb',
  segments: [
    {
      segmentType: 'OUTBOUND',
      segmentSubType: 'TRANSIT',
      origin: {
        countryCode: 'CAN',
      },
      destination: {
        countryCode: 'USA',
      },
      travelMode: 'AIR',
      departureDate: '2026-06-22',
      arrivalDate: '2026-06-22',
      flightNumber: 'AB123',
    },
    {
      segmentType: 'OUTBOUND',
      origin: {
        countryCode: 'USA',
      },
      destination: {
        countryCode: 'MEX',
      },
    },

    {
      segmentType: 'RETURN',
      segmentSubType: 'TRANSIT',
      origin: {
        countryCode: 'MEX',
      },
      destination: {
        countryCode: 'USA',
      },
      travelMode: 'AIR',
      departureDate: '2026-06-25',
      arrivalDate: '2026-06-25',
      flightNumber: 'XY4321',
    },
    {
      segmentType: 'RETURN',
      origin: {
        countryCode: 'USA',
      },
      destination: {
        countryCode: 'CAN',
      },
    },
  ],
};

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

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.

index.html
const elementConfig = {
  placement: 'mmb',
  segments: [
    {
      segmentType: 'OUTBOUND',
      segmentSubType: 'TRANSIT',
      origin: {
        countryCode: 'DEU',
      },
      destination: {
        countryCode: 'USA',
      },
      travelMode: 'AIR',
      departureDate: '2021-02-22',
      arrivalDate: '2021-02-22',
      flightNumber: 'AB123',
    },
    {
      segmentType: 'OUTBOUND',
      origin: {
        countryCode: 'USA',
      },
      destination: {
        countryCode: 'MEX',
      },
    },

    {
      segmentType: 'RETURN',
      segmentSubType: 'TRANSIT',
      origin: {
        countryCode: 'MEX',
      },
      destination: {
        countryCode: 'CAN',
      },
      travelMode: 'AIR',
      departureDate: '2021-03-22',
      arrivalDate: '2021-03-22',
      flightNumber: 'XY4321',
    },
    {
      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',
    );
  }
}

Multi Transit Trip

This configuration shows a multi-transit trip with three segments on the outbound journey. Two of these segments are transit segments (YYZ -> USA and USA -> MEX) and the third is a regular outbound trip (MEX -> TUR).

index.html
const elementConfig = {
  language: 'en-US',
  segments: [
    // Outbound, First Segment
    {
      segmentType: 'OUTBOUND',
      segmentSubType: 'TRANSIT',
      origin: {
        airportCode: 'YYZ',
      },
      destination: {
        countryCode: 'USA',
      },
      travelMode: 'AIR',
      departureDate: '2024-02-22',
      arrivalDate: '2024-02-22',
    },

    // Outbound, Second Segment
    {
      segmentType: 'OUTBOUND',
      segmentSubType: 'TRANSIT',
      origin: {
        countryCode: 'USA',
      },
      destination: {
        countryCode: 'MEX',
      },
      travelMode: 'AIR',
      departureDate: '2024-02-22',
      arrivalDate: '2024-02-22',
    },

    // Outbound, Third Segment
    {
      segmentType: 'OUTBOUND',
      origin: {
        countryCode: 'MEX',
      },
      destination: {
        countryCode: 'TUR',
      },
      travelMode: 'AIR',
      departureDate: '2024-02-22',
      arrivalDate: '2024-02-22',
    },

    // Return Segment no transit
    {
      segmentType: 'RETURN',
      origin: {
        countryCode: 'ITA',
      },
      destination: {
        countryCode: 'CAN',
      },
      travelMode: 'AIR',
      departureDate: '2024-03-22',
      arrivalDate: '2024-03-22',
    },
  ],
  travellers: [
    {
      nationality: 'FRA',
    },
  ],
  placement: 'mmb',
};

Using Airport & Region Code

index.html
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',
      flightNumber: 'XY4321',
    },
  ],
};

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

Display An Extended Segment

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

index.html
const elementConfig = {
  travellers: [
    {
      nationality: 'CAN',
    },
  ],
  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',
      flightNumber: 'AB123',
    },

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

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

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.

index.html
features: {
    showTitle: false
},

Hide Segment Editor

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

index.html
features: {
    enableSegmentEditor:false,
},

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.

index.html
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

index.html
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',
    );
  }
}