Help embedding an iframe please?

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>

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. 

That worked perfectly - thank you, Ashley!

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.

Some web sites do not allow you to link to them via an iframe, even if your embed code is correct.

Hello, Edith!

Since Rise 360 uses secure https, embedded content must also use https to work properly. Make sure the source URL for your content starts with https—assuming the website that hosts your content supports it.

Hi All,

Really struggling with this, im enetring

<iframe src=“Https://app.cloudpano.com/tours/wMVgLPn1KI"></iframe>

And all i get is the Please enter a valid URL or iframe error

If i use the URL i get a landing page to click and open and i want it to go straight to the content.

TIA

Glen

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>

Rise does not always accept all parameters.

You can start with this and add other parameters:

<iframe src="https://app.cloudpano.com/tours/wMVgLPn1KI"></iframe>

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>

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.

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

So cool, Owen! Thank you for sharing that solution here! 

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. 

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.

Thanks Owen. 

I just added some details to my response. 
When I tested the html, it brought up your Reported COVID-19 cases by country data visualization. Looks great.

Hey Owen,

thanks so much for this. So I got the content in the page working great as per, but on the iframe it wont work. Can I just use a text field in rise to embed this: 

<iframe src=“https://student.hfe.co.uk/content/learnerpages/covid-prevelance"></iframe>

Many thanks

O

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.

Also, be careful with your quotation marks. They MUST match style/form.  The opening quotations in your URL are different then your closing.
Opening: “
Closing: "

Can you see the difference?

Thanks Owen, yes I have that. The URL above is actually a static page in the LMS which works and looks perfect. The issue is really with inserting the iframe. I'm pasting the code into a text field - should I be using some other feature/layout?

Thanks for your support. 

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

Hi Oscar! 

I had success using this iframe code in a multimedia embed block. Copy and paste the code below into your own course, and let me know if it works for you!

<iframe src="https://student.hfe.co.uk/content/learnerpages/covid-prevelance"></iframe>

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?