Iframe no conteúdo do app
A incorporação de Iframes no conteúdo do app propicia um conteúdo personalizado e é feita de maneira simples pois a maioria desses conteúdos já oferecem o código do Iframe pronto. Basta copiá-lo para inserir no app através das funcionalidades Lista, Lista Texto, Catálogo ou Página em branco.
Essa é uma possibilidade para quem não deseja utilizar uma aba para Mapa GPS mas sim deseja incluir um mapa dentro do conteúdo dentro de uma aba do app, por exemplo. Ou quando se deseja incluir formulários, vídeos ou streamings no app dentro do conteúdo de um item.
Para compreender melhor, veja na imagem abaixo um exemplo de Iframe de mapa inserido na funcionalidade Lista de um app.
Como coletar um código de Iframe
O passo a passo abaixo oferece o exemplo de Iframe para mapa e Youtube mas também pode ser reproduzido em demais plataformas de streaming, vídeo e formulários.
Iframe do Google Maps
Para começar, defina um endereço. Por exemplo: Av. Paulista, 171 - São Paulo - SP
Abra o http://maps.google.com e então digite o endereço que deseja encontrar no mapa;
Clique em "Compartilhar";
Nesse momento abrirá uma nova janela. Clique em "Incorporar Mapa";
Copie o código do Iframe.
Como mostra a imagem abaixo.
Se preferir, veja o vídeo abaixo:
Iframe do Youtube
Primeiramente, é importante saber que o proprietário do vídeo configura se quer deixar o vídeo disponível para Iframe ou não. Ou seja, caso o proprietário do vídeo não tenha permitido a liberação do Iframe, o vídeo não funcionará no app.
É importante que vídeo em questão não contenha anúncios e não seja monetizado no canal. Isso pode comprometer a questão de publicação do app, principalmente na App Store.
Abra o youtube.com e então digite o vídeo que deseja encontrar no Youtube;
Clique em "Compartilhar" localizado logo abaixo do vídeo;
Nesse momento abrirá uma nova janela. Clique em "Incorporar";
Copie o código do Iframe clicando em "Copiar".
Como mostra a imagem abaixo.
Se preferir, veja o vídeo abaixo:
Inserir o Iframe no app
Agora é necessário inserir o código no app para que o vídeo, mapa, streaming ou formulário apareça no conteúdo do app.
Abra o editor do app na plataforma da Fabapp;
Na tela de edição do item que deseja inserir o Iframe clique em "Código-Fonte";
Dentro do espaço para texto cole o Iframe;
Clique novamente em "Código-Fonte" e verá no preview do celular o Iframe inserido. Perceba que aparecerá um bloco vermelho escrito Iframe;
Salve clicando em "Salvar alterações".
Como mostra a imagem abaixo.
Na tela do celular, o Iframe aparecerá da seguinte forma:
Atualizado em: 16/12/2022