With the embed code provided at the end of the custom widget design process, you should be able 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 refer to the following:
Please Note: - the below example uses a test widget URL.
You will need to add your own bespoke widget URL anywhere you see the below instance -https://booking.resdiary.com/widget/Standard/BossaNova1/40
Troubleshooting - 'My widget isn’t displaying… At all'
You have your widget code; it should look something like this:
<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>
When embedded on your website, things going wrong tend to be due to conflicting versions of jQuery being loaded onto your webpage.
1. Replace the $ signs
The first fix deals with this bit of code:
<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>
Sometimes, it’s as simple as taking the two $ signs you see here [ $(function() and $(“#rd-widget-frame”); ] and replacing them with the word jQuery. The rectified code should look something like this:
<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>
<div id="rd-widget-frame" style="max-width: 600px; margin: auto;"></div>
Pop that onto your site and see if it works.
2. Removing 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>
To leave:
<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>
<div id="rd-widget-frame" style="max-width: 600px; margin: auto;"></div>
The easiest way to do this is to either edit the code yourself, or return to your Widget Configurator and, on the code generator page, untick the box "include jQuery". It's important to note that, if you do this, your own site will need to already load in jQuery and jQueryUI. If you don't know what this means, try putting it in without those two files, regardless, and if it doesn't work copy the old code back in and try the next tip.
3. 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; you can find all editions of jQuery here, with the migrates listed at the bottom.
If you don’t have a Web Developer or none of these solutions work, either swap to the iframe or get in contact with support@resdiary.com and we shall look at it. We will most likely ask for access to your ftp/site backend (as well as a link to the broken page) in order to fix things. We will only use this information to fix the problem at hand.
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!