Seja você publicando um catálogo de produtos, uma revista digital ou um manual de treinamento, incorporar um flipbook no seu site torna seu conteúdo impossível de ignorar. Este artigo detalha cada método, plataforma e ajuste que você precisa para colocar o conteúdo no ar hoje.
Colocar um PDF estático no seu site é o equivalente digital de entregar um folheto impresso e ir embora. Um flipbook incorporado, com suas animações de virada de página, layout responsivo para celular e controles interativos, mantém os visitantes na página, faz mais cliques e faz seu conteúdo ser realmente lido. O Flipbooks AI faz todo o processo levar menos de cinco minutos, seja você administrando um blog no WordPress, uma loja na Shopify ou uma página HTML feita à mão.
Este artigo cobre todos os métodos para incorporar um flipbook no seu site, os ajustes que fazem diferença, os erros que quebram a incorporação e os casos de uso reais que mostram por que vale a pena fazer isso direito.
Antes de colar uma única linha de código, vale saber com o que você está lidando. Um flipbook incorporado não é uma imagem nem uma prévia de PDF estático. É uma publicação digital totalmente interativa e autocontida, que carrega dentro da sua página da web, exatamente onde você a posicionar.
A maioria das plataformas, incluindo o Flipbooks AI, entrega a incorporação por meio de uma tag <iframe>. O iframe cria uma janela isolada dentro da sua página que carrega o visualizador do flipbook de forma independente. Isso significa que:
Algumas plataformas também oferecem incorporações baseadas em JavaScript, que inserem o visualizador diretamente no seu DOM. Elas dão mais controle programático (acionar viradas de página por código, por exemplo), mas exigem uma configuração técnica maior e podem entrar em conflito com scripts já existentes.
💡 Para a maioria dos usuários, a incorporação por iframe é a escolha certa. Ela é estável, portátil e não exige nenhum conhecimento de programação.
Uma incorporação de largura fixa define dimensões exatas em pixels. É simples, mas quebra em telas de celular. Uma incorporação responsiva usa largura em porcentagem e um truque de preenchimento para manter a proporção em todos os dispositivos.
| Tipo de incorporação | Melhor para | Compatível com celular |
|---|---|---|
| iframe de largura fixa | Contextos conhecidos apenas para computador | Não |
| iframe responsivo | A maioria dos sites, todo tipo de público | Sim |
| Incorporação em JavaScript | Gatilhos controlados por desenvolvedor | Depende da implementação |
| Widget da plataforma | Criadores de sites (Wix, Squarespace) | Sim (a plataforma cuida disso) |
O Flipbooks AI gera códigos de incorporação responsivos por padrão, então seu flipbook se ajusta automaticamente a qualquer largura de tela.
O código de incorporação é o pequeno bloco de HTML que você copia da sua plataforma de flipbook e cola no seu site. Veja como obtê-lo.
O código tem esta aparência:
<iframe src="https://flipbooksai.com/view/your-flipbook-id" width="100%" height="600" frameborder="0" allowfullscreen></iframe>
Antes de copiar, você pode ajustar várias configurações diretamente no painel de incorporação:
| Configuração | O que controla | Valor recomendado |
|---|---|---|
| Largura | Largura do visualizador na página | 100% (responsivo) |
| Altura | Altura do visualizador em pixels | 500-700px, conforme o conteúdo |
| Reprodução automática | Vira as páginas sozinha ao carregar | Desativada (o usuário prefere controlar) |
| Página inicial | Qual página abre primeiro | 1 (capa) |
| Controles visíveis | Mostra ou oculta a barra de navegação | Ativados |
| Botão de tela cheia | Permite o modo tela cheia | Ativado |
⚠️ Se você definir uma largura fixa em pixels em vez de 100%, a incorporação vai transbordar em telas de celular. Sempre teste em um celular antes de publicar.
O WordPress é a plataforma mais comum para incorporar flipbooks, e o processo leva cerca de 90 segundos.
Usando o Editor Clássico:
Usando o Editor de Blocos (Gutenberg):
💡 Alguns plugins de segurança do WordPress (como Wordfence ou iThemes) removem tags iframe do conteúdo das publicações. Se sua incorporação sumir depois de salvar, verifique as configurações do plugin de segurança e adicione o domínio do Flipbooks AI à lista de permitidos.
Usando um criador de páginas (Elementor, Divi, Beaver Builder):
As duas plataformas usam seus próprios criadores de arrastar e soltar, mas ambas aceitam incorporações de HTML puro.
Squarespace:
Wix:
Varejistas costumam incorporar catálogos de produtos e lookbooks diretamente nas páginas de coleção ou na página inicial. A Shopify usa um sistema de temas em Liquid, mas a incorporação continua simples.
Em uma página:
Em seções da página inicial:
Você vai precisar editar o index.liquid do tema, ou usar uma seção de HTML personalizado se o seu tema permitir. A maioria dos temas modernos da Shopify inclui uma seção de Conteúdo personalizado onde você pode colocar HTML diretamente.
✅ Para lojas na Shopify, as ferramentas Criador de catálogo digital gratuito e Gerador de catálogo de produtos do Flipbooks AI são especialmente indicadas para incorporar catálogos de temporada e vitrines de produtos.
Se você trabalha com um arquivo HTML escrito à mão ou com um gerador de sites estáticos, este é o caso mais simples:
<div class="flipbook-container" style="width:100%; max-width:900px; margin:0 auto;">
<iframe
src="https://flipbooksai.com/view/your-flipbook-id"
width="100%"
height="600"
frameborder="0"
allowfullscreen>
</iframe>
</div>
Envolva o código em uma div com uma max-width para evitar que ele se estique demais em monitores grandes.
Acertar o tamanho é onde a maioria das incorporações falha. O flipbook fica bom no computador, mas encolhe em uma caixinha minúscula no celular, ou se estica de forma estranha em um monitor largo.
A configuração mais segura para qualquer site:
<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>
O valor padding-bottom: 56.25% cria um contêiner com proporção 16:9. O iframe então preenche esse contêiner por completo. Mude 56.25% para 75% para uma proporção 4:3, que funciona melhor em publicações no formato retrato.
O Flipbooks AI otimiza automaticamente o visualizador do flipbook para telas de toque: gestos de arrastar substituem a navegação por cliques, a interface se reduz e o zoom com pinça funciona nas páginas da publicação. Você não precisa criar uma versão separada para celular.
✅ Teste sua incorporação em um dispositivo móvel de verdade, e não apenas no modo de emulação do navegador. As ferramentas de desenvolvedor do navegador não simulam os eventos de toque da mesma forma que um aparelho real.
Antes de incorporar qualquer coisa, você precisa do próprio flipbook. Veja como criar um do zero no Flipbooks AI:
💡 As ferramentas Conversor de PDF para flipbook e Incorporar flipbook no site simplificam todo esse fluxo em um só lugar.
Funcionalidades incluídas por plano:
| Funcionalidade | Gratuito | Standard | Professional |
|---|---|---|---|
| Flipbooks por conta | 3 | Ilimitados | Ilimitados |
| Marca personalizada | Parcial | Completa | Completa |
| Proteção por senha | Não | Sim | Sim |
| Painel de estatísticas | Não | Não | Sim |
| Formulários de contato | Não | Não | Sim |
| Downloads offline | Não | Não | Sim |
| Incorporação no site | Sim | Sim | Sim |
| Sem marcas d’água | Não | Sim | Sim |
Compare todos os planos para ver qual se encaixa no seu fluxo de trabalho.
A incorporação não é só um recurso técnico, é uma ferramenta de conversão. Veja como diferentes negócios a usam:
Varejo e e-commerce: Catálogos de produtos incorporados nas páginas de coleção aumentam o tempo no site e reduzem a taxa de rejeição. Os compradores folheiam o catálogo como um lookbook físico e depois clicam para ir às páginas dos produtos. O Estilista de lookbook interativo foi criado exatamente para esse caso de uso.
Restaurantes: Um cardápio digital incorporado na página inicial do restaurante substitui as galerias de imagens estáticas. Ele é mais fácil de atualizar (envie um novo PDF e a incorporação se atualiza sozinha) e mais envolvente do que uma página longa com rolagem. Use o Criador de flipbook de cardápio de restaurante para criá-lo.
Imobiliárias: Folhetos de imóveis incorporados nas páginas de cada imóvel permitem que compradores folheiem plantas, fotos e informações da vizinhança sem sair do site. O Criador de folheto imobiliário gera PDFs prontos para impressão que convertem perfeitamente.
Educação e treinamento: Materiais de curso, manuais de treinamento e documentos de integração incorporados em um portal de aprendizagem são bem mais envolventes do que PDFs para download. O Flipbook de manual de treinamento e o Editor de material de curso interativo dão suporte direto a esse fluxo de trabalho.
Marketing e relações públicas: Relatórios anuais incorporados nas páginas de relações com investidores, kits de imprensa nas páginas para a mídia e apresentações de vendas nas páginas de destino se beneficiam do formato interativo. O Criador de relatório anual interativo lida com documentos complexos de várias páginas sem problemas.
Se o seu flipbook estiver definido como Privado ou Protegido por senha, a incorporação vai mostrar uma solicitação de login ou uma área em branco para visitantes anônimos. Antes de incorporar, confirme que a configuração de compartilhamento está como Público, ou envie a senha separadamente para o seu público.
Alguns temas aplicam restrições de overflow: hidden ou max-height às áreas de conteúdo, o que corta ou oculta o iframe. Se o seu flipbook aparecer cortado:
.your-content-area {
overflow: visible !important;
}
Ou envolva o iframe em um contêiner com altura explícita para que os estilos do tema não o comprimam.
No WordPress e em editores semelhantes, se você colar o código do iframe no editor Visual (WYSIWYG) em vez do editor HTML/Texto, a plataforma vai remover a tag iframe por motivos de segurança. Sempre mude para a visualização de HTML puro antes de colar.
Rascunhos e prévias às vezes se comportam de forma diferente das páginas publicadas, especialmente com plugins de cache ativos. Depois de publicar, abra a URL ao vivo em uma janela anônima para confirmar que a incorporação aparece corretamente para um visitante que está vendo a página pela primeira vez.
⚠️ Plugins de cache (WP Super Cache, W3 Total Cache) às vezes exibem uma versão em cache da sua página sem a incorporação, caso ela tenha sido armazenada antes de você adicionar o flipbook. Limpe o cache depois de adicionar o código de incorporação.
| Plataforma | Método de incorporação | Nível técnico | Tempo necessário |
|---|---|---|---|
| WordPress (Editor de Blocos) | Bloco HTML personalizado | Iniciante | 2 minutos |
| WordPress (Editor Clássico) | Aba Texto, colar HTML | Iniciante | 1 minuto |
| Elementor / Divi | Widget HTML | Iniciante | 2 minutos |
| Squarespace | Bloco de código | Iniciante | 2 minutos |
| Wix | Widget iframe HTML | Iniciante | 3 minutos |
| Shopify | Código-fonte da página | Intermediário | 5 minutos |
| Webflow | Elemento Incorporar HTML | Iniciante | 2 minutos |
| HTML puro | Colar diretamente | Iniciante | 1 minuto |
Quando o flipbook estiver no ar no seu site, o plano Professional do Flipbooks AI dá acesso ao painel de estatísticas. Você pode ver quantos visitantes abriram a incorporação, em quais páginas passaram mais tempo, até onde leram e se clicaram em algum link interno.
Esses dados dizem mais do que uma simples contagem de visualizações da página. Se os leitores deixam de ler de forma constante na página 4 de um catálogo de 20 páginas, essa página precisa de ajustes. Se a última página recebe o maior tempo de leitura, sua chamada para ação está cumprindo o papel dela.
Os formulários de contato, disponíveis no plano Professional, permitem reservar o flipbook para quem preencher um formulário de cadastro, coletando e-mails diretamente dos leitores que interagem com sua publicação incorporada.
Pronto para colocar um flipbook no seu site? Crie seu primeiro flipbook no Flipbooks AI gratuitamente, pegue o código de incorporação no painel Compartilhar e cole-o onde seu público já passa o tempo. Veja todas as ferramentas e modelos para encontrar o formato certo para o seu conteúdo, ou confira os planos e preços se você precisar de flipbooks ilimitados, marca personalizada e estatísticas desde o primeiro dia.
Escolha seu idioma
