Embed in HTML

Intro

Prerequisites

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.

Alternatively

Wordpress users can use the plugin.

Example

The end result should look like the following

Instructions

Simple

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

<div style="height: 650px; width: 375px;">
 <iframe
   title="Availability calendar and enquiry form"
   width="100%"
   height="100%"
   src="https://dobu.uk/availability/richiejp?no_header&no_footer&min_scroll=640"
 />
</div>

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.

Complicated

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">
 <iframe
   title="Richie's Availability"
   width="100%"
   height="100%"
   src="https://dobu.uk/availabilty/richiejp?no_header&no_footer&min_scroll=640"
 />
</div>

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.