Como Incorporar um Flipbook com Iframe

Você criou um flipbook interativo incrível a partir do seu PDF. E agora? Compartilhar um link funciona, mas incorporar o flipbook diretamente no seu site mantém os visitantes engajados sem enviá-los para outro lugar. Fica profissional, carrega rápido e dá controle total sobre a experiência.

Neste tutorial, vamos mostrar exatamente como incorporar um flipbook FlipLink em qualquer site usando um iframe — além de dicas para torná-lo responsivo, seguro e impecável em qualquer dispositivo.

Por Que Incorporar em Vez de Apenas Compartilhar um Link?

Quando você compartilha um link de flipbook, os visitantes saem do seu site para visualizá-lo. Isso significa que você perde o controle da experiência — eles podem não voltar. Incorporar mantém tudo no seu território.

Veja por que incorporar é melhor:

• Menores taxas de rejeição — visitantes ficam na sua página em vez de navegar para fora
• Melhor experiência de marca — o flipbook parece parte nativa do seu site
• Maior engajamento — leitores têm mais probabilidade de navegar quando o conteúdo carrega inline
• Benefícios de SEO — o tempo na página aumenta, sinalizando qualidade para mecanismos de busca
• Apresentação profissional — perfeito para catálogos de produtos, portfólios e materiais de vendas

Se você está incorporando um visualizador de PDF em vez de um flipbook, confira nosso guia sobre como incorporar um PDF no seu site.

Como Obter o Código de Embed Iframe do FlipLink

O FlipLink gera códigos de embed automaticamente — sem necessidade de programação. Veja como obter o seu:

1. Faça login no painel do FlipLink em go.fliplink.me
2. Abra o flipbook que deseja incorporar
3. Clique no botão Compartilhar na barra de ferramentas
4. Selecione a aba Embed no painel de compartilhamento
5. Copie o código iframe que aparece

O código se parece com isso:

<iframe
  src="https://go.fliplink.me/view/your-flipbook-id"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
></iframe>

Pronto. Cole esse snippet em qualquer página HTML e seu flipbook aparece com total interatividade de virada de página em 3D.

Para mais detalhes sobre todas as formas de distribuir seu flipbook, veja os recursos de compartilhamento e distribuição.

Incorporando em Diferentes Plataformas

WordPress

O WordPress torna a incorporação com iframe simples:

1. Abra a página ou post onde deseja o flipbook
2. Adicione um bloco HTML Personalizado (não um bloco de parágrafo)
3. Cole seu código iframe
4. Visualize a página para confirmar que carrega corretamente

Se estiver usando o editor clássico, mude para a aba Texto (não Visual) antes de colar. Para um tutorial mais detalhado específico do WordPress, leia nosso guia sobre como incorporar um flipbook no WordPress.

Wix

O Wix não suporta HTML bruto em blocos de texto comuns, mas tem uma alternativa:

1. No editor do Wix, clique em Adicionar (+) no painel esquerdo
2. Escolha Embed Code > Embed HTML
3. Cole seu código iframe na caixa HTML
4. Redimensione o widget de embed para caber no seu layout
5. Publique seu site

Squarespace

O Squarespace suporta blocos de código nativamente:

1. Edite a página onde deseja o flipbook
2. Adicione um novo Bloco de Código (no menu +)
3. Cole o código iframe
4. Desmarque "Exibir Fonte" se essa opção aparecer
5. Salve e visualize

Sites HTML Estáticos

Para qualquer site HTML estático, simplesmente cole o código iframe onde deseja que o flipbook apareça no seu arquivo HTML. Funciona dentro de containers <div>, seções de artigo ou layouts de landing page — em qualquer lugar que aceite HTML.

Dicas de Embed Responsivo

Um iframe de largura fixa fica ótimo no desktop mas quebra no mobile. Veja como tornar seu embed responsivo para se adaptar a qualquer tamanho de tela.

A Técnica do Wrapper com Proporção

Envolva o iframe em um container que mantém uma proporção consistente:

<div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe
    src="https://go.fliplink.me/view/your-flipbook-id"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

O padding-bottom: 75% cria uma proporção 4:3. Ajuste esse valor com base nas dimensões do seu flipbook:

• 4:3 (paisagem) — padding-bottom: 75%
• 16:9 (widescreen) — padding-bottom: 56.25%
• 3:4 (retrato) — padding-bottom: 133%
• 1:1 (quadrado) — padding-bottom: 100%

Verificação Rápida no Mobile

Após incorporar, teste em um celular real — não apenas no modo responsivo do navegador. Pinçar para zoom e virada de página por toque devem funcionar suavemente. Se o embed parecer apertado em telas pequenas, considere aumentar a altura mínima para 400px ou 500px.

Lista de Domínios Permitidos para Segurança

Se seu flipbook contém conteúdo sensível — guias de preços, relatórios internos, propostas para clientes — você provavelmente não quer que qualquer pessoa incorpore em sites aleatórios.

O recurso de lista de domínios permitidos do FlipLink permite restringir onde seu embed iframe pode carregar:

1. Abra as configurações do seu flipbook
2. Navegue até a seção Segurança ou Embed
3. Adicione seus domínios aprovados (ex.: suaempresa.com, blog.suaempresa.com)
4. Salve as alterações

Agora o flipbook só renderiza quando carregado a partir desses domínios. Se alguém copiar seu código iframe e colar em outro site, não vai carregar — verão uma mensagem de acesso negado.

Isso é especialmente útil para catálogos de produtos compartilhados com parceiros específicos de varejo ou documentos voltados para clientes que não devem ser acessíveis publicamente.

Alternativa: Embed de Imagem Clicável

Nem toda situação exige um embed iframe completo. Às vezes uma imagem de preview clicável funciona melhor — especialmente quando você quer um teaser leve que abre o flipbook completo ao clicar.

O FlipLink gera um embed de imagem clicável automaticamente. Ele se parece com isso:

<a href="https://go.fliplink.me/view/your-flipbook-id" target="_blank">
  <img
    src="https://go.fliplink.me/thumbnail/your-flipbook-id.jpg"
    alt="Ver flipbook"
    style="max-width: 100%; cursor: pointer;"
  />
</a>

Essa abordagem é ótima para:

• Newsletters por e-mail (onde iframes não funcionam)
• Widgets de barra lateral com espaço limitado
• Posts de blog onde você quer um preview sem interromper o fluxo de leitura
• Páginas com múltiplos flipbooks — mostre thumbnails, deixe os leitores escolherem qual abrir

Comparação de Opções de Embed

Não tem certeza qual método se encaixa nas suas necessidades? Aqui está uma comparação rápida:

Para a maioria dos sites, o embed iframe oferece a melhor experiência do usuário. Use a imagem clicável quando o espaço for limitado ou em ambientes que não suportam iframes.

Dicas Comuns de Solução de Problemas

Tendo problemas? Aqui estão correções rápidas para os problemas mais comuns:

• Flipbook não carrega — Verifique se a URL de embed está correta e se o flipbook está publicado (não em modo rascunho)
• Bloqueado pelo navegador — Alguns navegadores bloqueiam conteúdo misto. Certifique-se de que seu site usa HTTPS se a URL de embed é HTTPS
• Fica minúsculo no desktop — Defina width="100%" e aumente o valor de height, ou use a técnica de wrapper responsivo acima
• Cortado no mobile — Use o wrapper de proporção em vez de dimensões fixas em pixels
• Bloqueado em outro site — Se habilitou a lista de domínios permitidos, adicione o novo domínio à lista aprovada

Comece a Incorporar Seus Flipbooks

Incorporar um flipbook no seu site leva menos de um minuto com o FlipLink. Faça upload do seu PDF, copie o código iframe, cole no seu site — pronto.

Seja construindo uma vitrine de produtos, um arquivo de revistas digitais ou um relatório empresarial interativo, incorporar mantém seu público engajado e seu conteúdo em destaque.

Crie sua conta gratuita no FlipLink e comece a incorporar flipbooks interativos no seu site hoje. Já tem conteúdo pronto? Confira nossos planos de preços — a partir de apenas $129 para acesso vitalício a 100 publicações ativas.