How to create a calendar booking widget
This feature is included with all our paid plans.
The calendar widget enables travelers to select the date they wish to book and it is linked to the checkout widget.
The calendar widget can be customised at the booking engine channel level for all products and further customised at the experience editor level per product. The experience editor configurations will overwrite booking engine channel settings.
How to create a booking calendar widget
To create a new calendar widget code:
- Select Sales tools> Booking widgets in the left-hand side menu.
- Select Booking calendar in the widget wizard on the left-hand side.
- Choose the Button trigger you'd like the button to direct to (a product list, a product page or a calendar in the dropdown list), the supplier, and the experience you want to connect the button to.
- Select the booking channel you'd like to add the widget to in the dropdown list at the top.
- Click the Generate embed code button.
- Click the Copy embed code button. This is the code you should use when embedding it into your website.
How to customise the booking calendar widget in the booking channel
By clicking on Edit widget settings on the top right side or the Customize the settings for this calendar widget link under Need to make some changes?, you can choose which elements of the calendar you want to show on your website.
The updates are made live to the preview available on the right-hand side. You can preview the widget both in laptop, mobile and tablet mode. Remember to save your configuration.
These are available settings:
Go to Cart or Display a message. Here you are setting what will happen after the guest puts a product to a cart.
Go to cart will show a Checkout button when options are selected. When clicking the Checkout, the guest is taken directly to the checkout widget.
Display a message, will show an Add to cart button when options are selected. When Add to cart is clicked, the button becomes a Go to cart button which links the guest to the checkout widget.
Display a message, will show a message saying "“Go to cart" and a link to take customer to the cart.
Default category automatically selected
This means that there is always 1 selected automatically in your booking engine for you default pricing category. E.g. 1 adult is always selected. Good to remove if you have product that has "vehicles" or "kayaks" as pricing categories and you do not want to have any category automatically selected.
Show sold out
In the case a date is sold out, it will show a red tag in the booking engine. If not selected it will show white.
Show banner
Show or hide the products cover picture in the booking process
Show rate titles for all start times
Show or hide titles of the rates, start times will always be shown.
Show calendar prices
Show prices for everyday on the calendar overview. If deselected there are no prices shown, but the guest sees the prices when the date is selected.
Start week on Sunday
The default day starts the week on a Monday. Tick the box if you want the week to start on Sunday.
Show warning when few slots left
Show a warning when limited seats are left in the booking engine. If your availability reaches below the number entered in Warning threshold, guests will see a yellow warning flag on the calendar and a a selling fast flame icon on your widget.
The widget has a defined color selection as well as font text and size. You are also able to customise the colour of the button and the text, the height, width, the font size and the radius using the Theme advanced options using Custom CSS/SASS. Information on these additional options is found here: How to customize your widgets
How to customise the booking calendar widget in the experience editor
Setting up customisation in the experience editor:
Navigate inside the experience to Advanced and select Booking engine settings.
- Customer selection type: How do you want guests to be called on your widget for this product?
- Start time selection in a dropdown: You can decide if you want a time selector drop-down if you have too many start times to be displayed as buttons.
- Threshold warning: A “selling fast” warning appears when spaces are limited.
This is a view of the widget after the guest chooses a date from the calendar for an experience with multiple start times and the selling fast flame icon:
