The Checkout Configurator is a single-page app designed to help you prepare widget configurations for your web checkout.
It enables you to:
generate a script used for shared or default settings
configure element behaviour outside the default settings
📒 NOTE
Both configurations are merged, and the element's configuration takes precedence over default settings.
configure the Manage My Booking portal
generate deep links that open specific products or orders in the widget
instantly test configurations
share links to send with support, colleagues or developers
access feature-specific documentation directly from the configurator interface
The configurator is fully responsive and available in multiple languages.
Navigation
When you first open the tool, a guided tour walks you through each element and shows you how to start configuring your widget. You can retake the tour at any time using the 
icon in the top navigation. Each element is described in the table below.
(Click the image to enlarge.)
# | Element | Description |
1 | Language Selector | Select to view the configurator in your preferred language |
2 | TEST / LIVE Mode Toggle | Keep the configurator in TEST mode while experimenting. Switch to LIVE once you are ready to generate the configuration for live bookings. |
3 | Light / Dark Mode | Switch the configurator between light and dark modes |
|
| 📒 NOTE This setting only changes the look of the configurator, not the widget. |
4 | Tour Guide | Take a quick tour through the configurator — learn about basic features, how to build your configuration and how to share it with others |
5 | Changelog | See how the configurator has been improved since your last visit |
6 | Widget Type Selector | Choose the type of widget you want to configure: |
|
| 📒 NOTE The Manage My Membership widget type is planned for a future release. |
7 | API Key | Enter your checkout's API key, which authenticates every request the checkout makes |
8 | Presets | Select a ready-made configuration for common setups. |
9 | Sections / Look & Feel | Configure each section that applies to your setup |
|
| 📒 NOTE Certain features, such as Gift Cards, Quotes or Waitlists, must be enabled in the Checkout settings in the Dashboard before you can configure them in the configurator. If any features appear disabled in the configurator, check your checkout settings first. |
10 | Output | See every change you make to the configuration reflected in the output |
Configure Your Widget
You can configure your widget in one of two ways:
Manual
Configure the widget from scratch by going through each available section yourself.
Configure the widget from scratch by going through each available section yourself.
Select the widget type.
Select Widget Type
Enter the API key for your checkout.
Enter API Key
Configure each section to match your needs.
Configure Sections
📗 TIP
Each feature or setting you add appears in the output windows for your script tag or element markup.
Output
Press the Open Widget button to thoroughly test your configuration.
Open Widget
When ready, switch to LIVE mode.
Live Mode
📗 TIP
Notice that the
"env"parameter changes from"test"to"live".
Switch Environments
Press the Copy button in the SCRIPT TAG window and paste the script into the HTML pages of your website.
Copy Script Tag
If you configured the element behaviour, press the Copy button in the ELEMENT MARKUP window and add the markup to element tag on your page.
Copy Element Markup
To start over, press the Reset Configuration button. This clears all input from the configurator, including your API key.
Reset Configuration
Using Presets
Quickly test different widget configurations without additional manual input.
Quickly test different widget configurations without additional manual input.
Select the widget type.
Select Widget Type
Enter the API key for your checkout.
Enter API Key
Select a preset.
Select Preset
📗 TIP
The selected preset enables certain sections by default (highlighted with a red button). You can adjust these, or enable other sections to add more features.
Enable Additional Features
📒 NOTE
Only one preset can be selected at a time. Each new selection overrides the previous preset configuration.
Press the Open Widget button to thoroughly test your configuration.
Open Widget
When ready, switch to LIVE mode.
Live Mode
📗 TIP
Notice how the
"env"parameter changes from"test"to"live".Switch Environments
Press the Copy button in the SCRIPT TAG window and paste the script into the HTML pages of your website.
Copy Script Tag
If you configured the element behaviour, press the Copy button in the ELEMENT MARKUP window and add the markup to the element tag on your page.
Copy Element Markup
To start over, press the Reset Configuration button. This clears all input from the configurator, including your API key.
Reset Configuration
Share Configuration Link
The link in your browser's address bar updates as you change your configuration. Copy it and share it with anyone who needs to see your exact configuration.
Shareable Configuration Link
Related Documentation
For more details on a feature, click the 
icon to open the relevant documentation.
Documentation Links