Adding JS widget to Block Grid

Support
#1

Hi there,

I’m trying to add a Javascript restaurant booking widget (ResDiary) to a Block Grid and running into trouble.

The old version of the widget used an iFrame, which worked fine. The new widget is slightly different, and won’t display (even if wrapped in raw-content tags).

The code below is what I need to embed - should parts of that be included in the custom JS section? Or should it theoretically all go in the same place? The page in question is www.chanceandcounters.com/book

Thanks in advance,
Steve

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
    $(function() {
	var widgetFrame = $("#rd-widget-frame");
	widgetFrame.load("https://7723fded-c4a4-4605-b717-6a890ecd2c71.resdiary.com/widget/Standard/ChanceAndCounters/1644");
})
</script>

<div id="rd-widget-frame" style="max-width: 600px; margin: auto;"></div>
#2

Hi there,

You just need this portion of the code:

$(function() {
	var widgetFrame = $("#rd-widget-frame");
	widgetFrame.load("https://7723fded-c4a4-4605-b717-6a890ecd2c71.resdiary.com/widget/Standard/ChanceAndCounters/1644");
});

The first portion of the code is loading jQuery library which WordPress does include already. Kindly add that to X > Launch > Options > JS.

Now regarding this portion:

<div id="rd-widget-frame" style="max-width: 600px; margin: auto;"></div>

Add the code above to a Raw Content element and put that element to wherever you want on the page.

Thank you.

#3

Hi Christopher,

Hmm I’ve followed your instructions but none of the booking page content is loading. It’s just showing the header and footer but no body!

I’ve tried having the div code in its own Raw Content element but that didn’t seem to work either. Have I done something dumb?

Cheers,
Steve

#4

Hello Steve,

I am another staff checking this thread. I managed to resolved the issue by using these JS code:

(function($){
	$(function() {
		var widgetFrame = $("#rd-widget-frame");
		widgetFrame.load("https://7723fded-c4a4-4605-b717-6a890ecd2c71.resdiary.com/widget/Standard/ChanceAndCounters/1644");
	});
})(jQuery);

The widget is now displaying.

Please check your site now.