Content Area Code isn't showing on front page

[aleadfreak]

Hi,

We’ve created a content area and added code. The widget shows on cornerstone (using pro) but when we save and load on the front end the widget isn’t showing.

Images can be found here: https://imgur.com/a/Qqr8tbW

The code in the content area is here:

<script type="text/javascript">
	$(function() {
		var widgetFrame = $("#rd-widget-frame");
		widgetFrame.load("https://booking.resdiary.com/widget/MiniTall/TheYachtLondon1/8934?includeJquery=false");
	})
</script>

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

Help is much appreciated.

Alex

[nabeel]

Hey Alex,

Thank you for reaching out to us. Instead of adding your code in Content Area element, add the following script in your Cornerstone’s JS section:

    $(function() {
		var widgetFrame = $("#rd-widget-frame");
		widgetFrame.load("https://booking.resdiary.com/widget/MiniTall/TheYachtLondon1/8934?includeJquery=false");
    });

Then add your HTML in a Raw Content element in Cornerstone:

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

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[franticape]

Hi guys,

Just FYI, you can use an Iframe for this.

In this case the result would be:

<iframe src="https://booking.resdiary.com/widget/MiniTall/TheYachtLondon1/8934" allowtransparency="true" frameborder="0" style="width:100%; border:none; max-width: 540px; height: 640px; "></iframe>

You just need to add your clean link over there (without the jquery parameter) and that’s it.

You can change “max-width” and “height” to suit your liking too.

Cheers,
Alejandro.

[nabeel]

Hey Alejandro,

Thanks for writing in! Yes that’s correct you can include the script source in an iframe and style it accordingly. That’s actually an easier approach. Thank you for sharing with us Alejandro.

Cheers!