Live embed examples

Two ways to put Charter Direct on your site.

Both options run real, live code — the snippets below are the exact ones you'd paste into your CMS, and the previews are powered by embed.js running right here on this page.

Option A

Your website + our booking flow embedded

Drop a single button onto any boat page on your existing website. When customers click it, our full booking flow opens in a popup — calendar, options, payment — without ever leaving your site. You keep your branding above the fold; we handle the booking complexity.

1. Paste this on your boat page

<script src="https://www.charterboatsdirect.com.au/embed.js" data-base-url="https://www.charterboatsdirect.com.au" defer></script>

<button type="button"
        data-cd-boat="7cbfd93da80a"
        data-cd-agent="kurts-boats-agent"
        data-cd-sig="c2e35c76789e0d871dc592a197a71c4ffc1dfad1f2902334b59163509e90ab9a">
  Book The Sunseeker
</button>

2. Live preview — click the button

↓ This is the live snippet in action ↓

Opens the full Charter Direct booking flow in a modal.

Option B

Our catalogue embedded into your website

No need to build product pages for every boat. Drop a single <div> on any page and your full agent catalogue renders inline, styled to fit any layout. Each card opens the same booking popup as Option A, with your commission attached.

1. Paste this where the catalogue should appear

<script src="https://www.charterboatsdirect.com.au/embed.js" data-base-url="https://www.charterboatsdirect.com.au" defer></script>

<div data-cd-agent="kurts-boats-agent"></div>

The grid renders client-side via a public JSON endpoint — no API key, no CORS config, no build step.

2. Live preview

No website? No problem — use your hosted agent page.

Every agent gets a free, public catalogue page hosted by us — share it on social media, in emails, or as a booking link in your bio. Your page is live at charterboatsdirect.com.au/a/kurts-boats-agent

View your page

Ready to embed?

Create agent account