Rail Pass Modal
All Aboard offers many different rail passes. The price of a Rail Pass may depend on the passengers traveling together. E.g. a child may travel for free with an adult, or a senior may get a discount. The All Aboard API will automaticallly figure out the most price effective configuration of passes given a set of passengers.
To make it as easy as possible to use this feature of the All Aboard API we offer the embeddable Rail Pass Modal. It includes an intuitive user interface for inputting the passengers and displaying the correct Rail Passes. Once the desired passengers have been input and the user has selected a pass class they are redirected to our hosted checkout flow where they can complete the purchase.
The Rail Pass Modal is fully responsive and will adapt to the screen size of the user. Scroll down to see an example of the Rail Pass Modal in action.
Getting Started
To add the Rail Pass Modal 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-passbundle-modal.js"
type="module"></script><script
href="https://allaboard.eu/embed/aa-passbundle-modal.js"
type="module"></script>The script will register the Custom Element aa-passbundle-modal with the browser. The Custom Element can then be used in your HTML like any other HTML element.
html
<aa-passbundle-modal
publicApiKey="my-api-key"
travelDayCount="7"
validityPeriod="P1M"
product="interrail-global-pass"></aa-passbundle-modal><aa-passbundle-modal
publicApiKey="my-api-key"
travelDayCount="7"
validityPeriod="P1M"
product="interrail-global-pass"></aa-passbundle-modal>Attributes
The Rail Pass Modal communicate with the API to display the correct rail pass. To know which rail pass to display in the modal you need to configure the element with some attributes. The aa-passbundle-modal can be configured by setting attributes on the element.
Required Attributes
Which attributes that are required may vary depending on the PassBundle product you want to display. The attributes product, validityPeriod and travelDayCount is used to filter out a specific PassBundle. The passClass attribute then determines which class to select.
For example, the product and validityPeriod attribute is required for all Interrail and Eurail passes, and travelDayCount is needed for Interrail "Flexi" passes with a set number of travel days but not for "Continuous" passes that are valid throughout the validity period.
| Name | Description | Required |
|---|---|---|
publicApiKey | Your public API key. You can find your API key in the All Aboard Dashboard. | Yes |
product | Identifier of the PassBundle product to display. For example, interrail-global-pass or eurail-one-country-sweden-pass. | Yes |
passClass | The class of the pass. For example, 1stclass or 2ndclass. | Yes |
travelDayCount | The number of travel days the pass is valid for. For example, 5 or 15. | No |
validityPeriod | The Duration of the pass to display. For example, P22D or P2M. | No |
campaignCode | The campaign code to use when fetching the PassBundle. For example, black-friday-2025. | No |
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 modal. For example, en or sv. | No |
open | Whether the modal should be open or not. This is a boolean attribute meaning you can set or unset it to open or close the modal. | No |
passengers | The default set of passengers to use for the 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 modal = document.createElement('aa-passbundle-modal')
modal.passengers = [{ type: 'YOUTH', age: 18 }]const modal = document.createElement('aa-passbundle-modal')
modal.passengers = [{ type: 'YOUTH', age: 18 }]Example
Clicking the button bellow will toggle the open attribute of a <aa-passbundle-modal /> custom element configured with the attributes below. Try changing the product, class, validity, currency and language and open the modal to see the changes.
Not all combinations of attributes are valid
Some combinations of product, validity period and travel days are invalid, and will result in an error when the modal is opened. For example, the Interrail Global Pass is not valid with a validity period of 2 months and 7 travel days since no such rail pass exists.