Inserting an Iframe on our about us page

[github-learning-lab]

Inserindo um Iframe na nossa página institucional

✨ Branch: iframe

Introdução

Um Iframe é um elemento HTML que permite a incorporação de uma outra página HTML à atual. Dessa forma, a partir do bloco Iframe é possível embutir conteúdos de outras URLs para serem exibidos em nossa página. É importante lembrar que as URLs renderizadas pelo Iframe possuem um contexto próprio, tendo histórico de sessão e DOM independentes da sua página customizada.

ATENÇÃO: Iframes só são permitidos dentro de templates de custom pages.

O bloco iframe tem propriedades bem simples:

• src: indica qual URL o iframe deve renderizar
• width: largura do elemento iframe em pixels
• height: altura do elemento iframe

Abaixo, vemos um exemplo de implementação do bloco iframe:

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

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

Atividade

Vamos exibir um post de Instagram em nossa loja:

1. Troque a label da aba "Electronics" para "Instagram";
2. No conteúdo da aba Instagram, apague o rich-text e inclua um bloco iframe;
3. Nas props do iframe, exiba o conteúdo do link https://www.instagram.com/p/B973Qp8BacC/embed num container de 800px de largura por 1000px de altura.

ℹ️ Lembre-se de acessar a documentação do Iframe caso tenha alguma dúvida durante a atividade.

Resultado esperado:

---

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

---

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.

[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]

Você terminou este passo com sucesso!

Vá para o próximo passo