57:I[473921,["/creators-assets/_next/static/immutable/chunks/3c-b-8ufmviux.js","/creators-assets/_next/static/immutable/chunks/2lb80c7sdmm1x.js","/creators-assets/_next/static/immutable/chunks/24qz5wotuh5hj.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/0j6nsovyxcqkz.js","/creators-assets/_next/static/immutable/chunks/3mwqlk6tp5l2t.js","/creators-assets/_next/static/immutable/chunks/2dvu3r_tb3ihz.js","/creators-assets/_next/static/immutable/chunks/1q7v4rdbqi_5d.js","/creators-assets/_next/static/immutable/chunks/2fw--q9y_1nc-.js","/creators-assets/_next/static/immutable/chunks/1w_rozgc2dplq.js","/creators-assets/_next/static/immutable/chunks/0dglr8x18qkm5.js","/creators-assets/_next/static/immutable/chunks/0a8vglvd9phm3.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/06p8bv9p94pxh.js","/creators-assets/_next/static/immutable/chunks/42u1pxaq7eeka.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/2bbm33yuxi64a.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/0kjwwabuczr28.js","/creators-assets/_next/static/immutable/chunks/088oy6f_9ll4s.js","/creators-assets/_next/static/immutable/chunks/22zq93dcklbwz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/0eljubaqaqluk.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3g7os-hf6q3tv.js","/creators-assets/_next/static/immutable/chunks/1e3mmtw6okz19.js","/creators-assets/_next/static/immutable/chunks/3fcb65_46-jt7.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/28h79imj-g45k.js","/creators-assets/_next/static/immutable/chunks/2x3imtac9af--.js","/creators-assets/_next/static/immutable/chunks/2t6l_zgbmmx8u.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/0_ulklfcrp-s3.js","/creators-assets/_next/static/immutable/chunks/3-uff2nrv83hw.js","/creators-assets/_next/static/immutable/chunks/0alicgkopr9se.js","/creators-assets/_next/static/immutable/chunks/0-kepukl8ldjk.js","/creators-assets/_next/static/immutable/chunks/2-u6q7fsgfx0e.js"],"PostDetailCard"] 58:T965,

A booking bar for hotel websites in Framer. Arrival, departure, guests and promo code go straight to the hotel’s own booking engine, so the guest lands on rates, not on an empty search page.

How to use

Paste Book Direct Bar into your Framer project
Pick the engine (Mews, Cloudbeds or SiteMinder / Little Hotelier) and paste the hotel’s ID. The documentation shows where each engine keeps it
Choose a layout and a field style, then set your colours and fonts
Turn on Test mode, check the link under the bar against the hotel’s engine, then turn it off and publish

Key features

Presets for Mews, Cloudbeds and SiteMinder / Little Hotelier, built from each engine’s own documentation
Test mode: the exact link the engine receives, live on the canvas and on the published site
Four layouts: Row, Grid, Button with a modal (bottom sheet on phones), or Modal only, opened from any button wrapped in the included Book Trigger
The row turns into a grid by itself on narrow widths
Three field styles: Joined, Separate or Minimal, with gap, border and shadow
Dates written in your site’s language: 12 Nov 2026, Thu 12 Nov or 12/11/2026
Labels on or off, uppercase or not, button radius and arrow, seven colours, three font controls and padding
Engine language follows your site’s locale; optional currency
Stay rules: default nights, minimum stay, maximum adults and children
Localizable labels, keyboard friendly: focus stays in the modal and Escape closes it
Sends data only to the engine you pick, on an address fixed in the code. No backend, no analytics calls, nothing stored

Full documentation, with five style recipes: miguelrecio-components.framer.website/book-direct-bar/docs

One-time payment. Single-Use licence: one website or project per licence. If the bar can’t talk to your engine, write to info@miguelrecio.es within 14 days and it gets fixed or refunded. Built for Lumbre, a hotel and restaurant template for Framer.

54:[["$","$L57",null,{"post":{"id":"01a12b05-37c4-742e-a342-b12feee64253","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"920e333b-d954-4e1c-a81b-95c8df3af6dc","name":"Miguel Recio Alfonso","slug":"miguel-recio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/920e333b-d954-4e1c-a81b-95c8df3af6dc/b82l5n72","followed":false,"followsYou":false},"media":[],"resources":[{"id":"1rNiiwVZ9etKlGxI1QoF","resolved":true,"title":"Book Direct Bar","body":"$58","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A booking bar for hotel websites in Framer.","marks":[{"type":"bold"}]},{"type":"text","text":" Arrival, departure, guests and promo code go straight to the hotel’s own booking engine, so the guest lands on rates, not on an empty search page."}]},{"type":"customHeading","attrs":{"level":2},"content":[{"type":"text","text":"How to use"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Paste Book Direct Bar into your Framer project"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pick the engine (Mews, Cloudbeds or SiteMinder / Little Hotelier) and paste the hotel’s ID. The documentation shows where each engine keeps it"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose a layout and a field style, then set your colours and fonts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Turn on Test mode, check the link under the bar against the hotel’s engine, then turn it off and publish"}]}]}]},{"type":"customHeading","attrs":{"level":2},"content":[{"type":"text","text":"Key features"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Presets for Mews, Cloudbeds and SiteMinder / Little Hotelier, built from each engine’s own documentation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Test mode: the exact link the engine receives, live on the canvas and on the published site"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Four layouts: Row, Grid, Button with a modal (bottom sheet on phones), or Modal only, opened from any button wrapped in the included Book Trigger"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The row turns into a grid by itself on narrow widths"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Three field styles: Joined, Separate or Minimal, with gap, border and shadow"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dates written in your site’s language: 12 Nov 2026, Thu 12 Nov or 12/11/2026"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Labels on or off, uppercase or not, button radius and arrow, seven colours, three font controls and padding"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Engine language follows your site’s locale; optional currency"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Stay rules: default nights, minimum stay, maximum adults and children"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Localizable labels, keyboard friendly: focus stays in the modal and Escape closes it"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Sends data only to the engine you pick, on an address fixed in the code. No backend, no analytics calls, nothing stored"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Full documentation, with five style recipes: "},{"type":"text","text":"miguelrecio-components.framer.website/book-direct-bar/docs","marks":[{"type":"link","attrs":{"href":"http://miguelrecio-components.framer.website/book-direct-bar/docs","target":"_blank","rel":"noopener noreferrer nofollow"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"One-time payment. Single-Use licence: one website or project per licence. If the bar can’t talk to your engine, write to "},{"type":"text","text":"info@miguelrecio.es","marks":[{"type":"link","attrs":{"href":"mailto:info@miguelrecio.es","target":"_blank","rel":"noopener noreferrer nofollow"}}]},{"type":"text","text":" within 14 days and it gets fixed or refunded. Built for Lumbre, a hotel and restaurant template for Framer."}]}]},"introduction":"Booking bar for hotel engines","slug":"book-direct-bar","author":{"framerUserId":"920e333b-d954-4e1c-a81b-95c8df3af6dc","name":"Miguel Recio Alfonso","slug":"miguel-recio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/920e333b-d954-4e1c-a81b-95c8df3af6dc/b82l5n72","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/920e333b-d954-4e1c-a81b-95c8df3af6dc/01a16a0e-0f06-7593-9f65-dc69174c5e88.jpg","metadata":{"tint":{"h":0,"s":0,"l":58},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-11T12:52:04.073Z","updatedAt":"2026-10-23T18:38:06.977Z","publishedAt":"2026-10-11T12:52:04.069Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://miguelrecio-components.framer.website/book-direct-bar/showcase","price":"15","paymentUrl":"https://buy.polar.sh/polar_cl_5pLr3U6dH5CSzWDfBOYtiydhxAqxhqmv6NITN2LUH6r","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"p34xVmyJTgzt9sywMZyy","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-11T12:52:04.676Z","updatedAt":"2026-10-11T12:52:04.676Z","reported":false,"type":"post"}}],"$L59"]

Suggested for you