Inserting an Iframe on our about us page

[github-learning-lab]

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 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:

"store.custom#about-us": {
   "blocks": [
     "flex-layout.row#about-us",
     "iframe"
   ]
 },

"iframe": {
  "props": {
    "src": "http://someURL.com/resource",
    "width": 100,
    "height": 200
  }
}

Activity

Let's display an Instagram post on your store page:

1. Change the label of the "Electronics" tab to "Instagram";
2. In the Instagram tab's content, delete the rich-text and include an iframe block;
3. In the 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:

---

If you're still unsure as to how to send your answers, click here.

[vtex-course-hub]

Oopsie, something went wrong 😿

Results

✅✅✅❌

Tests

✅ 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

Try again 😁

[vtex-course-hub]

Oopsie, something went wrong 😿

Results

✅✅✅❌

Tests

✅ 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

Try again 😁

[vtex-course-hub]

Oopsie, something went wrong 😿

Results

✅✅✅❌

Tests

✅ 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

Try again 😁

[vtex-course-hub]

You did great! 😁

Results

✅✅✅✅

Tests

✅ 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

[github-learning-lab]

You have successfully completed this step!

Go to the next step!