Events View#

The Events view displays a carousel of upcoming events happening in a given destination within a specified date range. Events are sourced from the Amadeus Discover Quick Connect API and include concerts, festivals, sports, cultural gatherings, and more.

Clicking on an event card navigates the user to the relative Event Detail view.

Note

Events are not available for every destination, and the view is only supported for the following languages: en, fr, es, de, it, zh, pt. If no events can be found for the requested destination, or if the current language is not supported, the Events view hides itself automatically. See the Widget events for host section below to detect this from the host page.

Standalone Path

This view is NOT available in standalone mode

Widget Config

<traveler-widget
        channel-uuid="{yourChannelId}"
        recommendations-events-params="{params}"
        view="recommendationsEvents">
</traveler-widget>

Events View Parameters#

Here is an example on how to configure the White Label widget to display the Events view.

Configuration used in the example:

Note

You can check the whole parameters in our widget builder.

Note

The distance from hotel displayed on each event card is computed between the geocoordinates passed as parameters (lat / lon) and the geocoordinates of the event.

Parameter	Value
maxEvents	`10`
iataCode	`PAR`
radius	`50`
startDate	`2026-07-01`
endDate	`2026-07-31`
currency	`EUR`
language	`FR`
flow-target	`modal`
lat	`40.718886`
lon	`-74.046808`
extendDays	`3`
products-layout	`mini-list`

Events View preview#

Widget events for host#

The Events view emits the traveler-widget-events-interaction browser event that the host page can listen to.

window.addEventListener('traveler-widget-events-interaction', event => {
  console.log(event.detail);
});

The action field in event.detail identifies what happened:

action	When it fires	Additional fields
`event-card-click`	User clicks on an event card in the list or carousel.	`widget: 'events'`, `productId: string`
`event-details-modal-close`	User closes the event details modal (`flow-target: modal` only).	`widget: 'events'`, `productId: string`

The Events view also emits the traveler-widget-events-hidden browser event whenever the events carousel cannot be displayed, so the host page can react (e.g. hide a surrounding section) without inspecting product data directly.

window.addEventListener('traveler-widget-events-hidden', event => {
  console.log(event.detail);
});

The reason field in event.detail identifies why the view is hidden:

reason	When it fires	Additional fields
`no-events-for-location`	No events are available for the requested destination.	`iataCode: string`
`unsupported-language`	The current widget language is not part of the supported events languages.	`language: string`

Multi-language carousel title#

The Events carousel title can be translated per language through the recommendationEventCarousel property of your channel’s Global Configuration. Reach out to your Implementation Manager to have it set up.

{
  "recommendationEventCarousel": {
    "title": {
      "en": "Upcoming events",
      "fr": "Événements à venir"
    }
  }
}

If no translation is available for the traveler’s current language, the en value is used as a fallback.