Comment pouvons-nous vous aider aujourd’hui ?
Resdiary booking widget not working on wordprss blog
Gregory Simons
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!
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.
Had the same issue Francesca - did you find a solution?
Francesca Truss