Smart event list widget

The Smart Event List Widget displays a list of cards for tours within a smart event. Each card features a picture, text, time, icons, and a booking form. Users can add tours directly to their cart from this widget, making it an essential tool for showcasing and booking event tours.

Key Features

Dynamic Tour List Fetches and displays tours from a specific smart event in an organized card layout.
Customizable Design Allows color customization for cards and supports scroll or wrap layouts.
Interactive Booking Provides a seamless booking experience by integrating a booking form directly into the tour cards.

How to Use

Add the widget to your webpage using the HTML snippet below. Replace the smart-event-id with the appropriate ID for your smart event.

Examples:

Basic Usage:

<bilberry-smart-event-list smart-event-id="1" scroll="no"></bilberry-smart-event-list>

Advanced Customization:

<bilberry-smart-event-list
    smart-event-id="1"
    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-smart-event-list>

Property	Description	Default Value	Required
`smart-event-id`	The ID of the smart event to display.	N/A	Yes
`scroll`	Specifies if cards should scroll (`yes`) or wrap (`no`).	`no`	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
`hide-read-more`	Hides the “Read More” button when set to `yes`.	`no`	No
`display-as`	Determines display mode: `grid` or `list`.	`grid`	No
`lazy-load`	Set to `yes` to defer loading the widget content until it is visible in the viewport. Options: `yes`, `no`.	`no`	No

Setting Up on Wix

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

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

Tips for Effective Integration

Highlight Multiple Tours: Use this widget to showcase all tours in a specific smart event.
Optimize Layout for Devices: Customize the num-* properties to ensure the best display on different screen sizes.
Customize Colors: Use the color properties to match the widget’s design with your branding.

By integrating the Smart Event List Widget, you can provide a visually engaging and user-friendly way for customers to explore and book tours within a smart event.