Tour list bookable widget

Tour List Bookable Widget

The Tour List Bookable Widget displays a list of cards for specific tours. Each card includes a picture, text, time, icons, and a booking form, allowing users to book tours directly. The tour-id corresponds to the unique ID assigned to a specific tour on a particular date and time in Bilberry.

Key Features

1. Dynamic Tour Display Showcases tours with detailed information, including time, title, and images.

2. Customizable Layout Configure the number of cards per row, scroll or wrap behavior, and alternating colors.

3. Integrated Booking Enables users to book tours directly from the widget.

How to Use

Add the widget to your webpage using the HTML snippet below. Replace the tour-ids with the appropriate IDs for your tours.

Examples:

1. Basic Usage:

<bilberry-tour-list-bookable tour-ids="1,2,3" scroll="no"></bilberry-tour-list-bookable>

2. Advanced Customization:

<bilberry-tour-list-bookable
    tour-ids="1,2,3,4"
    scroll="no"
    background-colors="#395542,#1D252D,#333F48"
    text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    primary-colors="#183028,#333F48,#1D252D"
    primary-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
    accent-colors="#183028,#333F48,#1D252D"
    accent-text-colors="#FFFFFF,#FFFFFF,#FFFFFF"
></bilberry-tour-list-bookable>

Widget Properties

Property	Description	Default Value	Required
tour-ids	Comma-separated list of tour IDs found in Bilberry.	N/A	Yes
scroll	Specifies if cards should scroll (yes) or wrap (no).	no	No
orientation	Card orientation (portrait or landscape).	portrait	No
num-xs	Number of cards visible per row on extra small screens (mobile).	1	No
num-sm	Number of cards visible per row on small screens (tablets).	2	No
num-md	Number of cards visible per row on medium screens (small desktop screens).	2	No
num-lg	Number of cards visible per row on large screens (large desktop screens).	3	No
background-colors	Comma-separated list of HTML color codes for card backgrounds.	Unset	No
text-colors	Comma-separated list of HTML color codes for card text.	Unset	No
primary-colors	Comma-separated list of HTML color codes for primary elements on cards.	Unset	No
primary-text-colors	Comma-separated list of HTML color codes for primary text on cards.	Unset	No
accent-colors	Comma-separated list of HTML color codes for accent elements on cards.	Unset	No
accent-text-colors	Comma-separated list of HTML color codes for accent text on cards.	Unset	No
lazy-load	Set to yes to defer loading the widget content until it is visible in the viewport. Options: yes, no.	no	No
hide-read-more	Hides the “Read More” button when set to yes.	no	No
hide-image	Hides the image when set to yes.	no	No
hide-description	Hides the description when set to yes.	no	No
hide-title	Hides the title when set to yes.	no	No

Configure Layout

Scroll or Wrap

You can choose whether the list scrolls or wraps when there is no room for more widgets in the viewport:

• Scroll: Cards move horizontally in a scrollable container.
• Wrap: Cards stack to the next row.

Number of Cards Per Row

Define the number of visible cards per row based on screen size using the num-* properties.

Setting Up on Wix

If you’re using Wix as your website builder, follow these steps to configure the widget:

1. Access the Configuration Guide: Refer to the relevant guide in these docs for general widget setup on Wix.
2. Use the Following Values:
   • Server URL: https://bilberry-widgets.b-cdn.net/v4/wix-wrappers/WixBilberryTourListBookable.js
   • Tag Name: wix-bilberry-tour-list-bookable

Tips for Effective Integration

1. Highlight Key Tours: Use this widget to showcase important or featured tours.
2. Optimize Layout for Devices: Customize the num-* properties to ensure the best display on different screen sizes.
3. Brand Alignment: Use color properties to align the widget with your brand.
4. Experiment with Orientation: Try different orientations to find the best layout for your website.

By integrating the Tour List Bookable Widget, you can enhance the user experience and streamline the booking process for your tours.