How to embed your booking widget on your website

Your Branded, Booking Widget Page

You can edit your widget's colours and you can send your customers directly to your booking page, hosted by Book That In. Edit your widget and get your Widget URL here.

Depending on your preferences, you may want to create specific pages on your website for specific addresses or categories, with an embedded booking widget on that page for just the bookings related to them.

The options below will both allow you to do this - you will just need to get the correct booking link and use that as the WIDGETURL.

See How to create and share booking links to take bookings via Book That In to find deep links.

Using Wix?

Check this tutorial which runs through Wix specifics: How to Embed Your Booking Page / Widget on a Wix Website

Here's how to embed your widget on your website:

Simple Embed:

1. Copy and Paste the code below into your website, substituting your widget URL where it says WIDGETURL:

<iframe src="WIDGETURL" width="100%" height="600"/>

Advanced (but much better) Embed:

The simple embed option above can cause some issues on mobile because, if the content of the iframe gets bigger than the iframe itself, it can create a 'double-scrolling' issue for users where they can scroll both the content of the iframe and the web page, with the swipe of their finger - and it isn't always clear which bit they are scrolling. The advanced embed option eliminates this issue by automatically resizing the iFrame to its contents.

1. Copy and Paste the code below, substituting your widget URL where it says WIDGETURL:

<iframe id="btiWidget" scrolling="no" src="WIDGETURL" width="100%" height="500" style="border: none;"></iframe>

2. Copy and paste the following script into the HTML on your web page.

You should enter this code underneath the widget code in step 1 so that it loads after the widget itself.

<script>var btiWidget=document.getElementById("btiWidget");function setBTIWidgetHeight(t){t!=btiWidget.getAttribute("height")&&btiWidget.setAttribute("height",t+"px")}function handleDocHeightMsg(t){if("https://bookthatin.com"===t.origin){var e=JSON.parse(t.data);e.docHeight&&setBTIWidgetHeight(e.docHeight),e.btiWidgetScrollTop&&btiWidget.scrollIntoView()}}window.addEventListener?window.addEventListener("message",handleDocHeightMsg,!1):window.attachEvent&&window.attachEvent("onmessage",handleDocHeightMsg);</script>

3. Test It

The script will be doing its job properly if the size of the widget iframe adjusts automatically to the content it is displaying. If you see the height of the widget changing as you move through the booking process, then it is working properly.

If it isn't working properly, the most likely explanation is that the code hasn't been added correctly so you should check this first.

Please contact us if you need any assistance!