Saltar al contenido principal

How to create a product list booking widget

A product list is a widget that shows a list of selected products. The list shows pictures, duration and prices for the selected products.

If the product is selected the customer is moved to the next step in the booking process.

To be able to create and embed a product list widget, you have to have at least one product list in your account: How to create a product list.

Customize your product list widget#

To customize your widgets:

  • Select Sales tools > Bookings Widgets in the left-hand side menu
  • Select Product list in the widget wizard on the left-hand side
  • Select the booking channel you'd like to add the widget to in the dropdown list at the top
  • Click on the Edit Widget configurations button in the top right corner.

You will be redirected to the Product List configuration page under the Widgets step in the booking channel editor for the booking channel you have selected.

Here, you can choose:

  1. What happens when a product is selected in the product list:
    • The Product page option will open the product page with the product details and a calendar widget
    • The Calendar option will only open a calendar widget
Product pageCalendar
  1. The layout of the product list items:
    • Card view will display up to three items card per row
    • List view will show one product per row
Card viewList view
  1. What information you’d like to show on each product card:

    • Show short description:there is nothing more powerful than a catchy description! We strongly recommend you to add a unique description for your product to be shown on the product card. To create one, go to in the Description step at the product level under Products, Experience Overview.

    • Show banner: this is the banner with the product title and cover photo that appears on the customer select a product from the product list

    • Show sublists: you can create sublists within a product list.

    • Show supplier’s name: if you resell products, you can show the name of the provider for each product

    • Show duration: show how long your experience last

    • Show location: where the experience takes place

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 by clicking on Save & Continue.

How to create a product list widget code to embed on your website#

Once you have configured your widget, you can create the embed code for your widget so you can add it to your webpage:

  • Select Sales tools > Bookings widgets in the left-hand side menu
  • Select Product list in the widget wizard on the left-hand side
  • Select the product list you'd like to create a widget for in the drop-down list on the left
  • Select the booking channel you'd like to add the widget to in the dropdown list at the top
  • Click on Generate embed code
  • Click the Copy embed code button. This is the code you should use when embedding it into your website.

‘How to embed’ articles: