Booking widget

Booking widget

The Booking Widget adds a pop-up booking interface to the lower right corner of your screen, enabling users to book a variety of products seamlessly. It supports regular Bilberry products, timeslot products, and Visbook accommodations.

Key Features

1. Comprehensive Product Support

   • Handles regular Bilberry products (e.g., tours, accommodations, rentals).
   • Supports timeslot-based bookings.
   • Integrates with Visbook for accommodation bookings.

2. Dynamic Booking Options

   • Ticket selection for all product types.
   • Date or date range selection depending on the product type.

3. Responsive Design Displays a user-friendly booking widget optimized for desktop and mobile screens.

Product-Specific Behavior

Regular Products

• Tour Products: Allows users to select a specific date for booking.
• Accommodation Products: Users select a date range. The range includes the start date but excludes the checkout date. For example, a range from 2025-06-09 to 2025-06-11 books 2025-06-09 and 2025-06-10, but not 2025-06-11.
• Rental Products: Users select a date range, including both the start and end dates.

Timeslot Products

• Displays timeslot selection for flexible bookings, often used by parks and gyms.

Visbook Products

• Fully supports Visbook accommodations for seamless integration.

How to Use

Add the widget to your webpage using the HTML snippet below. Replace the product-catalog-id with the appropriate ID for your product catalog. Remember to set the timeslots or accommodation property if adding a timeslot or Visbook product.

Example:

Regular Product, Bilberry Accommodation Products and Rental Products:

<bilberry-booking-widget product-catalog-id="1"></bilberry-booking-widget>

Timeslot Product:

<bilberry-booking-widget product-catalog-id="1" timeslots="yes"></bilberry-booking-widget>

Visbook accommodation Product:

<bilberry-booking-widget product-catalog-id="1" accommodation="yes"></bilberry-booking-widget>

With date selection first:

<bilberry-booking-widget
    product-catalog-id="1"
    date-selection-first="yes"
></bilberry-booking-widget>

Widget Properties

Property	Description	Default Value	Required
product-catalog-id	The ID of the product catalog to display in the booking widget.	N/A	Yes
timeslots	Indicates if the product is a timeslot product. Required for timeslot products. Options: yes, no.	no	No*
accommodation	Indicates if the product is a Visbook accommodation. Required for visbook products. Options: yes, no.	no	No*
date-selection-first	When set to yes, displays date selection before ticket selection in the booking flow. Options: yes, no.	no	No
position-offscreen	Positions the widget below the screen. Options: yes, no.	no	No
expand-arrow-inside	Positions the expand arrow inside the widget. 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

Theming the Widget

Customize the widget’s appearance using these theme properties:

Property	Description
bookingWidgetColor	Background color of the widget.
bookingWidgetColorContrast	Text color of the widget.
bookingWidgetPrimaryColor	Color of the primary button.
bookingWidgetPrimaryColorContrast	Text color of the primary button.
bookingWidgetHeaderColor	Color of the header.
bookingWidgetInputColor	Background color of the input fields.
bookingWidgetInputTextColor	Text color of the input fields.

Details of Widget Behavior

1. Loading Availability: The widget loads the availability for the first available month upon page load.

   • Timeslot and Visbook Products: Loads one month from today’s date.

2. Avoid Overlapping Tour Series: For Bilberry accommodation products, overlapping tour series in Bilberry backoffice can cause double bookings and pricing errors. Ensure no overlapping dates exist for accommodation products.

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

Tips for Effective Integration

1. Correct Product Type: Set the timeslots or accommodation property appropriately for your product type, if applicable.
2. Optimize Placement: Ensure the widget’s position doesn’t obstruct key page elements.
3. Customize Appearance: Use the theming options to align the widget’s style with your brand.
4. Test Configurations: Verify the widget’s behavior with different product types to avoid errors.

By integrating the Booking Widget, you provide a streamlined and intuitive booking experience for your users, enhancing their journey from browsing to checkout.