Use the embed code provided at the end of the custom widget design process to copy and paste this into the relevant part of your website. If you or your web design team come across any issues with what looks to be conflicting formatting with your website, please read through this article.
📌 Note: All the examples you'll see below use a test widget URL, you'll need to add your own bespoke widget URL anywhere you see the below instance:
Troubleshooting your widget code
Below is a series of solutions to resolve a common error that might appear when attempting to embed your booking widget.
Widget isn't displaying at all
When embedded on your website, things going wrong tend to be due to conflicting versions of jQuery being loaded onto your webpage. Your widget code should look like this at the moment:
<script type="text/javascript" src="https://7723fded-c4a4-4605-b717-6a890ecd2c71.resdiary.com/bundles/jquery.js"></script>
<script type="text/javascript">
$(function() {
var widgetFrame = $("#rd-widget-frame"); widgetFrame.load("https://7723fded-c4a4-4605-b717-6a890ecd2c71.resdiary.com/widget/Standard/BossaNova1/39?includeJquery=false");
})
</script>
<div id="rd-widget-frame" style="max-width: 600px; margin: auto;"></div>
Replace the dollar $ signs
Take the two dollar $ signs you see on [ $(function() and $(“#rd-widget-frame”); ] and replace them with the word jQuery, it should look something like the below:
<script type="text/javascript" src="https://7723fded-c4a4-4605-b717-6a890ecd2c71.resdiary.com/bundles/jquery.js"></script>
<script type="text/javascript">
jQuery(function() {
var widgetFrame = jQuery("#rd-widget-frame");
widgetFrame.load("https://7723fded-c4a4-4605-b717-6a890ecd2c71.resdiary.com/widget/Standard/BossaNova1/39?includeJquery=false");
})
</script>
Remove the script tag
The version of jQuery your website is using could be compatible with our widget already. You’ll need to remove this to find out:
<script type="text/javascript" src="https://7723fded-c4a4-4605-b717-6a890ecd2c71.resdiary.com/bundles/jquery.js"></script>
Use a jQuery migrate
If neither of the above solutions work, you might need a migrated version of jQuery. A jQuery migrate is designed to bring older versions of jQuery up to date with the current ones, without losing any functionality provided by the older library. We recommend asking your web developer to look at this for you; here are all editions of jQuery, with the migrates listed at the bottom.
The iframe option looks something like this:
<iframe src="ENTER_WIDGET_URL_HERE" allowtransparency="true" frameborder="0" style="width:100%; border:none; max-width: 540px; height: 640px; "></iframe>
Just replace the link with the one relevant to your website widget and you’re good to go!