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
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 gives you two snippets to choose from. They both put the same widget on your page — pick whichever fits your website best.
Script (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>- Sizes itself to fit the calendar — no fixed height to set.
- The booking dialog opens full-screen over your page (looks great on mobile).
- Works on WordPress, plain HTML sites, Squarespace, Webflow, custom site builders — 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>- Drops the whole widget into a fixed-size box on your page.
- The booking dialog opens inside that box.
- Good for site builders that don't allow the script above, or anywhere "just an iframe" is the easiest path.
The box height is set for you (450 for places, 550 for services). If your booking form is long and gets cut off, raise the height number.
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 the iframe snippet) |
| Webflow | Add an Embed component → paste |
| Plain HTML | Anywhere inside <body> |
Save and publish the page. Visit it — the widget should appear 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 form you can customize (see Custom booking form).
- On submit, the guest sees a confirmation message — different wording for instant vs. request mode.
Troubleshooting
| Symptom | Cause | Fix |
|---|---|---|
| Widget doesn't appear 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/550 height isn't enough for your form length | Raise the iframe height number, or switch to the script snippet (it sizes itself) |
| Copy button doesn't seem to work | Some browsers block copying on insecure pages | Make sure your site uses HTTPS, or select the code and copy with Ctrl+C / Cmd+C |
| Widget shows the wrong language | Widget language is set to something else | Open the widget and change Widget language (see Languages and currencies) |
| Script snippet doesn't load on your site | Your site blocks outside scripts | Switch to the iframe snippet, or ask your web person to allow admin.cabintale.com |
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)