Skip to main content

How to create a calendar booking widget (PRO)

The calendar widget enables travelers to select the date they wish to book and it is linked to the checkout widget.


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

You can customize the button by clicking the edit appearance button in left-hand side. You can change the text, colour of the button and the text, the height, width, the font size and the radius.

By clicking on Edit widget settings on the top right side 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 customer puts a product to a cart.

  • Display a message will show a message saying "Product added to the cart" and a link to take customer to the cart.

  • Go to cart, will take the customer directly to the checkout step.

Then below you have more settings for you

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, show it Red 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 customer sees the prices when the date is selected.

Start week on Sunday
Have the first week day Sunday, by default it is Monday.

Show warning when few slots left
Show a warning e.g. 5 seats left in the booking engine. Just below in "Warning threshold" you should when the warning should kick in.

How to embed articles

We're working to refresh the videos to keep up with our new navigation, so please bear with us for the time being!