Package list widget

Package List Widget

The Package List Widget displays a list of package product cards, each showcasing a picture, text, icons, and a “Read More” button. It is a versatile widget that allows users to browse and explore various packages on your website.

Key Features

1. Dynamic Package Display Lists multiple package cards with rich visual and textual information.

2. Customizable Layout Configure the number of cards displayed per row and choose between scrolling or wrapping layouts.

3. Alternating Card Colors Define alternating colors for cards to enhance visual appeal.

4. Custom URLs for Packages Link each card to a specific “Package Detail” page using customizable URLs.

How to Use

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

Example:

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

Widget Properties

Property	Description	Default Value	Required
package-ids	Comma-separated list of package IDs to display. If not provided, all packages are displayed.	All packages	No
package-urls	Comma-separated list of URLs to the “Package Detail” page for each package. The order must match package-ids.	Unset	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
max-cards	Maximum number of cards to display.	N/A	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:

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/WixBilberryPackageList.js
   • Tag Name: wix-bilberry-package-list

Tips for Effective Integration

1. Highlight Key Packages: Use the package-ids and package-urls properties to feature specific packages and link them to dedicated detail pages.
2. Optimize Layout for Devices: Configure the num-* properties to control how many cards are displayed per row on different screen sizes.
3. Customize Visuals: Define alternating colors for cards using the color-related properties to enhance visual appeal.
4. Test Scroll and Wrap Options: Experiment with the scroll setting to find the best layout for your website.

By integrating the Package List Widget, you can provide users with an engaging and visually appealing way to explore your package offerings, driving interest and bookings.