How to create a product list booking widget
A product list booking widget is a widget option to display products added in a Product List on the same page. The list shows pictures, duration and prices for the selected products.
If a product is selected, the customer is moved to the next step in the booking process.
✴️ Requirement: 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.
To create a product list booking widget, follow the steps below:
- Select Sales tools > Bookings Widgets in the left-hand side menu
- Select Product list in the widget wizard on the left-hand side > Next
- If you have more than one booking channel, select the booking channel you'd like to add the widget to in the dropdown list at the top
- Click on Generate embed code.
How to 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 > Next
- If you have more than one booking channel, select the booking channel you'd like to add the widget to in the dropdown list at the top
- Click on the Customize the settings for this product list widget
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:
Add a search bar
If you want to add a search bar at the top of the product list to allow customers to search for products within the product list, enable this feature.
Learn more about searching for products on your website here.
Select the widget types to display the product list
Currently, there are two options. These alternatives will redirect the customers to either:
- The Product page, that will open the product page with the product details and a calendar widget or;
- The Calendar page. This one will only open a calendar widget.
 |  |
|---|---|
| Product page | Calendar |
Choose the layout of the product list items
Two options are available.
- Card view: will display up to three items card per row
- List view: will show one product per row
 |  |
|---|---|
| Card view | List view |
Select the information you’d like to show on the product list
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 when the customer select a product from the product list.
Show Banner Text:
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: it displays how long your experience last.
Show location: where the experience takes place.
The updates can be seen through the preview located on the right-hand side of the Product List settings under Booking channels > Widgets. You can preview the changes in laptop, mobile and tablet mode. Remember to save your configuration by clicking on 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 > Next
- Select the product list in the left-hand side, and 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 widget code:
Here are some help articles showing how to embed widgets on different platforms.