List of smart events widget

The List of Smart Events Widget displays a series of cards for specific smart events. It is a versatile widget that can be customized to scroll, wrap, or alternate card colors, ensuring an engaging and dynamic user experience.

Key Features

Dynamic Layout Options Choose between scrolling or wrapping the cards when there’s no room for more widgets in the viewport.
Responsive Design Configure the number of cards displayed per row for different screen sizes.
Customizable Appearance Define alternating card colors for enhanced visual appeal.
Filtered Display Display specific smart events by providing their IDs, or show all smart events by default.

How to Use

Add the widget to your webpage using the HTML snippet below. Customize its properties as needed.

Example 1: Default Behavior

<bilberry-list-of-smart-events scroll="no"></bilberry-list-of-smart-events>

Example 2: Advanced Configuration

<bilberry-list-of-smart-events
    smart-event-ids="1,2,3"
    urls="/page1,/page2,/page3"
    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-list-of-smart-events>

Property	Description	Default Value	Required
`smart-event-ids`	Comma-separated list of smart event IDs. If not provided, all smart events are displayed.	All events	No
`scroll`	Determines if the cards scroll or wrap. Options: `yes`, `no`.	`no`	No
`num-xs`	Cards visible per row on extra small screens (mobile).	1	No
`num-sm`	Cards visible per row on small screens (tablets).	2	No
`num-md`	Cards visible per row on medium screens (small desktop screens).	2	No
`num-lg`	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 card elements.	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 card elements.	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

Scroll vs Wrap

When scroll is set to yes, cards will scroll horizontally if there’s no room for more.
When scroll is set to no, cards will wrap to the next line when necessary.

Alternating Card Colors

You can define multiple colors for the cards in the widget. Ensure that all color-related properties have the same number of values for consistent alternation.

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-list-of-smart-events

Tips for Effective Integration

Adjust Layout for Responsiveness: Use num-* properties to optimize the number of visible cards per row based on screen size.
Customize Colors: Leverage the color properties to align the widget with your brand’s design.
Filter Smart Events: Use smart-event-ids to showcase specific events.
Test Scroll and Wrap Options: Experiment with scroll settings to find the best layout for your site.

By integrating the List of Smart Events Widget, you can provide users with a visually engaging and dynamic way to explore your events.