Journey List Embed
Building an intuitive interface for finding and comparing journeys can be much more complex than it first seems. The All Aboard Journey List embed is a great way to display a list of journeys between two locations with minimal effort. It includes streamed results, availability and indicative pricing information.
The Journey List will fetch journeys from the All Aboard API and display them in a list. It will also try and fetch availability for the journeys. Clicking on "Find tickets" will call getJourneyoffer and display the results.
Selecting a journey offer will emit the aa-journey-list:select event with the selected journey offer id in the detail property.
The Journey List is fully responsive and will adapt to the screen size of the user. Scroll down to see an example of the Journey List in action.
Getting Started
To add the Journey List to your website, you first need to load the script. The script is a standard JavaScript module and can be loaded using the script tag.
Loading the script as module
The type attribute needs to be set to module for the script load properly.
html
<script
href="https://allaboard.eu/embed/aa-journey-list.js"
type="module"></script><script
href="https://allaboard.eu/embed/aa-journey-list.js"
type="module"></script>The script will register the Custom Element aa-journey-list with the browser. The Custom Element can then be used in your HTML like any other HTML element.
html
<aa-journey-list
publicApiKey="my-api-key"
origin="4X7ZaxZO"
destination="ObB7ATsZ"
departureDate="2025-07-02"></aa-journey-list><aa-journey-list
publicApiKey="my-api-key"
origin="4X7ZaxZO"
destination="ObB7ATsZ"
departureDate="2025-07-02"></aa-journey-list>Attributes
The Journey List communicate with the All Aboard API to display the journeys of your choosing. To know which journeys to display in the list you need to configure the element with some attributes. The <aa-journey-list> element can be configured by setting attributes on the element.
| Name | Description | Required |
|---|---|---|
publicApiKey | Your public API key. You can find your API key in the All Aboard Dashboard. | Yes |
origin | The origin location uid to use when calling the API. You can get the latest location set from the [Dashboard](https://allaboard.eu/agent). | Yes |
destination | The destination location uid to use when calling the API. You can get the latest location set from the [Dashboard](https://allaboard.eu/agent). | Yes |
departureDate | The departure date to use when calling the API, formatted as YYYY-MM-DD. | Yes |
sessionId | The session ID to use when calling the API. Can be any unique string that identifies the session. Used for analytics and troubleshooting. | No |
currency | The currency to display prices in. For example, EUR or GBP. | No |
language | The language to use for the list and modal. For example, en or sv. | No |
passengers | The default set of passengers to use for the list and modal. See PassengerPlaceholderInput for details. | No |
Setting Attributes Using JavaScript
The attributes can also be set using JavaScript. This is neccessary if you want to set e.g. the passengers attribute, since it is an object and cannot be set using HTML.
js
const list = document.querySelector('aa-journey-list')
list.passengers = [{ type: 'YOUTH', age: 18 }]const list = document.querySelector('aa-journey-list')
list.passengers = [{ type: 'YOUTH', age: 18 }]Events
To listen for events from the Journey List, you can use the addEventListener method. This is usefull if you want to e.g. show journey details or create a booking when a journey is selected.
| Name | Description |
|---|---|
aa-journey-list:select | Emitted when a journey is selected. The event detail will contain the journeyOfferId property which can be used to fetch the journey or create a booking. |
aa-journey-list:error | Emitted when an error occurs. The event detail will contain the error property which can be used to display an error message. |
Slots
Custom elements use slots to display custom markup inside the element.
error
You can also use the error slot to display an error message when the journey list fails to load or there are no journeys available.
html
<aa-journey-list
publicApiKey="my-api-key"
origin="4X7ZaxZO"
destination="ObB7ATsZ"
departureDate="2025-07-02">
<p slot="error">No journeys found</p>
</aa-journey-list><aa-journey-list
publicApiKey="my-api-key"
origin="4X7ZaxZO"
destination="ObB7ATsZ"
departureDate="2025-07-02">
<p slot="error">No journeys found</p>
</aa-journey-list>Example
See an example implemention of the Journey List bellow. Try changing the origin, destination, currency and language to see the results update.