12seasalliance Developers

Embed · availability widget

Put live availability on your website

Your fleet's departures, prices and a WhatsApp button — on your own site, in one snippet. No API key ever touches the browser: the widget is authorized by its embed id plus the list of websites you allow.

Open the API reference →

Three steps

1
Create a widget. In the operator platform, open Settings → Developer → Availability widgets. Add every website domain that will show it — the widget refuses to work anywhere else. Pick a layout, your WhatsApp number, and copy the snippet: it already carries the right host for your environment.
2
Paste it where the calendar should appear. The script is ~2 KB, loads async, never touches your page's styles or scripts, waits for your framework to finish before drawing (React/Vue safe), and keeps a fixed placeholder height so your layout never jumps. If it can't render (a strict CSP, an old theme) it falls back to an iframe by itself.
Loader snippet
<div data-12sa-avail data-embed="emb_XXXXXXXXXXXX"></div>
<script src="https://openapi.12seasalliance.com/v1.js" async></script>
On React / Next.js sites
// React / Next.js — the plain snippet works here too (the
// loader waits for hydration by itself). This variant is the extra-tidy option:
import Script from "next/script";

<div data-12sa-avail data-embed="emb_XXXXXXXXXXXX" suppressHydrationWarning />
<Script src="https://openapi.12seasalliance.com/v1.js" strategy="lazyOnload" />
Or the iframe, directly
<iframe
  src="https://openapi.12seasalliance.com/embed/availability?embed=emb_XXXXXXXXXXXX"
  style="width:100%;border:0;min-height:320px" title="Availability"></iframe>
3
Wire visitor consent. The widget reports loads, views and WhatsApp clicks to your dashboard — but only after your page says the visitor consented. Without a signal, nothing about the visitor is stored (the WhatsApp link itself always works).
Consent from your cookie banner
<!-- with a consent signal from your cookie banner -->
<div data-12sa-avail data-embed="emb_XXXXXXXXXXXX" data-consent="granted"></div>
<script src="https://openapi.12seasalliance.com/v1.js" async></script>
<script>
  // or grant it later, when your visitor accepts:
  window.__S12A__ && window.__S12A__.consent(true);
</script>

Good to know