Add the Travel404 booking widget to Framer
Add a live booking search bar to a Framer site with the Embed component — no paid plan needed just to use it.
Framer's Embed component takes raw HTML, including a <script> tag, and drops it into the canvas. Using the component itself doesn't require a paid plan — you'd only need one for a custom domain or removing Framer branding, which is unrelated to the widget.
Before you start
- Your property set up in Travel404 with a slug (Property → Booking Engine shows it).
- Edit access to the Framer project.
Steps
In Travel404
Copy the widget embed code
In the Travel404 app, go to Property → Booking Engine and open Compact Search Bar Widget. Under Embed Code, tap the copy icon. The code is two lines — a <div> and a <script> tag — and your property's slug is already filled in, so you won't need to edit anything before pasting it.
In Framer
Open the Insert menu
In your Framer project, open Insert (or press the keyboard shortcut) and search "Embed".
Drag the Embed component onto the canvas
Place it on the page, in the spot where you want the search bar.
Paste the code into the HTML field
Select the component, open its properties panel, and paste the two lines from Travel404 into the HTML field.
Set the sizing
Set the component's width to Fill and its height to a fixed value of about 600px — Framer's Embed component doesn't auto-fit height to arbitrary embedded content.
Publish the site
Click Publish. Framer's canvas preview doesn't always run third-party scripts the same way the live site does, so always confirm on the published URL.
The snippet to paste
<div data-t404-property="your-property-slug" data-t404-mode="widget"></div>
<script async src="https://travel404.com/embed.js"></script>How to tell it worked
Open the live page in a private/incognito window — not a tab you had open before pasting the code, which may show a cached version — and confirm the search bar loads with your property, the date pickers open, and Search takes the guest to a booking page. If nothing shows, re-check the steps above before assuming it's broken.
If something looks wrong
The Embed component shows a zero-height or blank box
Switch the component's height setting from Auto to Fixed and give it a value like 600px — Framer can't infer a height from an arbitrary script tag.
The calendar gets clipped when a guest opens it
Increase the fixed height further, or accept an inner scrollbar — the compact search bar itself is short, but the date-picker calendar needs more room to open.
It looks right on the canvas but not on the published site
This can happen with third-party scripts in Framer — always test the published URL, not the in-editor preview.
The widget shows in English but my guests are Spanish speakers
Add data-t404-lang="es" to the <div> (e.g. <div data-t404-property="your-property-slug" data-t404-mode="widget" data-t404-lang="es">). That attribute only applies to mode="book"; the widget snippet above always shows English.
Common questions
Do I need a paid Framer plan for this?
No, the Embed component works on the free plan. Paid plans matter for a custom domain or removing Framer branding, not for using Embed.
Can I add this to a CMS page template?
Yes — place the Embed component inside a CMS collection page just like you would on any other page.
Can I put the widget on more than one page?
Yes. Paste the same snippet anywhere it makes sense — homepage, a dedicated "Book now" page, even your footer. embed.js supports any number of copies on the same page or across the site.
See it running in your hostel
Set up in 30 minutes. No credit card required.