Hi @abarrios! Great question. The iFrame page widget is only available on desktop due to a number of technical limitations. This means that, as you shared, any iFrame widgets you have on your desktop custom pages will not show on mobile.

The good news is that iFrame pages are supported on mobile! I recommend designing your mobile experience so that any iFrames you have in pages on desktop are available as iFrame pages on mobile. The steps outlined below should help you accomplish this.

Adding iFrame Pages to your Mobile Experience

For this example, let’s consider that you have a page that includes two iFrame widgets, one that iFrames Site A and one that iFrames Site B.

 Create External Link Pages

First, you’ll want to create two External Link Pages, one for Site A and one for Site B. The linked Knowledge Article should help answer any questions about external link pages, but to do this you’ll go to Admin Menu > Manage Pages > + New Page > External Link and include at least the Page Name and URL. You’ll then want to select the In Page (iframe) option in the External Link Properties.

 Add External Link Pages to Mobile Menu

Docebo gives you the option to customize a mobile app menu that is different than the desktop menu. This allows you to build custom mobile experiences that are unique from the desktop experience. In this example, you’ll want to add your Site A iFrame Page and your Site B iFrame Page to the Mobile App Main Menu.

Now your learners can access iFramed content on mobile!

I hope this helps with your use case @abarrios. I’d love to see how others have handled a similar scenario.

Thanks for the response but I think this only applies if the iframe content is a whole page. Our iframe content is a just a fragment and is part of a widget custom page.

Attached is a sample.

Highlighted in red is a carousel loaded via an iframe. The images are clickable and is working on Dekstop but not on mobile because the iframe widget is unsupported.

Hi @abarrios, you are correct. iFrame widgets are unsupported on mobile due to a number of technical limitations.

Seeing that the iFramed section of your page is a carousel, my recommendation would be to create a new page that is only visible on your mobile menu that includes a set of custom content boxes that include each of the graphics/CTAs from your carousel. I realize this adds a bit of work, but I believe it’d be the best way to go about solving for this issue.

You would use the same process I outlined in “Part ” of my last post to customize a separate Mobile App Menu from your desktop menu that includes the new “mobile friendly” version of the same page, without the carousel and with the series of custom content boxes.

I hope this helps!

@Adam Ballhaussen Thanks for the response, I’ll be implementing this solution. At least now, I do have some points to discuss with the stakeholders regarding the current iframe widget limitation. 

Really appreciate the help.

Excellent, I’m glad I could help @abarrios! I know it’s not a perfect solution, but hopefully it gets you a step closer to your goal! I will see if I can get a better explanation for you from someone internally about the limitations related to the iFrame widget on mobile. As I understand it, the problem is somewhat out of our control.

By the way, massive kudos to you and your team on the design of that carousel. I love it!  

Hi there @Adam Ballhaussen ,

Thank you for your suggestion. I want to add additional security to my iframe page so I enabled secret with an oauth client. It works on the browser but it doesn’t in the mobile app. I checked the mobile app request and none of the query parameters were in the launch url.