Easily embed iframe content in SimGate Studio Pages to enhance interactivity and seamlessly integrate external resources, providing a richer, more dynamic learning experience.
VIDEO: SEE IT IN ACTION
⚠️ Note: Not all websites are designed to be embedded in third-party websites, including SimGate Studio. The content you are attempting to embed may be outside of our control and might not be supported. We recommend consulting the owner of the website or content you wish to embed to ensure it is intended for embedding in other websites.
DIY STEPS
To embed an iframe, create a new Pagebuilder page, Slideshow, or Add-on builder.
Click “Add Item” and choose “Embed iframe” from the component picker.
Hover over the newly added iframe, then click to edit the iframe component.
Paste your code into the “code snippet” section of the side panel editor and click “Save.” (Ensure that the website you are embedding supports third-party embedding.)
Note: For WCAG accessibility, ensure you have included a title (in the area above the code snippet)
Once saved, the iframe content should now be visible on the page.
FAQ
Which templates in Studio can I embed an iframe?
Pagebuilder,
Slideshow, or
Add-on builder
What are the Accessibility Considerations when embedding an iframe?
Provide Accessible Content Within the iframe
(WCAG 1.1.1 - Non-text Content, WCAG 1.3.1 - Info and Relationships)
Accessible Content: The content inside the iframe must also be accessible. This includes providing alt text for images, ensuring text is readable, and that all forms and interactive elements are labeled and usable with assistive technologies.
NOTE: Making iframe content accessible is beyond SimGate's control. It's the author's responsibility to ensure the content within the iframe meets accessibility standards.
Include Title on iframe
Authors should include a Title in the edit panel of the iframe for WCAG accessibility:
The title attribute on iframes serves several important accessibility purposes:
It provides context for screen reader users, allowing them to understand what content is embedded without having to navigate into the iframe.
It helps users decide whether they want to engage with the iframe content or skip past it.
It improves navigation for users of assistive technologies by clearly labeling different sections of content.
It satisfies automated accessibility checks that flag untitled iframes as issues.
