Embed in HTML



You need the nickname of a DoBu.uk account. See sharing your availability.

Not all web hosts will allow you to embed IFrame's or CSS. You may need to check with your provider.

In the worst case our example will need to be adapted to your website's construction. This could require a lot of technical knowledge.


Wordpress users can use the plugin.


The end result should look like the following



You may copy and paste this HTML code into your website.

<div style="height: 650px; width: 375px;">
   title="Availability calendar and enquiry form"

In the best case you only need to change "richiejp", located in the "src" line, to the desired nickname.

The above HTML has an inline style which uses a set width and height. The embedded calendar will not change shape.


In abstract terms you can do the following to embed our calendar.

  1. Wrap the IFrame in an element with a height of 650px and width of 375px. Optionally you can make the IFrame reactive by setting a maximum width instead.
  2. Set the IFrame's width and height HTML attributes to 100%.
  3. Link the IFrame to DoBu.uk by setting the src attribute to a URL of your calendar or enquiry form.
  4. Describe the calendar in the IFrame's title attribute for screen readers.

The following CSS code can be used to create a reactive IFrame. Where you insert this code into your website is up to you.

.dobuuk-availability {
	height: 650px;
	width: 100%;
	max-width: 1280px;

.dobuuk-availability iframe {
	top: 0;
	position: sticky;
	border: 1px solid #e2e8f0;
	padding: 0;
	margin: 0;

This creates the "dobuuk-availability" class which can be used on the wrapping element. Below we use a "div".

<div class="dobuuk-availability">
   title="Richie's Availability"


The width of this IFrame will increase up to a maximum of 1280px. Note that the element containing the div needs to have a width set as well.