Embed in HTML

Your embed

Downloading icon

Select a calendar and choose how tall it should be, then copy the generated HTML.

Example embed HTML

<div style="width:100%;max-width:1280px;height:650px"><iframe title="Availability calendar" width="1280" height="650" style="display:block;width:100%;height:100%;border:0" src="https://dobu.uk/availability/your-nickname?embed="></iframe></div>
<script>
(function () {
  var wrap = document.currentScript.previousElementSibling;
  var frame = wrap && wrap.querySelector('iframe');
  if (!frame) return;
  window.addEventListener('message', function (e) {
    if (e.origin !== "https://dobu.uk") return;
    if (e.source !== frame.contentWindow) return;
    if (!e.data || e.data.type !== "dobuuk:height") return;
    var h = Number(e.data.height);
    if (!(h > 0)) return;
    h = Math.min(h, 2000);
    wrap.style.height = h + 'px';
  });
})();
</script>

Replace your-nickname with the nickname of the DoBu.uk profile you want to embed.

Preview

This example uses the richiejp profile. Select a saved profile above to preview your own calendar.

Choosing a height

The snippet has two parts. The wrapper carries a fixed height so the calendar is usable immediately, and the script replaces it with the calendar's real height once the page loads.

Keep both parts. If a provider strips the script the calendar stays at the fixed height, so choose one that fits: increase it if the calendar or enquiry form is clipped; unused space may appear when its content is shorter.

Before embedding

Some website providers remove iframes, scripts, or inline styles. Removing the script only costs automatic resizing; removing iframes or inline styles prevents the embed working at all. Check the provider's documentation if the code is rejected or its layout is constrained.

If the website cannot reliably host an iframe, use the linked image option. It is responsive, needs no script, and opens the interactive calendar when clicked.

WordPress users can instead use the block plugin.