31 Replies
Sarah Stillings

I'm having a similar issue with trying to embed a Microsoft form, but I'm not seeing an obvious issue with the code: 

<iframe width="640px" height= "480px" src= "https://forms.office.com/Pages/ResponsePage.aspx?id=BYs79lczuUO8gCMHgnUuS1QR4hO6tBFBkLAC3xHdkZ9UMk5DWDFIQVo4NEhUTlpIRFRCNk41U09XMS4u&embed=true" frameborder= "0" marginwidth= "0" marginheight= "0" style= "border: none; max-width:100%; max-height:100vh" allowfullscreen webkitallowfullscreen mozallowfullscreen msallowfullscreen> </iframe>

Ashley Terwilliger-Pollard

Hi Sarah, 

Were you trying to add it to the URL/Embed lesson type? I tried copying/pasting what you shared and saw the error message, but I was able to use the link itself inside this embed:

<iframe src="https://forms.office.com/Pages/ResponsePage.aspx?id=BYs79lczuUO8gCMHgnUuS1QR4hO6tBFBkLAC3xHdkZ9UMk5DWDFIQVo4NEhUTlpIRFRCNk41U09XMS4u&embed=true"></iframe>

Also, here's some more info on resolving the error with the Embed code. 

 

Edith Olexiuc

Hello,

When I try to embed this site http://www.mdrd.com it does not work, I wonder if it's because the embed code automatically changes the site url to start with https instead of http. This is my embed code <iframe src="http://www.mdrd.com"></iframe> but when I press enter to embed it changes to <iframe src="https://www.mdrd.com"></iframe> automatically.  Any help will be greatly appreciated.

OWEN HOLT

The site has specific code it is looking for. Try using the iFrame code created by your destination url:

<iframe id="/tours/wMVgLPn1KI" allow="vr;accelerometer;gyroscope;fullscreen" allowfullscreen frameborder="0" width="100%" height="500" src="https://app.cloudpano.com/tours/wMVgLPn1KI"></iframe>

Jake Wiid

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>

Chino Navarro

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.

OWEN HOLT

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

Oscar Cain

Hey, can anyone advise why the following won't embed into Rise?I've tried all kids of variations which work on our WP site but won't on Rise.

We're trying to embed this: 

<div class="flourish-embed flourish-table" data-src="story/230195"><script src="https://public.flourish.studio/resources/embed.js"></script></div>

using this: 

<iframe data-src="story/230085"><script src="https://public.flourish.studio/resources/embed.js"></script></iframe>

Any help greatly appreciated. 

OWEN HOLT

My guess is that it is the format. IFrames typically embed html web pages and not js files. A js file has nothing to display directly, rather it works with an html page to control/modify what is displayed.

Try creating a simple html file and saving it as index.html

<html>
<body>
<div class="flourish-embed flourish-table" data-src="story/230195">
<script src="https://public.flourish.studio/resources/embed.js"></script>
</div>
</body>
</html>

Host the page somewhere, get the url for the hosted page, and try embedding that.

OWEN HOLT

No. It looks like you are still point to a flourish page that has your data in it. Regardless of how you try to embed it this way, it will always display in Rise as a link to your Flourish page.  You need to put their embed code into your own html page and host it independently somewhere like on AWS. Once your page (referencing Flourish) is independently hosted, you can embed it using its URL and then it will display seamlessly in Rise.

OWEN HOLT

In Rise, add a block -> select multimedia -> Embed. Rise will add the block with a link to a placeholder page. Click Edit -> then paste your URL or iframe code in the space provided.

If that still doesn't display your page correctly, you can try using the Web Object functionality of Storyline and a Storyline block in Rise.

See example here with instructions: https://360.articulate.com/review/content/2ac2b70f-9bdc-46c4-a7f8-99fe12aaa8d4/review

Vadim Ro

Hi,

I am having trouble embeding this link in rise:

<iframe src="https://methodica.h5p.com/content/1291377745731889397/embed" width="1088" height="637" frameborder="0" allowfullscreen="allowfullscreen" allow="geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe><script src="https://methodica.h5p.com/js/h5p-resizer.js" charset="UTF-8"></script>

 

Can you please assist?