Configuration inputs and checkout features let you control how the Ventrata checkout works and what it shows to customers. Both are set in the data-config attribute of your checkout script or button, but they are added in different places:
Configuration inputs sit directly in
data-config, next to yourapiKey.Checkout features sit inside a
"features"object withindata-config.
Add Inputs and Features
Add the inputs and features to the data-config attribute of your script or button in the format below.
Replace input and featureName with the names of the supported inputs and features, and specify their values. Separate multiple entries with a comma ,.
<script
src="https://cdn.checkout.ventrata.com/v3/production/ventrata-checkout.min.js"
type="module"
data-config='{
"apiKey": "<YOUR_API_TOKEN>",
"input1": "value",
"input2": "value",
"features": {
"featureName": value,
"featureName1": value
}
}'>
</script>
📒 NOTE
Configuration input values are passed as strings in quotation marks, for example "lang": "en".
Feature values are mostly true / false without quotation marks, for example "bottomBar": false. Check the Available Values column for each feature.
📗 TIP
Use the Checkout Configurator to build and test your configuration before adding it to your website. Each setting you add appears in the generated script tag, which you can copy and paste into your page. Keep the configurator in TEST mode while experimenting.
Configuration Inputs
Add these directly to the data-config attribute.
Setup
Input | Default | Description |
| Required - must be defined at least once per script import | Your apiKey is located in your Ventrata dashboard.
|
| Not set |
|
Language and Currency
Input | Default | Description |
| Not set | Optional, lower case, for example, |
| Not set | Optional, upper case, for example, |
📒 NOTE
If both "lang" and "currency" are specified in the data-config, the globe icon used to select the language and currency on the checkout is hidden as these parameters are predefined. This is typically used with the multi-booking feature.
Display Mode and Cart
Input | Default | Description |
|
| Allows the usage of embedded mode.
The page requires the presence of an HTML element with the
To customise embedded mode, see the
|
|
| Allows the usage of a cart (multiple bookings in the same order).
Triggers the bottom bar, which informs users about the current order content. To hide it, see the
|
Product, Orders and Pages
Input | Default | Description |
| Not set | ID of the product.
If not set, product list is shown. |
| Not set | ID of the option.
if set, the option is preselected. |
| Not set | ID of the booking (used only for
Must be paired with
|
| Not set | ID of the order.
Required whenever you are opening a predefined order, for example with
|
| Not set | Token returned when an order is created, alongside its
Not needed for an order the Checkout Widget itself created in the customer's current session, as it already has this internally.
|
| Not set | String value. Triggers checkout on a specific page of the checkout process such as Tickets or Checkout. Use only in combination with
Supported values:
Example:
|
📒 NOTE
If the order was created outside the browser session that is about to open it, also pass recoveryToken. orderID alone is not enough to prove your session may open it.
‼️ IMPORTANT
Treat recoveryToken like a credential — anyone with it can open and act on that order. Pass it over HTTPS and avoid logging it.
Data and Time preselection
Input | Default | Description |
| Not set | Triggers checkout with a specific tour date. Use the ISO 8601 format (YYYY-MM-DD). Use in combination with |
| Not set | Triggers checkout with a specific tour time. Use in combination with |
📗 TIP
To preselect the earliest available date automatically instead, see the preselectFirstAvailableDateModalCalendar feature.
Marketing and Promotions
Input | Default | Description |
| Not set | If set to |
| Not set | String value, for example,
|
| Not set | String value, an existing promotional code. Applies the code automatically.
To let customers enter a code themselves, see the
|
Checkout Features
Add these features inside the "features" object in the data-config attribute.
📒 NOTE
The default states of most features are already implemented. You only need to add a feature to the data-config if you want to change its default value or use a feature marked Not set.
Product and Unit Selection
Feature | Default | Available Values | Description |
| Not set |
| Automatically preselects the first unit of the product with a default count of 1 (
|
| Not set |
| Add a More Details link to expand product info like overview, highlights and FAQs.
|
|
|
| Allows customers to skip upgrade and combination offers.
|
Dates, Times and Availability
Feature | Default | Available Values | Description |
| Not set |
| Allows customers to select the tour date before product selection.
|
|
|
| Automatically preselects the earliest available date.
|
| Not set |
| Controls which ticket date type is displayed to customers.
|
| Not set |
| Changes the time selection interface from individual buttons to a dropdown menu.
This feature is a prerequisite to the
|
|
|
| Organises timeslots into distinct tour groups, each with its own headline.
To use this feature, include
|
|
|
| Displays the number of remaining seats for the tour.
|
Promotions and Gift Cards
Feature | Default | Available Values | Description |
|
|
| Displays a field to enter promo or gift card code.
|
|
|
| Allows the purchase of gift cards via web checkout.
|
|
|
| Disables the ability to adjust the per unit price of the gift card.
|
Waitlists and Quotes
Feature | Default | Available Values | Description |
|
|
| Enables the Waitlists functionality, which lets customers express interest in booking a tour on dates that are currently sold out.
|
|
|
| Enables the Quotes functionality, which allows customers to postpone payment and review a booking without commitment.
|
Layout and Display
Feature | Default | Available Values | Description |
|
|
| Displays a bar at the bottom of the screen when multiple bookings are made in one order (see the
|
| Not set |
| Switches the specified page from embedded mode to pop-up mode (see the
|
| Not set |
| Replaces the product name in the widget title with a universal Buy Tickets call-to-action in embedded mode.
|