Book That In gives you a booking page that can be completely branded with your business' colours and logo. You can also embed the booking page on your own website as a Widget.


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 a deep link to your booking widget and use that as the WIDGETURL.


Using Wix? 

See our video tutorials on how to embed your widget on a Wix website here



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!