Package booking widget

Package Booking Widget

The Package Booking Widget is a pop-up version of the Package Booking Inline Widget, offering a compact and user-friendly interface for booking package products. It is commonly used alongside the Package Itinerary Widget to provide users with a seamless booking experience.

Key Features

1. Popup Interface Provides a pop-up window for booking package products, reducing clutter on your webpage.

2. Dynamic Package Booking Users can select ticket quantities, dates, and product options within a streamlined interface.

3. Compact Design The widget expands as needed, keeping your website layout clean.

How to Use

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

Examples:

<bilberry-package-booking package-id="123"></bilberry-package-booking>

With date selection first:

<bilberry-package-booking package-id="123" date-selection-first="yes"></bilberry-package-booking>

Widget Properties

Property	Description	Default Value	Required
package-id	The ID of the package to display in the booking widget.	N/A	Yes
date-selection-first	When set to yes, displays date selection before ticket selection in the booking flow. Options: yes, no.	no	No
lazy-load	Set to yes to defer loading the widget content until it is visible in the viewport. Options: yes, no.	no	No
expand-arrow-inside	Positions the expand arrow inside the widget instead of on top. Options: yes, no.	no	No

Theme Customization

The widget uses the same theme properties as the inline version:

Theme Property	Description
bookingWidgetColor	Background color of the form.
bookingWidgetColorContrast	Text color of the form.
bookingWidgetPrimaryColor	Color of the “Next” button in the form.
bookingWidgetPrimaryColorContrast	Text color of the “Next” button.
productCardColor	Background color of product cards in the list and summary.
productCardTextColor	Text color of product cards.
primaryColor	Color of the “Book Now” button.
primaryColorContrast	Text color of the “Book Now” button.

Common Issues and Solutions

1. No Dates Available Ensure you have added availability to the actual package in the Bilberry Backoffice. Adding availability only to the products in the package is insufficient.

2. Dates Still Unavailable Despite Package Availability Verify that the individual products in the package have availability on the same dates as the package. The package’s availability depends on both the package’s and the products’ availabilities.

3. Products Missing for Specific Ticket Options Packages may have different products for different ticket options. For instance, “Adult” tickets may include different products than “Child” tickets. Ensure the missing products are assigned to the correct ticket options in the Bilberry Backoffice.

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

Tips for Effective Integration

1. Test Availability Settings: Ensure both the package and its individual products have correct availability configurations.
2. Leverage Theme Customization: Use the theme properties to align the widget’s style with your brand.
3. Pair with the Itinerary Widget: Combine this widget with the Package Itinerary Widget for a comprehensive booking experience.
4. Verify Compatibility on Mobile: Test the widget on various devices to ensure a seamless user experience.

By integrating the Package Booking Widget, you can offer users an intuitive and visually appealing way to book packages, enhancing engagement and conversions.