Embed the booking widget
The widget shows your live cabin availability and pricing on your own website. Every button sends the visitor to your AtHelm booking page with the cabin already selected.
Install it
- Open your AtHelm admin, go to Settings → Embed widget and pick a sailing.
- Copy the generated code.
- Paste it into your website where you want the cabins to appear, then publish.
<div id="athelm-widget"></div>
<script
src="https://athelm360.com/embed/v1/widget.js"
data-tenant="your-brand"
data-cruise="your-sailing-id"
data-target="athelm-widget"
data-mode="grid"
data-theme="auto"
async>
</script>Options
| Setting | Required | Default | What it does |
|---|---|---|---|
| data-tenant | Yes | — | Your brand's AtHelm handle, e.g. fetetopia. |
| data-cruise | Yes | — | The sailing to display. Copy it from your admin embed page. |
| data-target | No | athelm-widget | The id of the div the widget renders into. |
| data-mode | No | grid | grid, list or compact. |
| data-theme | No | auto | light, dark or auto (follows the visitor's device). |
| data-hide-cruise-info | No | false | Set to true to hide the sailing header. |
| data-hide-image | No | false | Set to true to hide the sailing picture. |
| data-hide-title | No | false | Set to true to hide the sailing name. |
| data-hide-details | No | false | Set to true to hide the dates, port and ship line. |
| data-cta-text | No | Book Now | Text on the button, e.g. Reserve my cabin. |
| data-limit | No | all | Maximum number of cabins to show, e.g. 3 or 6. Leave it out to show them all. |
Where to paste it
- WordPress: add a Custom HTML block (block editor) or switch the classic editor to Text mode.
- Squarespace: add a Code block to the page.
- Webflow: drop an Embed element on the canvas.
- Wix: Add → Embed Code → Embed HTML, then choose "Code".
- Plain HTML: paste it anywhere inside the page body.
More than one sailing
Repeat the whole snippet, giving each one a different div id and matching data-target. Each widget loads its own sailing independently.
If something looks wrong
- Nothing appears: the div id and
data-targetmust match exactly, and the div has to come before the script. - "Currently unavailable": the sailing isn't on sale yet, or the sailing id is wrong. Re-copy the code from your admin page.
- Prices look out of date: availability and pricing refresh about once a minute.
- Colours clash: switch
data-themeto light or dark instead of auto.
Questions
Does it slow my site down? No — the script loads after your page and stays under 40 KB. Can guests pay inside the widget? No, checkout always happens on your AtHelm booking page. Does it work on mobile? Yes, the layout adapts to phones, tablets and desktops.