Resdiary booking widget not working on wordprss blog : Dish Cult

F

Francesca Truss

started a topic almost 5 years ago

Hello resdiary house, I've tried all the possible means to get booking widget for resdairy working on my wordpress website all to no avail. I even had to rewrite tht code to make it work but it won't, what is wrong ? Do you have any wordpress plugin related to this? I've read all the support ticket and non solved it, after updating the code on the website I will just have a blank layout on the supposed widget area

C

Charmaine Blatchford

said over 4 years ago

Had the same issue Francesca - did you find a solution?

O

Oscars Bistro

said about 4 years ago

OK, I have got it working on our Wordpress site. Not easy.
1st you need to install a plugin called WP Custom HTML Pages. Then you create a basic HTML page with the code from ResDiary pasted into the BODY of it.

2nd you need to install a plugin called iframe (Simple).

3rd Inside your code block you put the iframe shortcode that points to your HTML page that you created before.

Gregory Simons

said almost 2 years ago

Not sure if anyone else is experiencing this problem - we recently encountered an issue when embedding the resDiary widgets into our site (wordpress/elementor CMS) this was due to missing functions / conflicting functions with our website script and resDiary script. It was somewhat of a work-around, however we fixed this via embedding the widget into a standalone html page (with a bit of javascript recording the document height) then embeding this page as an iframe and re-sizing the window height dynamically using javascript. Code below (not tidy!):

Stand-alone HTML page (to embed to iframe):

<html>
<head>
</head>
<body>

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

<input id="rdwidgeturl" name="rdwidgeturl" value="https://booking.resdiary.com/widget/Standard/OaksRestaurant/38046?includeJquery=false" type="hidden">
<script type="text/javascript" src="https://booking.resdiary.com/bundles/WidgetV2Loader.js"></script>


<script type="text/javascript">
const resizeObserver = new ResizeObserver(entries => 
parent.FrameSize(document.getElementById("rd-widget-frame").clientHeight)
)

const bodyObserver = new ResizeObserver(entries => 
parent.FrameSize(document.body.scrollHeight)
)

function resizeFrame(){
parent.FrameSize(document.body.scrollHeight)
}

// start observing a DOM node
resizeObserver.observe(document.getElementById("rd-widget-frame"))
bodyObserver.observe(document.body)
document.body.addEventListener("click", parent.FrameSize(document.body.scrollHeight));

</script>
</body>
</html>

script for parent page (insert where you would usually drop the standard embed code):

<script type="text/javascript">
    function FrameSize(sof){
        document.getElementById("ResDiary").style.height=(sof+1)+"px";
    }    
</script>

<iframe scrolling="no" src="path to standalone HTML page here" id="ResDiary"></iframe>

Hope this helps someone!

How can we help you today?