Book Direct Bar · Documentation · Version 1.2
Set it up, then make it yours.
How it works, where each engine keeps the hotel’s ID, every setting in the panel, and five looks to start from.
01
Start here, four steps.
01
Add it to your project
Open the link in your purchase email, or the Marketplace page, and drop Book Direct Bar on the page. Usually right under the hero.
02
Connect the engine
Pick Mews, Cloudbeds or SiteMinder / Little Hotelier in Engine and paste the hotel’s ID in Property ID. Engines, below, shows where each one keeps it.
03
Make it yours
Choose a Layout and a Fields style, then set colours, radius and fonts to match the site. Recipes, below, has five looks to start from.
04
Test, then launch
Turn on Test mode, search once and open the link it prints on the hotel’s real engine. When it lands on the right rates, turn Test mode off and publish.
02
How it works.
The guest picks dates, guests and an optional promo code. When they press the button, the bar builds the engine’s own search link with those values and opens it. The guest lands on rates for their dates, on the hotel’s engine, ready to pay.
No API keys, no backend, no account to connect.
Nothing is stored and nothing is sent to analytics. The only place the search goes is the engine you pick.
Fixed addresses. Each engine’s address is in the code (app.mews.com, hotels.cloudbeds.com, direct-book.com or book-directonline.com) and can’t be changed from the canvas.
Valid dates. Departure is always after arrival and respects your minimum stay.
Live, in test mode: change the dates and the line under the bar shows exactly what Cloudbeds would receive.
03
Engines, and where each keeps the ID.
Mews
The Booking Engine Configuration ID. In Mews: Settings › Services › your stay service › Booking engines › Identifier. A long ID with dashes. The Enterprise ID won’t work.
app.mews.com/distributor/{ID}
mewsStart, mewsEnd, mewsAdultCount, mewsChildCount, mewsVoucherCode, language, currency
en-US, es-ES, fr-FR, de-DE, it-IT, pt-PT or nl-NL, from Engine language.
Cloudbeds
The property code. In Cloudbeds: Settings › Booking Engine › Summary. It’s the short code after /reservation/ in your booking link.
hotels.cloudbeds.com/{language}/reservation/{code}
checkin, checkout, adults, kids, promo, currency (lowercase, like eur)
Goes in the path, like /es/reservation/…
SiteMinder / Little Hotelier
The channel code after /properties/ in your booking engine URL.
Global uses direct-book.com, Asia-Pacific uses book-directonline.com. Pick the one your current booking link uses.
checkInDate, checkOutDate, items[0][adults], items[0][children], items[0][infants] (always 0), promocode, locale, currency
SiteMinder ignores codes with spaces or accents, so the bar sends only letters, numbers, - and _.
Another engine? Every engine is checked against its own documentation before it’s added, so the bar never guesses where a guest’s dates go. Using another one? Write to info@miguelrecio.es.
04
Four layouts, one component.
Every field in one line, for the first screen under the hero. When the bar is narrower than Stack below, 820 px by default for all five fields and less with fewer, it turns into a two-column grid by itself.
Two columns, with the last field and the button full width. For room pages, sidebars and cards.
Only the call to action. The fields open in a sheet on phones and a centred dialog from tablet up.
Invisible on the page. A Book Trigger opens the dialog, so a header button, a room card or a text link can all start a booking.
Open it from your own buttons. Book Direct Bar comes with a second component, Book Trigger: its link is in your order note. Paste it onto the canvas, connect your own button to its Button slot and leave Opens as book. It only listens to clicks on that button, so every other link on the page works as usual. A link to /your-page#book from another page opens the dialog too.
A different layout per breakpoint. Each breakpoint keeps its own settings. A common setup: Row on Desktop, Grid on Tablet, Button on Phone.
05
Customize the look.
Joined: one bar with thin dividers. Separate: each field is its own card, with Gap between them. Minimal: no boxes, a line under each field, on your section’s own background.
12 Nov 2026, Thu 12 Nov, 12/11/2026 or the browser’s own format, always in the site’s language. Tapping a date opens the device calendar.
Turn Labels off for a cleaner bar: screen readers still hear them. Uppercase switches between ARRIVAL and Arrival, and the button follows.
Background, Text, Labels colour, Lines, Button and Button text. Modal sets the dialog. Pick your site’s colour styles so the bar follows your palette. On dark, turn on Dark pickers.
Radius rounds the bar or each card. Button radius rounds the button on its own, 40 makes a pill. Button arrow adds →. Border and Shadow lift it off the page. Field padding sets the space inside.
Label font, Value font and Button font. Choose your site’s fonts and sizes in each one.
Recipes
Five starting points. Copy the settings, then swap in your colours and fonts.
Classic bar
Fields Joined · Radius 12 · Border · Shadow
Floating cards over a photo
Fields Separate · Gap 10 · Button radius 40 · Button arrow · Dates Thu 12 Nov · Uppercase off
Editorial
Fields Minimal · Gap 24 · Dates 12/11/2026 · Uppercase off · Button radius 4
Dark, no labels
Fields Separate · Gap 4 · Labels off · Radius 0 · Promo code off · Dark pickers · your dark and accent colours
Room page sidebar
Layout Grid · Fields Separate · Shadow · Button arrow
06
Every setting, in panel order.
Engine
Mews, Cloudbeds or SiteMinder / Little Hotelier.
The hotel’s ID in its engine. See Engines.
SiteMinder only: Global or Asia-Pacific.
Auto follows the site’s locale. Engine default sends none. Or fix one of seven languages.
A three-letter code like EUR. Empty uses the engine’s default.
Opens the engine in a new tab. Off keeps the guest in the same tab, which most engines prefer.
Prints the exact link under the bar and keeps the button from leaving the page.
Fields and stay
Show or hide each field.
The highest number in each list.
How many nights the bar suggests on load.
Departure can never be earlier than this.
Text
Arrival, Departure, Adults, Children and Promo labels, Promo hint, Button label.
Open label for the Button layout, Modal title and Close label for Button and Modal only.
All of them are translated by Framer Localization.
Layout
Row, Grid, Button or Modal only.
Row only. Below this width the row becomes a two-column grid. Set for all five fields, fewer fields need less room. 0 keeps one line.
The word that connects the bar to its Book Triggers and to links like /your-page#book. book by default.
Book Trigger
A second component. Button: connect your own button, link or card. Opens: the Open on link word of the bar it opens, book by default.
Style
Joined, Separate or Minimal. Gap is the space between fields when they’re not joined.
12 Nov 2026, Thu 12 Nov, 12/11/2026 or Browser default.
Show labels, and write them in capitals.
Background, Modal, Text, Labels colour, Lines, Button, Button text, Dark pickers.
Radius, Button radius, Button arrow, Border, Shadow.
Label font, Value font, Button font, Field padding.
07
Languages and localization.
Every label is a property, so Framer Localization translates it like any other text.
Dates are written in the language of the page the guest is on.
With Engine language on Auto, the engine opens in the same language when it supports it. Otherwise it uses its own default.
08
Test mode, then launch.
Test mode prints, live, the exact link the engine will receive, on the canvas and on the published site, and stops the button from leaving the page.
Turn on Test mode and publish to a staging domain or preview.
Pick dates, two adults and a child, and a promo code if the hotel has one.
Copy the printed link into a new tab. It should open the hotel’s engine on rates for those dates.
Check the language and the currency.
Turn Test mode off and publish.
09
Measuring bookings.
The bar sends nothing to analytics, by design. To measure it:
In Google Tag Manager, track outbound clicks to the engine’s address, for example app.mews.com, as an event.
Read confirmed bookings and revenue in the engine’s own reports. Most engines also connect to Google Analytics themselves.
10
Accessibility.
Every field has a label for screen readers, even with Labels off.
Works with the keyboard. In the dialog, focus stays inside, Escape closes it and focus returns to the button that opened it.
Native date pickers on every device, and the sheet respects reduced motion.
11
If something looks off.
The Property ID is wrong or belongs to another account. Check it against your current booking link.
You pasted the Enterprise ID. Use the Booking engine Identifier.
The code has spaces or accents. Create one with only letters and numbers.
The engine doesn’t support that language, or Engine language is fixed. Set it to Auto.
The Book Trigger doesn’t open the dialog
The bar must be on the same page with Layout set to Button or Modal only, and Opens must match its Open on link. On the same page, use a Book Trigger rather than a plain link to #book.
Raise Stack below so it becomes a grid sooner, or pick Grid or Button for that breakpoint.
Turn on Dark pickers.
Test mode is on. Turn it off before you publish.
12
Updates and changelog.
New versions are free and listed here. To update, insert the component again from the Marketplace page or from the link in your Polar order, which always points to the latest version, and copy your settings across.
1.2 · October 2026
Book Trigger opens the dialog from any button you design, without listening to other links on the page. The promo field keeps every keystroke. Stack below adapts to the number of fields.
Three field styles (Joined, Separate, Minimal), readable date formats in the site’s language, Labels and Uppercase switches, a Row that turns into a grid by itself on narrow widths, Button radius and arrow, Border, Shadow and Gap, neutral default colours, and this documentation.
First release: Mews, Cloudbeds and SiteMinder / Little Hotelier, four layouts, Test mode.
13
Support and licence.
Questions or a bug? Write to info@miguelrecio.es. A person replies within two business days, Monday to Friday, CET.
One licence covers one designer and unlimited client projects. Reselling or redistributing the component isn’t allowed.
Rates, availability and payment are handled by the hotel’s engine. Book Direct Bar only opens it.