/Help Center
GuideDeveloper reference

How to Use Widgets

How to embed HotelBee's booking widgets on external landing pages. Two flavors: a search banner that opens the booking flow in a new tab, and the full booking flow as a single iframe — both served per property under {property}.hotelbee.io.

Verified Apr 15, 2026

This page explains how to embed HotelBee's Booking Engine widgets on external landing pages.

Property Mapping (Multi-Tenant)

Widget URLs are served per property via subdomain:

  • {property}.hotelbee.io/booking/widgets/search — Widget #1 (Search Banner)
  • {property}.hotelbee.io/booking/booking — Widget #2 (Full Booking Flow)

The app determines {property} from the iframe/page hostname.

Widget #1: Search Banner (Banner-Only)

URL: https://{property}.hotelbee.io/booking/widgets/search

Behavior: When the user clicks Search, it opens a new tab to:

/booking/booking?checkin=YYYY-MM-DD&checkout=YYYY-MM-DD&adults=2&children=0&lang=...&currency=...

Optional Query Params (Recommended)

Widget #1 uses query params for localization/currency handoff:

  • lang: Localization code. en or sq at minimum. Passed through to /booking/booking. Example: en
  • currency: Currency code. If provided, passed through to /booking/booking. Example: EUR

Iframe Example

html
<iframe
  src="https://{property}.hotelbee.io/booking/widgets/search?lang=en&currency=EUR"
  style="border:0;width:100%;height:650px;"
  loading="lazy"
  scrolling="no"
></iframe>

Widget #2: Full Booking Flow

URL: https://{property}.hotelbee.io/booking/booking

What it renders: The full booking flow (header/footer included).

Behavior: Reads query params and pre-fills dates/guests. If dates are missing or invalid, it falls back to today/tomorrow.

Query Parameter Contract

  • checkin (ISO date YYYY-MM-DD, default: today): Check-in date
  • checkout (ISO date YYYY-MM-DD, default: tomorrow): Check-out date
  • adults (integer, default: 2): Number of adults
  • children (integer, default: 0): Number of children
  • lang (string, optional): Localization code (e.g. en, sq)
  • currency (string, optional): Currency code (e.g. EUR)

Iframe Example

html
<iframe
  src="https://{property}.hotelbee.io/booking/booking?checkin=2026-04-01&checkout=2026-04-05&adults=2&children=0&lang=en&currency=EUR"
  style="border:0;width:100%;height:900px;"
  loading="lazy"
></iframe>

Notes / Gotchas