Add the Travel404 booking widget to Carrd
Add a booking search bar to your Carrd site with the Embed element. Requires Carrd Pro Standard or higher — the free and Pro Lite tiers don't include it.
Carrd's Embed element accepts raw HTML, CSS and JavaScript, but it's gated behind a plan tier: you need Pro Standard or above. Pro Lite (the entry paid tier) doesn't unlock it, and neither does the free plan.
Before you start
- A Carrd site on the Pro Standard plan or higher.
- Your property set up in Travel404 with a slug (Property → Booking Engine shows it).
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 Carrd
Open your site in the Carrd builder
Go to the section of the page where you want the widget.
Add an Embed element
Click Add Element (the + button) and choose Embed.
Set Type to Code
In the element's settings, set Type to Code (not URL).
Paste the snippet and set Style to Inline
Paste the two lines from Travel404 into the Code field, then set Style to Inline so it renders where you placed it — Hidden injects it into the page's head/body instead, where it won't show.
Publish
Carrd's builder doesn't run embedded code in its own preview — publish the site and check the live page.
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
I don't see an Embed option at all
You're likely on Pro Lite or the free plan — the Embed element needs Pro Standard or higher. Check Account → Upgrade.
Nothing shows after publishing
Check the element's Style setting — if it's set to Hidden, the code gets injected into the page's head or body instead of rendering visibly. Switch it to Inline.
The widget shows a scrollbar or the calendar gets cut off
Carrd's Embed element is a fixed-size box like Wix's — drag it taller in the builder (600px is generous) to leave room for the calendar.
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
Which Carrd plan do I need?
Pro Standard or higher. Pro Lite and the free plan don't include the Embed element.
Can I preview the widget before publishing?
No — Carrd only runs embedded code on the published site, not in the builder preview.
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.