How can we help you today?

Start a new topic

Resdiary booking widget not working on wordprss blog

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

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?

Login to post a comment