Skip to main content

Widgets

Widgets – Calendar Widget​

The Calendar Widget allows you to embed an interactive calendar directly into your website or landing page. It enables guests to view rates and availability for a selected room and rate plan, and proceed to the booking flow without navigating away from your site.

There are two display options available:

  • Version 1: A direct-date selection calendar.
  • Version 2: A range-based calendar with price summary and Book Now button.

How to Configure Calendar Widget​

  1. Go to the IBE Widgets page in your dashboard. widgets
  2. Under the Calendar Widget section, configure the calendar with the following options:
    • Select Room: Choose the room type to be linked with the widget.
    • Select Rate: Select the applicable rate plan (e.g., Room Only, Breakfast).
    • Select Months: Determine how many months will be shown in the calendar view (e.g., 6 or 12 months ahead). widgets
  3. Below the selection area, choose the widget version you prefer:
    • Version 1
    • Version 2 widgets

[!NOTE]

Troubleshooting Calendar Widget​

Widget is not displaying on the website

  • Ensure you have completed all required configurations: room type, rate plan, and number of months.
  • Double-check if the widget embed code has been correctly placed on your website.

Room or rate plan not appearing in dropdown

  • Make sure the room and rate plan have been created and are active in the Bookingku system.
  • Try refreshing the page or logging out and back in to reload the options.

Wrong date availability shown in widget

  • Confirm that availability and rates are properly set for the selected room and rate in the calendar management section.
  • Allow a few minutes for system synchronization after making changes.

Unable to switch between Version 1 and Version 2

  • Check for any browser extension or caching issue. Try switching versions in an incognito window.
  • Save changes after switching widget versions to ensure it updates properly.

How to Use Calendar Widget – Version 1​

  1. In the Calendar Widget section, click View Example under Version 1 to preview how it works. widgets
  2. You will see a full calendar with selectable dates. widgets
  3. You can select a currency (if multiple currencies are available) before interacting with the calendar. widgets
  4. When you click a specific date on the calendar:
    • You will be redirected immediately to the Booking Engine page. widgets
    • The selected check-in date will be automatically applied in the booking form. widgets
  5. To embed this widget on your website:
    • Copy the HTML script provided under Version 1.
    • Paste it into your website’s HTML where you want the calendar to appear. widgets

How to Use Calendar Widget – Version 2​

  1. Click View Example under Version 2 to preview the behavior. widgets
  2. You will see a full calendar with selectable dates. widgets
  3. You can select a date range on the calendar. widgets
  4. Once the range is selected:
    • The total price for the selected stay period is calculated and displayed.
    • A Book Now button appears beside the total. widgets
  5. When the guest clicks Book Now:
    • They are redirected to the booking engine.
    • The selected date range and pricing are passed into the booking page. widgets
  6. Copy the HTML script for Version 2 and embed it into your website. widgets

[!NOTE]

Troubleshooting Calendar Widget – Version 1 & Version 2​

Clicking on the calendar does not redirect to the Booking Engine

  • Make sure the HTML script is embedded correctly on your website.
  • Confirm that the selected room and rate are active and bookable.
  • Check if there are JavaScript conflicts or errors in your browser console.

Widget displays but does not respond to date selection

  • Ensure the room and rate configuration is still valid (not deleted or deactivated).
  • Try refreshing the browser or clearing the cache.

Book Now button not appearing in Version 2

  • Make sure a valid date range has been selected.
  • Check if pricing has been correctly set for the selected period in the Booking Engine.

Currency not showing on the widget

  • Verify that multiple currencies are enabled and properly configured in the system settings.

Total price shown is incorrect

  • Ensure that all rate plans and taxes are up to date in the rate setup.
  • Check for any overlapping special rates or promotions that might override the base price.

Widgets – Formular​

The Formular Widget allows you to embed a compact booking form on your website or landing page. This form includes fields for check-in date, check-out date, promo code, and a Book Now button.

When guests fill in the form and click Book Now, they will be redirected to your Booking Engine with the selected parameters.

How to Use Formular Widget​

  1. Go to the Widgets page in your dashboard.
  2. Scroll to the Formular section and click View Example to see how the widget works. widgets
  3. The sample view will show:
    • A date picker for Check-In.
    • A date picker for Check-Out.
    • A field to enter Promo Code.
    • A Book Now button that redirects to the booking page. widgets
  4. Copy the script code provided in the Formular section and paste the code into your website where you want the booking form to appear. widgets

[!NOTE]

Troubleshooting Formular Widget​

Form does not appear on the website

  • Make sure the HTML script is copied and pasted correctly into the desired section of your website.
  • Check if JavaScript is enabled in the browser and not being blocked by ad blockers or script filters.
  • Verify there are no conflicts with other embedded scripts on the same page.

Book Now button is unresponsive

  • Ensure both Check-In and Check-Out dates are selected before clicking the button.
  • Inspect the browser console for errors that might prevent redirection.

Promo code is not applied after redirection

  • Confirm the promo code entered is valid and active in the Booking Engine.
  • Make sure the promo code parameter is correctly passed through the embedded widget script.

Redirect leads to a blank or error page

  • Ensure the base URL for your Booking Engine is correctly set up and active.
  • Double-check that the room availability and rate plans are configured for the selected dates.

Book Now Button​

The Book Now Button is a simple call-to-action that redirects users directly to your Booking Engine. You can place this button anywhere on your website—such as in a banner, homepage section, or navigation bar—to encourage visitors to start the booking process immediately.

A ready-to-use HTML anchor tag is provided in the Book Now Button section. You can copy the code and embed it into your website. The link will open the Booking Engine in a new tab. If needed, you can replace the default URL with your property's specific booking link. widgets

[!NOTE]

Troubleshooting Book Now Button​

Button does not appear on the website

  • Confirm that the HTML anchor tag is correctly placed within your website’s code.
  • Ensure that your website platform or CMS allows the insertion of custom HTML.

Button appears but does not redirect anywhere

  • Check that the href attribute in the anchor tag contains a valid Booking Engine URL.
  • Make sure there are no typos or extra spaces in the URL.

Button opens a blank page or error page

  • Verify that the Booking Engine URL is live and accessible.
  • If you customized the link, double-check for missing query parameters or unsupported values.

Button opens in the same tab (not a new tab)

  • Make sure the target="_blank" attribute is included in the anchor tag to open the Booking Engine in a new tab.

Design or styling looks broken

  • Apply consistent styling via CSS to match your website theme.
  • Check for conflicting styles or broken layout in mobile view.

Variables for Direct Access​

This feature allows you to construct a direct booking URL that includes predefined parameters such as dates, room, rate, and currency.

Available URL Variables​

Use the following base URL:
https://www.bookandlink.com/booking/booking-page.php

Append variables as needed:

  • id (property ID) – Mandatory
  • checkin (dd-mm-yyyy) – Optional
  • checkout (dd-mm-yyyy) – Optional
  • promo (promo code) – Optional
  • roomid (room ID) – Optional
  • currency (3-digit code) – Optional
  • link (rateplan ID for direct selection) widgets

Example URL​

https://www.bookandlink.com/booking/booking-page.php?checkin=20-05-2025&checkout=21-05-2025&id=64&cy=USD&roomid=202

You can generate custom booking links for marketing campaigns, email promotions, or specific room/package promotions using these parameters. widgets

[!NOTE]

Troubleshooting Variables for Direct Access​

Link redirects to a blank or error page

  • Ensure the id (property ID) parameter is present; this is mandatory.
  • Verify that the property ID used is correct and active.

Dates are not applied on the Booking Engine page

  • Check that the checkin and checkout formats follow dd-mm-yyyy.
  • Confirm that the selected dates are available and not in the past.

Promo code not working

  • Confirm that the promo code is valid, active, and applicable to the selected dates or room.
  • Make sure the code was typed exactly as configured (case-sensitive).

Room or rate is not preselected

  • Double-check that the roomid and link values correspond to valid, published IDs in the system.
  • If the roomid is valid but the room does not appear, ensure it is available for the specified dates.

Currency is not applied

  • Ensure you’re using a valid 3-digit currency code (e.g., USD, EUR, IDR).
  • Confirm that the selected currency is enabled for the property.

Link shows default landing page instead of booking form

  • Check the full URL syntax—parameters must be joined using & and preceded by ? after the base URL.
  • Example structure: ?id=64&checkin=20-05-2025&checkout=21-05-2025&roomid=202&cy=USD