Dates and guests, straight to the hotel’s engine.
A booking bar for hotel sites in Framer: dates, guests and promo code open the hotel’s own engine with the search already filled in.
$15
Live, in test mode. Change the dates: the line under the bar is exactly what Cloudbeds would receive, and nothing leaves this page.
What it is, and how it works.
Most hotel websites send their booking form to an inbox, or drop guests on the engine’s empty search page. Book Direct Bar skips both: it builds the engine’s own search link, so the guest lands on rates for the dates they chose. No API keys, no backend, nothing stored.
1 · The guest picks
12 Nov → 14 Nov
2 adults · 1 child · code AUTUMN
2 · The bar builds the link
Book Direct Bar
Mews · Cloudbeds · SiteMinder
3 · The engine opens
Rates for 12–14 Nov, 2 + 1
On the hotel’s own engine, ready to pay
Under the hero
A full row across the first screen, where most guests start looking for dates.
On room pages
A two-column grid beside the room, so the search starts where the decision is made.
On phones
One button that opens the fields in a bottom sheet. Or no bar at all: a Book Trigger on any button opens it.
Try it with your engine.
Three decisions behind it.
Checked against each engine’s docs
The Mews, Cloudbeds and SiteMinder presets use the parameter names from each engine’s own documentation and booking code. If an engine can’t take a value by link, like child ages, the bar doesn’t pretend it can.
Mews
mewsStart · mewsEnd · mewsAdultCount · mewsChildCount · mewsVoucherCode
Cloudbeds
checkin · checkout · adults · kids · promo
SiteMinder
checkInDate · checkOutDate · items[0][adults] · items[0][children] · promocode
Test it before launch
Test mode prints the exact link under the bar, live, on the canvas and on the published site. Check it against the hotel’s real engine, then switch it off.
One component, four layouts
A row under the hero, a grid on room pages, a button with a sheet on phones, or no bar at all and a modal that opens from any button you wrap in a Book Trigger.
Tap it: the fields open in a sheet on phones and a dialog from tablet up.
Set it up in three steps.
01
Pick the engine
Choose Mews, Cloudbeds or SiteMinder / Little Hotelier, and paste the hotel’s ID. The engine tabs above show where each one keeps it.
02
Place it
A row under the hero, a grid on room pages, or a button for phones. Joined, separate or minimal fields, and your colours, fonts and radius.
03
Test, then launch
Turn on Test mode, search once and open the link on the hotel’s engine. When it lands on the right rates, turn Test mode off and publish.
Every setting, where each engine keeps the hotel’s ID, and five looks to start from.
Before you buy
No. It builds a link to the hotel’s engine and sends the guest there. Rates, payment and guest details stay in the engine.
Get Book Direct Bar
$15
One payment through Polar, invoice included. The component link arrives right after checkout.