iFrame

Um iframe (inline frame) é um elemento HTML que incorpora uma página web dentro de outra. Definido pela tag `<iframe>`, cria uma janela retangular independente na sua página que carrega e exibe conteúdo de uma URL separada. O conteúdo incorporado mantém seu próprio contexto de documento — com DOM, estilos e scripts separados — isolado da página hospedeira. Iframes são amplamente usados para incorporar vídeos, mapas, formulários, gateways de pagamento e widgets interativos sem que a página hospedeira precise lidar com o código ou estilo desse conteúdo diretamente.

Para editores digitais, iframes fornecem a forma mais simples e universal de colocar um [flipbook](/glossary/flipbook) interativo ou visualizador de documentos diretamente em um site existente. Os visitantes podem navegar pela publicação sem sair da página, mantendo-os engajados no seu site em vez de redirecioná-los para um link de terceiros. Isso melhora o tempo na página, reduz as [taxas de rejeição](/glossary/bounce-rate) e integra a experiência de leitura perfeitamente ao seu design existente. Como iframes são uma funcionalidade HTML nativa suportada por todos os navegadores modernos, funcionam no WordPress, Shopify, Squarespace, sites customizados e virtualmente qualquer CMS.

O FlipLink gera um [código de incorporação](/glossary/embed-code) iframe pronto para usar para cada [flipbook](/glossary/flipbook) e documento publicado. Você copia o snippet do seu painel do FlipLink e cola no HTML do seu site, editor de CMS ou construtor de landing pages. O iframe carrega o visualizador completo do FlipLink — incluindo [animações de virada de página](/glossary/page-flip-animation), [botões de CTA](/glossary/call-to-action-cta), [formulários de captura de leads](/glossary/lead-capture) e [rastreamento de analytics](/glossary/analytics-dashboard) — dentro das dimensões que você especificar. A [incorporação responsiva](/features/sharing-and-distribution) do FlipLink garante que o iframe se adapte automaticamente a qualquer tamanho de tela. O FlipLink também oferece uma opção de [imagem clicável incorporada](/features/clickable-image-embed) como alternativa leve que linka para o visualizador completo.

Uma incorporação iframe usa esta estrutura HTML básica: ```html <iframe src="https://go.fliplink.me/your-flipbook" width="100%" height="600" frameborder="0" allowfullscreen> </iframe> ``` Atributos-chave que afetam o comportamento: - **`src`** — A URL do conteúdo a incorporar. O FlipLink fornece esta URL para cada publicação. - **`width` / `height`** — Controla a área visível. O código de incorporação responsivo do FlipLink usa larguras baseadas em porcentagem para layouts fluidos. - **`sandbox`** — Restringe o que o conteúdo incorporado pode fazer (ex.: bloquear formulários, scripts ou popups). O código do FlipLink é configurado para permitir as interações necessárias para funcionalidade completa. - **`loading="lazy"`** — Adia o carregamento do iframe até que o usuário role perto dele, melhorando o desempenho de carregamento inicial da página. - **`allow`** — Especifica permissões de funcionalidades como modo tela cheia, que o FlipLink usa para leitura imersiva.

Iframes introduzem uma fronteira de confiança entre a página hospedeira e o conteúdo incorporado. Entender o modelo de segurança ajuda a incorporar conteúdo com segurança: - **Política de mesma origem** — Navegadores impedem que a página hospedeira acesse o DOM de um iframe de origem cruzada, e vice-versa. Seu site não pode ler ou manipular os componentes internos do visualizador do FlipLink, e o visualizador incorporado não pode acessar os cookies ou dados do seu site. - **[Lista de domínios permitidos](/glossary/domain-whitelisting)** — O FlipLink permite restringir quais domínios podem incorporar suas publicações, impedindo que sites não autorizados exibam seu conteúdo em seus próprios iframes. - **Content Security Policy (CSP)** — Se seu site usa cabeçalhos CSP rigorosos, pode ser necessário adicionar o domínio do FlipLink à sua diretiva `frame-src` para permitir o carregamento do iframe. - **Proteção contra clickjacking** — O FlipLink define cabeçalhos `X-Frame-Options` e CSP apropriados para controlar onde seu visualizador pode ser incorporado, enquanto permite seus domínios autorizados.

**"Iframes são ruins para SEO."** Mecanismos de busca podem seguir links dentro de iframes e indexar o conteúdo incorporado separadamente, mas o conteúdo não contribui para o ranking SEO da página hospedeira. Para flipbooks, isso não é uma preocupação — o valor de SEO reside no conteúdo, cabeçalhos e metadados da própria página, enquanto o flipbook serve como ferramenta de engajamento. **"Iframes sempre deixam minha página lenta."** Um iframe por si só adiciona overhead mínimo. Problemas de desempenho surgem do que o iframe carrega. Usar `loading="lazy"` garante que o flipbook só carregue quando o usuário rolar até ele, mantendo o carregamento inicial da página rápido. **"Iframes são tecnologia ultrapassada."** Embora alguns usos legados de iframes (como construir layouts de página) sejam de fato ultrapassados, incorporação baseada em iframe continua sendo o padrão para widgets de terceiros, formulários de pagamento e conteúdo interativo. Todas as principais plataformas — YouTube, Google Maps, Stripe e FlipLink — usam iframes para incorporação.

Um iframe é o método padrão e seguro para incorporar conteúdo interativo como flipbooks em qualquer site. Ele fornece funcionalidade completa enquanto mantém o conteúdo incorporado isolado do código e estilos da sua página hospedeira.