Iframe

Como criar o componente Iframe

O componente Iframe no Storyblok visa garantir uma integração flexível e eficiente. Isso inclui a criação do componente nas páginas do Storyblok e sua capacidade de ser adicionado ao bloco dentro do Tab Select. Além disso, o componente deve suportar links internos e externos e não tem limitações quanto ao número de componentes que podem ser adicionados na lista e ainda é possível a criação independente do Item e da Lista.

*É importante que o componente tem flexibilidade sendo responsivo atendendo qualquer dispositivo (Desktop ou Mobile).
Para criar o componente precisa navegar em: Conteúdo > Conteúdos Compartilhados > Iframe > Itens > Preencher os campos do Item: Link, Largura e Altura.

Exemplo de Iframe:

https://planos.claro.com.br/gradedecanaisv2/?tvId=594

Largura* 1000

Altura* 800

Criando a lista de Iframe:

Conteúdo > Conteúdos Compartilhados > Iframe > Listas > Criar uma lista nova e inseri o item de Iframe criado anteriormente.

Adicionando o componente Iframe na Página:

1- Acessar a página que irá receber o componente em "Home > Site"; (Ver no índice deste manual o item "Como criar página no storyblok)

2- Na aba "Geral", clicar em "+Adicionar bloco";

3- Selecionar na lista, o item "Iframe" criado anteriormente;

4- Isso irá criar um bloco com o nome "Iframe vazio". Clicar nele;

5- Na aba "Geral", clicar em "Selecionar" e na caixa em branco de "Selecionar a lista de Iframe";

6- Isso ira exibir uma lista com o item Iframe. Clique no Iframe Item desejado;

7- Se desejar inserir um Titulo, subtítulo e rodapé para o bloco criado, clicar na aba "Opções" e em "Propriedades Avançadas" e inserir os valor nos respectivos campos.

8- Clicar em "Salvar" e "Publicar"

Vídeo com tutorial para criar o Componente Iframe

1) Título Componente Iframe

1) Subtítulo https://planos.claro.com.br/novo/checkout?internetId=435%2C439%2C992%2C1012&cep=15110000&number=421

Rodape 1

2) Título Componente Iframe

2) Subtítulo https://app.pipefy.com/public/form/hkPPMi_0?embedded=true

Rodapé 2

3) Título Componente Iframe

3) Subtítulo https://app.pipefy.com/public/form/hkPPMi_0?embedded=true

Rodapé 3

4) Título Componente Iframe

4) Subtítulo https://lojas.claro.com.br

Rodapé 4

5) Título Componente Iframe no Tab Select Item

5) Subtítulo https://planos.claro.com.br/novo/checkout?internetId=435%2C439%2C992%2C1012&cep=15110000&number=421

Rodapé 5