You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
An Iframe is a HTML element that allows the incorporation of another HTML page to the current one. Therefore, using the Iframe block, you can embed content from other URLs and display them on your page. It's important to remember that URLs rendered by Iframe have their own context, with independent session history and DOMs.
WARNING: Iframes are only allowed on custom page templates.
The iframe block has very simple properties:
src: shows which URL should be rendered by the iframe
width: pixel width of the iframe element
height: height of the iframe element
Below, we can see an implementation example of the iframe block:
✅ Getting the file
✅ Update the label from the tab-list.item#home2 to Instagram
✅ Add an iframe to the tab labeled "Instagram"
❌ Your iframe is not configured according to the instructions for this step
✅ Getting the file
✅ Update the label from the tab-list.item#home2 to Instagram
✅ Add an iframe to the tab labeled "Instagram"
✅ Configure your iframe to show an Instagram post
Inserting an Iframe on our about us page
✨ Branch: iframe
Introduction
An Iframe is a HTML element that allows the incorporation of another HTML page to the current one. Therefore, using the Iframe block, you can embed content from other URLs and display them on your page. It's important to remember that URLs rendered by Iframe have their own context, with independent session history and DOMs.
WARNING: Iframes are only allowed on custom page templates.
The
iframe
block has very simple properties:src
: shows which URL should be rendered by the iframewidth
: pixel width of the iframe elementheight
: height of the iframe elementBelow, we can see an implementation example of the
iframe
block:Activity
Let's display an Instagram post on your store page:
rich-text
and include aniframe
block;iframe
props, display the following link content in a 800px-wide by 1000px-high container:https://www.instagram.com/p/B973Qp8BacC/embed
ℹ️ Remember to access the Iframe documentation if you have any questions during this activity.
Expected result:
![](https://user-images.githubusercontent.com/18701182/73484453-1a0a9f00-4380-11ea-89d2-37e83c692210.png)
🚫 Are you lost?
Is there any problem with this step? What about sending us a feedback? 🙏
Submit feedback
If you're still unsure as to how to send your answers, click here.
The text was updated successfully, but these errors were encountered: