Incorporar um flipbook no seu site transforma PDFs estáticos em experiências interativas, com efeito de virar página, que mantêm os visitantes engajados por muito mais tempo. Este artigo mostra, passo a passo, como copiar o código de incorporação, colá-lo no WordPress, no Wix, no Squarespace ou em qualquer site HTML personalizado, ajustar o tamanho para o celular, resolver problemas comuns e publicar em minutos.
Colocar um link de download de PDF no rodapé de uma página não é uma estratégia de conteúdo. Os visitantes passam direto, navegadores de celular o tratam mal, e você não tem nenhum dado sobre se alguém realmente leu o documento. Incorporar um flipbook diretamente na sua página resolve os três problemas de uma vez, transformando um arquivo passivo em uma experiência de leitura interativa que fica dentro do seu site. O Flipbooks AI torna todo o processo possível em minutos, sem escrever uma única linha de código personalizado.
Este artigo explica exatamente como funciona o código de incorporação, o passo a passo para criar e incorporar seu flipbook, como fazer isso no WordPress, no Wix, no Squarespace e em sites HTML personalizados, truques de dimensionamento responsivo, casos de uso reais e os problemas comuns que as pessoas encontram depois de colar o código.
A maioria dos donos de sites subestima o atrito que um link de PDF cria. O visitante clica no link, espera o navegador abrir um visualizador, talvez receba uma caixa de download em vez de uma prévia na própria página e, então, precisa navegar por uma interface totalmente diferente para ler o conteúdo. No celular, a experiência é sempre pior. Uma parcela significativa desse público simplesmente fecha a aba.
Conteúdo incorporado à página, isto é, conteúdo que fica na própria página em vez de exigir um aplicativo ou download separado, é lido por muito mais tempo e com mais profundidade do que arquivos acessados por link. Quando alguém precisa sair do seu site para ver um documento, você perde totalmente o controle da experiência. Você também perde a visibilidade sobre o comportamento dessa pessoa. Não dá para saber se ela leu uma página ou todas as vinte, se parou na seção de preços ou se saiu imediatamente.
Cada visitante que clica em um link de PDF e sai do seu site leva consigo dados da sessão, comportamento de rolagem e a probabilidade de retorno, que somem das suas estatísticas. Um flipbook incorporado mantém essas pessoas no seu domínio, e o comportamento delas pode ser acompanhado. Se você investe em tráfego pago para uma página de destino e essa página linka para um folheto em PDF, cada clique nesse PDF é um sinal de conversão perdido.
Um flipbook incorporado fica dentro do layout da sua página. O visitante nunca sai dali. Ele vira as páginas sem nenhum plugin, aplicativo ou download. Você pode acompanhar quais páginas a pessoa alcançou, quanto tempo passou em cada uma e se preencheu um formulário de contato. Esses dados estão disponíveis no plano Professional e mudam completamente a forma como você avalia o desempenho do seu conteúdo.
| Formato | Experiência no celular | Estatísticas | Permanece na página | Interativo |
|---|---|---|---|---|
| Link de download de PDF | Ruim | Nenhuma | Não | Não |
| Visualizador de PDF incorporado | Variável | Nenhuma | Sim | Não |
| Flipbook incorporado | Excelente | Completas (plano Professional) | Sim | Sim |
| Galeria de imagens | Moderada | Parcial | Sim | Limitada |
Quando você publica um flipbook no Flipbooks AI, a plataforma gera um trecho de incorporação exclusivo para aquele documento. O trecho é um bloco curto de HTML que você copia uma vez e cola onde quiser que o flipbook apareça no seu site.
O tipo de incorporação mais comum usa um elemento iframe. Ele cria uma janela isolada dentro da sua página que carrega o flipbook dos servidores do Flipbooks AI. Sua página cuida do layout ao redor, e o iframe cuida de tudo o que fica dentro do visualizador. O código fica assim:
<iframe
src="https://flipbooksai.com/view/your-flipbook-id"
width="100%"
height="600"
frameborder="0"
allowfullscreen>
</iframe>
Definir width="100%" faz o iframe preencher o contêiner pai, que é o padrão correto para quase todos os layouts. O valor height é o que a maioria das pessoas precisa ajustar de acordo com o design específico da página e as proporções do documento.
Algumas plataformas e configurações de segurança bloqueiam o código iframe nos editores de página, mas permitem incorporações em JavaScript. O painel de compartilhamento do Flipbooks AI também oferece uma versão em tag script do código de incorporação, que carrega o visualizador dinamicamente. Ambas as versões estão disponíveis no painel Compartilhar de qualquer flipbook. Se o código iframe for bloqueado pelo seu CMS, use a versão em tag script.
💡 Sempre teste a incorporação em um celular real ou no DevTools do navegador logo após publicar. O que parece correto em um computador de 1440px pode transbordar ou ficar espremido em uma tela de celular de 375px se o contêiner pai tiver largura fixa em pixels.
O processo abaixo usa o Flipbooks AI. Do envio do PDF até a incorporação publicada leva menos de cinco minutos.
Acesse flipbooksai.com e crie uma conta se ainda não tiver uma. No painel, clique em Novo flipbook e envie seu PDF. A conversão acontece automaticamente. Em segundos você tem um flipbook com efeito de virar página e todo o conteúdo do seu documento preservado.
Nesta etapa, você pode personalizar o flipbook antes de incorporá-lo:
Nenhuma dessas personalizações é obrigatória antes de incorporar. Tudo o que você ajustar aqui será refletido na incorporação publicada automaticamente, mesmo depois que o código já estiver no seu site.
No editor do flipbook, abra a aba Design. As opções disponíveis aqui incluem:
É também aqui que você ativa os formulários de contato se estiver no plano Professional. O formulário aparece quando o leitor chega a uma página específica que você definir, coleta nome e e-mail e registra as respostas automaticamente no seu painel de estatísticas.
Abra Compartilhar no menu de ações do seu flipbook. Selecione a aba Incorporar. Você verá o código iframe já gerado para esse documento específico. Clique em Copiar. O trecho completo agora está na área de transferência, pronto para colar em qualquer lugar.
Você pode ajustar as dimensões padrão de exibição diretamente neste painel antes de copiar, se já souber o tamanho que a incorporação precisa ter na sua página.
Abra o editor do seu site, vá até a página onde o flipbook deve aparecer e cole o código de incorporação em um bloco HTML, em uma seção de código personalizado ou em um editor de texto no modo fonte/HTML. Salve a página e publique. O flipbook está no ar.
O mesmo código de incorporação funciona em todas as plataformas. A única variável é como acessar o editor HTML em cada uma.
O WordPress usa o editor de blocos Gutenberg por padrão. Para incorporar um flipbook:
Se você usa o Editor clássico, troque para a aba Texto (não Visual) e cole o código diretamente no corpo da página, na posição exata onde quer que o flipbook apareça.
✅ Use o bloco HTML personalizado, não o bloco Incorporar. O bloco Incorporar foi feito para URLs de redes sociais e serviços de vídeo, não para código iframe personalizado.
⚠️ O plano gratuito do Squarespace restringe blocos de código personalizado. Se o bloco Código estiver esmaecido ou bloqueado, você precisará de um plano Business ou superior para usá-lo.
No Webflow, arraste um elemento Embed do painel de componentes para a tela e cole o código dentro dele. Em qualquer site HTML personalizado, cole o trecho diretamente no <body> da página onde quiser que o flipbook seja exibido. Nenhuma configuração adicional é necessária em nenhuma das duas plataformas.
| Plataforma | Onde encontrar o editor HTML | Tipo de bloco ou elemento |
|---|---|---|
| WordPress | Editor de blocos Gutenberg | Bloco HTML personalizado |
| Wix | Painel Adicionar, seção Incorporar | Widget de incorporações personalizadas |
| Squarespace | Menu de blocos da seção | Bloco Código |
| Webflow | Painel de componentes | Elemento Embed |
| HTML personalizado | Código-fonte da página diretamente | Colar dentro da tag body |
| Shopify | Editor de código do tema | Seção Liquid ou bloco HTML |
Acertar as dimensões é onde a maioria das primeiras incorporações dá errado. O flipbook carrega corretamente, mas fica pequeno demais para ler ou transborda no celular.
Definir width="100%" quase sempre é a escolha certa. Isso faz o iframe preencher qualquer contêiner em que esteja, o que significa que ele se adapta automaticamente a layouts com barra lateral, seções de largura total e colunas estreitas no celular.
A altura é diferente. Por padrão, a altura de um iframe não se ajusta automaticamente. Uma altura fixa como height="600" funciona bem no computador, mas pode deixar espaço vazio demais ou cortar o flipbook em telas pequenas. As opções práticas são:
padding-bottom: 56.25% e defina o iframe para preencher de forma absoluta dentro dela. Isso faz a altura acompanhar a largura proporcionalmente em todos os tamanhos de tela.Para o comportamento mais confiável no celular, use a técnica de preenchimento por proporção:
<div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden;">
<iframe
src="https://flipbooksai.com/view/your-flipbook-id"
style="position:absolute; top:0; left:0; width:100%; height:100%;"
frameborder="0"
allowfullscreen>
</iframe>
</div>
Este contêiner produz um visualizador 16:9 que se ajusta perfeitamente em cada largura de tela, de 320px a 2560px.
A incorporação funciona melhor em alguns contextos do que em outros. Estes são os casos de uso que invariavelmente geram os resultados mais fortes.
Varejistas incorporam catálogos sazonais, lookbooks de produtos e folhetos de coleções diretamente em páginas de categoria ou de destino. Um visitante navegando por um site de móveis pode folhear a coleção completa de primavera sem sair da página do produto. As ferramentas Criador de catálogo digital gratuito e Criador de flipbook de catálogo do Flipbooks AI são criadas especificamente para esse fluxo de trabalho, com modelos otimizados para layouts de fotografia de produto.
Um link de cardápio em PDF escondido no rodapé é invariavelmente uma das piores decisões de design web para hospitalidade. Incorporar o cardápio diretamente na página inicial ou em uma página de cardápio dedicada faz com que o visitante o veja assim que chega, sem nenhum clique ou download adicional. O Criador de flipbook de cardápio de restaurante e o Criador de flipbook de cardápio geram modelos pensados para fotografia de comida e layouts de preços claros.
Designers, fotógrafos e marcas de moda incorporam flipbooks de portfólio e lookbooks editoriais nas suas páginas de contato ou de trabalhos. O efeito interativo de virar página faz a apresentação parecer intencional e refinada, algo que uma simples grade de imagens estáticas não consegue reproduzir. O Estilista de lookbook interativo e o Criador de portfólio digital oferecem modelos prontos para profissionais criativos.
Corretores de imóveis incorporam folhetos dos imóveis diretamente nas páginas de cada imóvel, para que compradores em potencial possam folhear plantas e fotos sem baixar nada. Equipes de marketing corporativo incorporam relatórios anuais e apresentações para investidores nas suas páginas de relações com investidores, criando uma impressão mais profissional do que um link de PDF. O Criador de folheto imobiliário e o Criador de relatório anual interativo produzem flipbooks prontos para publicar nos dois casos.
| Caso de uso | Ferramenta recomendada | Melhor página para a incorporação |
|---|---|---|
| Catálogo de produtos | Criador de catálogo digital gratuito | Página de produtos ou da loja |
| Cardápio de restaurante | Criador de flipbook de cardápio de restaurante | Página de cardápio ou página inicial |
| Lookbook de moda | Criador de flipbook de lookbook | Página de coleções |
| Portfólio criativo | Criador de portfólio digital | Página de trabalhos ou Sobre |
| Folheto imobiliário | Criador de folheto imobiliário | Página do imóvel |
| Relatório anual | Criador de relatório anual interativo | Página de relações com investidores |
| Programação de evento | Criador de flipbook de programação de eventos | Página com os detalhes do evento |
| Manual de treinamento | Flipbook de manual de treinamento | Página de recursos ou de RH |
A causa mais comum é um erro de conteúdo misto. Se seu site roda em HTTPS e a URL de incorporação começa com HTTP, o navegador bloqueia silenciosamente, sem nenhuma mensagem de erro visível. Todas as URLs de incorporação do Flipbooks AI usam HTTPS, então isso só vira problema se você tiver alterado manualmente o atributo src depois de copiar. Confira se a URL começa com https://.
Uma segunda causa comum é o bloqueio de iframes imposto por um plugin de segurança do WordPress. Plugins como Wordfence ou iThemes Security podem restringir iframes de fontes externas por padrão. Verifique suas configurações de Content Security Policy ou adicione o Flipbooks AI como fonte confiável no painel de configuração do plugin.
Se a incorporação parece correta no computador, mas quebrada no celular, o contêiner pai provavelmente tem uma largura fixa em pixels. Abra o DevTools do navegador, inspecione o elemento que envolve o iframe e troque a largura de um valor fixo em pixels para 100%. Depois, confirme se o próprio iframe também tem width="100%".
💡 Use a visualização responsiva do DevTools do navegador para simular tamanhos de tela de celular antes de publicar. Leva trinta segundos e identifica problemas de tamanho na hora.
O atributo frameborder="0" no iframe remove a borda padrão do navegador. Se ainda aparecer algum espaçamento em volta da incorporação, o problema geralmente é uma margem ou um preenchimento definido no contêiner pai, no CSS da sua página. Use o DevTools para identificar o elemento e defina margin: 0; padding: 0; nele diretamente.
Incorporar o flipbook é o passo final, mas a plataforma dá a você um controle significativo sobre o que acontece dentro do visualizador depois que ele está no ar no seu site.
| Recurso | Plano Free | Plano Standard | Plano Professional |
|---|---|---|---|
| Flipbooks por mês | Limitados | Ilimitados | Ilimitados |
| Marca d’água no visualizador | Sim | Não | Não |
| Marca personalizada | Não | Sim | Sim |
| Proteção por senha | Não | Sim | Sim |
| Incorporação no site | Sim | Sim | Sim |
| Estatísticas | Não | Básicas | Completas |
| Formulários de contato | Não | Não | Sim |
| Downloads offline | Não | Não | Sim |
| Vídeo e áudio dentro do flipbook | Não | Sim | Sim |
| Visualizador responsivo para celular | Sim | Sim | Sim |
Todos os planos permitem incorporar no seu site. A diferença está na experiência e nos dados que você coleta dela. O plano Standard remove as marcas d’água e adiciona marca personalizada completa. O plano Professional acrescenta o painel de estatísticas e os formulários de contato, que transformam seu flipbook incorporado de uma exibição estática em um ativo de conversão mensurável.
Veja o detalhamento completo em flipbooksai.com/pricing para encontrar o plano certo.
Incorporar um flipbook é uma das mudanças mais rápidas e de maior impacto que você pode fazer em uma página com muito conteúdo. A configuração leva alguns minutos, o resultado funciona em todos os dispositivos e plataformas, e a experiência do visitante é muito melhor do que a de um link de PDF.
Comece gratuitamente no Flipbooks AI, envie seu primeiro PDF e incorpore no seu site hoje mesmo. Se você já tem um caso de uso específico em mente, navegue pelo diretório de ferramentas para encontrar o modelo feito para o seu tipo de conteúdo. Quando estiver pronto para adicionar estatísticas, formulários de contato e marca personalizada, compare os planos e escolha o que atende aos seus objetivos.
Escolha seu idioma
