By the end of this guide, you'll have your booking widget live on your own website — guests pick dates, fill in a form, and you receive the booking. No portal redirects.
What you'll need
- A property under Your setup → Places (or a service under Services)
- Edit access to your website (or a developer who has it)
- ~5 minutes
- A working widget visible on your site
- Guests can pick dates and submit a booking
- The choice between two embed types (script or iframe), with the right one for your setup
Step 1: Open the widget detail page
The first widget is created automatically during guided setup. To open it:
Sidebar → click your property under Places → Widgets → click the widget in the list.
You'll see sections for Name & language, Type & styling, a Preview, the Embed code, and the Booking dialog fields.
The Embed code section only appears after the widget has been saved at least once. If you can't see it, click Save widget at the top.
Step 2: Pick an embed type
Cabintale offers two embed variants. Both are equivalent functionally — pick whichever fits your website best.
Script-based (recommended for most sites)
<cabintale-root data-place="[place-token]" data-token="[widget-token]"></cabintale-root>
<script src="https://admin.cabintale.com/widget-embed.js" async></script>What it does:
- Uses a custom HTML element (
<cabintale-root>) plus a small JS loader. - Auto-resizes to fit the calendar — no fixed height.
- Opens the booking dialog as a fullscreen overlay on the parent page (looks great on mobile).
Use it on: WordPress, plain HTML sites, Squarespace, Webflow, custom CMSs — anywhere you can paste two lines of HTML.
Iframe (simpler, more conservative)
<iframe
src="https://admin.cabintale.com/widget/[widget-token]"
width="100%"
height="450"
frameborder="0"
style="border: none;"
scrolling="no">
</iframe>What it does:
- Renders the entire widget inside a fixed-size iframe.
- Doesn't depend on the parent site allowing custom scripts.
- Booking dialog opens inside the iframe (so it's bounded by the iframe's height).
Use it on: site builders that block external scripts, intranets with strict CSP, or anywhere "just an iframe" is the path of least resistance.
The iframe heights are fixed by default (450px for places, 550px for services). You can adjust the height attribute if your design needs it.
Step 3: Copy the code
Toggle to your chosen variant, click Copy Script Code (or Copy Iframe Code) — the button briefly confirms it copied.
Step 4: Paste it on your website
Where to paste:
| Platform | Where |
|---|---|
| WordPress | Edit a page → add a Custom HTML block → paste |
| Squarespace | Add a Code block → paste |
| Wix | Embed → HTML iframe (use iframe variant) |
| Webflow | Add an Embed component → paste |
| Plain HTML | Anywhere inside <body> |
Save and publish the page. Visit it — the widget should render where you pasted the code.
Step 5: Test a booking
Click your widget like a guest would. Pick a date, fill in the form, submit. Check that:
- The booking shows up in Bookings in the admin.
- You receive the host email (if email notifications are turned on).
If you set the property to Request bookings mode, the booking will be pending until you confirm it (see Instant vs. Request booking).
What guests see
- Calendar with 1, 2, or 3 months visible (configurable in look & feel).
- Available dates are clickable; booked or zero-priced dates are blocked.
- After picking dates, a booking dialog opens with a configurable form (see Custom booking form).
- On submit, the guest sees a confirmation message — different wording for instant vs. request mode.
The widget URL is public-but-unguessable (a UUID token). It works standalone too — paste it into a browser and you get the same widget. Useful for sending a direct booking link by email.
Troubleshooting
| Symptom | Cause | Fix |
|---|---|---|
| Widget doesn't render at all | Property or widget is set to Inactive | Open the property and the widget; both must be Active |
| Embed code section is empty | The widget isn't saved yet | Click Save widget at the top of the detail page |
| Iframe is too short — booking dialog gets clipped | The default 450/550px height isn't enough for your form length | Increase the iframe height attribute, or switch to the script embed (it auto-sizes) |
| Copy button doesn't seem to work | Some browsers block clipboard access on insecure pages | Use HTTPS, or select the code text and copy with Ctrl+C / Cmd+C |
| Widget shows the wrong language | Widget language is set to something else | Open the widget detail and change Widget language (see Languages and currencies) |
| The script embed throws a CSP error in the browser console | Your site has a strict Content Security Policy | Allowlist https://admin.cabintale.com for script-src and connect-src, or switch to the iframe embed |
Related guides
- Multiple widget variations — Multiple widget variations
- Look & feel (theme, colors, layout) — Widget look & feel
- Custom booking form — Custom booking form
- Time-slot calendar (for services) — Time-slot calendar (Service widget)