Forum Discussion

MelindaBlack's avatar
MelindaBlack
Community Member
8 years ago

Help embedding an iframe please?

I am trying to insert an iframe for a map into Rise. However it is not being accepted, what may I have got wrong? <iframe src="https://www.canopi.com.au/portals/0/AHAGoogleMap/GoogleMap.html” heig...
rise 360
JakeWiid-b3083d's avatar
JakeWiid-b3083d
Community Member
5 years ago

Hi, 

I am trying to embed a Jot form to Rise but it just shows the code. Any advise? 

 

<iframe id="JotFormIFrame-210401628877053" title="EVC Completion Log" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/210401628877053" frameborder="0" style=" min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-210401628877053"); if (ifr) { var src = ifr.src; var iframeParams = []; if (window.location.href && window.location.href.indexOf("?") > -1) { iframeParams = iframeParams.concat(window.location.href.substr(window.location.href.indexOf("?") + 1).split('&')); } if (src && src.indexOf("?") > -1) { iframeParams = iframeParams.concat(src.substr(src.indexOf("?") + 1).split("&")); src = src.substr(0, src.indexOf("?")) } iframeParams.push("isIframeEmbed=1"); ifr.src = src + "?" + iframeParams.join('&'); } window.handleIFrameMessage = function(e) { if (typeof e.data === 'object') { return; } var args = e.data.split(":"); if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } else { iframe = document.getElementById("JotFormIFrame"); } if (!iframe) { return; } switch (args[0]) { case "scrollIntoView": iframe.scrollIntoView(); break; case "setHeight": iframe.style.height = args[1] + "px"; break; case "collapseErrorPage": if (iframe.clientHeight > window.innerHeight) { iframe.style.height = window.innerHeight + "px"; } break; case "reloadPage": window.location.reload(); break; case "loadScript": var src = args[1]; if (args.length > 3) { src = args[1] + ':' + args[2]; } var script = document.createElement('script'); script.src = src; script.type = 'text/javascript'; document.body.appendChild(script); break; case "exitFullscreen": if (window.document.exitFullscreen) window.document.exitFullscreen(); else if (window.document.mozCancelFullScreen) window.document.mozCancelFullScreen(); else if (window.document.mozCancelFullscreen) window.document.mozCancelFullScreen(); else if (window.document.webkitExitFullscreen) window.document.webkitExitFullscreen(); else if (window.document.msExitFullscreen) window.document.msExitFullscreen(); break; } var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false; if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) { var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)}; iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*"); } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } </script>

  • CNavarro's avatar
    CNavarro
    Former Staff
    5 years ago

    Hi Jake,

    Rise 360 may not be able to support the script code. I tried adding just your iframe code into my Embed block and it looks like the error occurs with onload="window.parent.scrollTo(0,0)" Also, your source URL seems to be for a private form. You need to make sure that the form can be accessed publicly. 

    Here is an article on how to troubleshoot embed codes.

  • OwenHolt's avatar
    OwenHolt
    Super Hero
    5 years ago

    I have a work around for you. I just tried this out for a chat window in Rise and it worked.
    Step 1: Create an HTML page with your code and make sure it is working as a web page.*
    Step 2: Host the page somewhere that users can access.*
    Step 3: Use Storyline 360 to create and publish a single slide with a Web Object on it. Have the Web Object point to your html page. Publish to Review 360.
    Step 4: Use a Storyline block in your Rise course to display the SL file.

    Using a Web Object in Storyline and a custom HTML page gives you control over the content / code and just seems to work better when there is <script> involved in the page.

    *You might be able to skip these steps if the page or form you are referencing is a third party SAS product that provides this for you already.

    See discussion here for link to example:
    https://community.articulate.com/discussions/rise-360/seeking-solutions-for-embedding-a-chat-feature-forum-into-rise360-content