How to embed the widget configurator on your website.


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:



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="https://7723fded-c4a4-4605-b717-6a890ecd2c71.resdiary.com/widget/Standard/BossaNova1/39" 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!

 

 

If you need help with any of the above, please contact support@resdiary.com


“My widget is displaying incorrectly”

 

  1. Check for !important tag

 

This tag is used on certain styles to get them to override inline CSS. (This is the language that tells the browser how things should look). Essentially, the “important!” tag tells your browser to ignore any other style, and therefore may override the styles the widget automatically puts in place. 

 

To check if this is happening, inspect the element of the page that isn’t displaying correctly. Right-click on the element and select “inspect” (Note: we’re using chrome for this example, other browsers may use slightly different terminology/phrases.) It should bring up a panel that looks like this: 


 


It might seem like the stuff of nightmares, but you don’t need all of it. Let’s take a closer look. 



 

The top section of this screenshot (outlined in green) is displaying your pages HTML, which acts as a skeleton for the CSS (outlined in blue).  Take a scroll down the blue section and see if you can see any lines of code that end in “!important”. Check for more than one, as there could be multiple, and removing one might not solve the whole problem. If you can’t see any, try clicking on the surrounding divs (on the HTML tab) and check those, too. 

 

If you change anything in the Inspector, the webpage you're on will update so you can see if what you’re doing has an effect. 

 

Copy any changes you make into your stylesheet as they’re not stored from the inspector.  If you’re not sure how to do that, contact the web developer that set up your website and ask. Once in, have a check around to see if removing it has broken any other aspect of your site. If it has, politely ask your web developer to fix it without just putting the “!important” tag back in. 

 

        2. Check where the code affecting the broken section is coming from


Open the inspector, focusing on the bottom section. This time, you’re looking at where the different aspects of the code are coming from.

If it’s meant to be there, the id (highlighted in purple) will say “#rd-widget” somewhere within it. If it doesn’t, it’s most likely being generated by your webpage. 

 

If this is the case, toggle the styles (a checkbox appears when you hover off them to enable/disable the feature) it’s adding on/off and see if that solves the problem. 

 

** Please note: this is likely to affect your entire webpage. Please check the rest of the page to see if it’s caused any problems.**

 

If it only affects the widget, you can simply remove that section from your stylesheet (again, if not sure how ask your web dev). However, if it fixes the problem but causes others, talk to your web dev or  contact support@resdiary with the problem and we’ll look at it.