Off Canvas Component - Embedded Several Times On Page, But Content Only Shows In First One

[whitemedia]

Hi,

I have strange behaviour on a new Component. The Component is a fairly standard Off Canvas Containing Headline, Text and Form Integration Elements.

The Form Integration uses the Embed method, which contains Javascript from a Zoho Form.

If I use the Component more than once on a page, the form appears only in the first Component on the page, but multiple times - the number of times the Component is used on the page. The second and subsequent use of the Component has no form showing!

Do you have any ideas why the form shows so many times in the first embedded Component, but not in subsequent ones?

Thanks,
Christopher

[ruenel]

Hello @whitemedia,

Thanks for writing in! You will need to separate the embed codes for each form. You may need to check if it is loading the same JS script. Therefore, you only need the DIV element for the embed code like:

<div id="zf_div_BsLpT44ltD1Rd_VeFypo2OzdIudOR3fk3FWxzhtcmj4"></div>

And then insert the JS script into your footer using the Snippet or the Insert Headers and Footers plugin. For example;

<script type="text/javascript">(function() {
try{
var f = document.createElement("iframe");
f.src = '<URL>';
f.style.border="none";
f.style.height="2097px";
f.style.width="90%";
f.style.transition="all 0.5s ease";
f.setAttribute("aria-label", 'Free\x20Website\x20Review\x20\x2D\x20Cotswold\x20Websites');

var d = document.getElementById("zf_div_BsLpT44ltD1Rd_VeFypo2OzdIudOR3fk3FWxzhtcmj4");
d.appendChild(f);
window.addEventListener('message', function (){
var evntData = event.data;
if( evntData && evntData.constructor == String ){
var zf_ifrm_data = evntData.split("|");
if ( zf_ifrm_data.length == 2 ) {
var zf_perma = zf_ifrm_data[0];
var zf_ifrm_ht_nw = ( parseInt(zf_ifrm_data[1], 10) + 15 ) + "px";
var iframe = document.getElementById("zf_div_BsLpT44ltD1Rd_VeFypo2OzdIudOR3fk3FWxzhtcmj4").getElementsByTagName("iframe")[0];
if ( (iframe.src).indexOf('formperma') > 0 && (iframe.src).indexOf(zf_perma) > 0 ) {
var prevIframeHeight = iframe.style.height;
if ( prevIframeHeight != zf_ifrm_ht_nw ) {
iframe.style.height = zf_ifrm_ht_nw;
}
}
}
}
}, false);
}catch(e){}
})();</script>

Best Regards.

[whitemedia]

Thank you @Ruenel.

[tristup]

Hi @ whitemedia,

I have removed the URL and add it to the secure note.

Thanks