Docs

Rail Pass List ​

There is a great variety of Rail Passes available in the All Aboard API and to make displaying the options to your customers easier, we offer the embeddable Rail Pass List. It is a great way to display a list of Rail Passes on your website without requiring any programming.

The Rail Pass List will fetch a subset (of your chosing) of rail passes from the All Aboard API and display them in a list. Selecting a rail pass will open the Rail Pass Modal where the user can input their passengers details and complete the purchase.

The list is fully responsive and will adapt to the screen size of the user. Scroll down to see an example of the Rail Pass List in action.

Getting Started ​

To add the Rail Pass 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://next.allaboard.eu/embed/aa-passbundle-list.js"
  type="module"></script>
<script
  href="https://next.allaboard.eu/embed/aa-passbundle-list.js"
  type="module"></script>

The script will register the Custom Element aa-passbundle-list with the browser. The Custom Element can then be used in your HTML like any other HTML element.

html
<aa-passbundle-list
  publicApiKey="my-api-key"
  product="interrail-global-pass"></aa-passbundle-modal>
<aa-passbundle-list
  publicApiKey="my-api-key"
  product="interrail-global-pass"></aa-passbundle-modal>

Attributes ​

The Rail Pass List communicate with the API to display the rail passes of your choosing. To know which rail passes to display in the list you need to configure the element with some attributes. The aa-passbundle-list can be configured by setting attributes on the element.

* = Required
NameDescriptionRequired
publicApiKeyYour public API key. You can find your API key in the All Aboard Dashboard.Yes
productIdentifier of the PassBundle product to display. For example, interrail-global-pass or eurail-one-country-pass-sweden.No
campaignCodeThe campaign code to use when fetching the PassBundle. For example, black-friday-2025.No
badgeA badge that is displayed in the corner of the card. Can be used to e.g. highlight current offers.No
sessionIdThe session ID to use when calling the API. Can be any unique string that identifies the session. Used for analytics and troubleshooting.No
currencyThe currency to display prices in. For example, EUR or GBP.No
languageThe language to use for the list and modal. For example, en or sv.No
passengersThe default set of passengers to use for the list and modal. See PassPassengerInput 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.createElement('aa-passbundle-list')
list.passengers = [{ type: 'YOUTH', age: 18 }]
const list = document.createElement('aa-passbundle-list')
list.passengers = [{ type: 'YOUTH', age: 18 }]

Example ​

See an example implemention of the Rail Pass List bellow. Try changing the product, currency, language and badge to see how the list changes.