Incorporar um flipbook no seu site não precisa custar nada. Este artigo mostra passo a passo como pegar um código de incorporação, colá-lo no seu site e ter uma publicação totalmente interativa no ar em minutos, em qualquer plataforma ou CMS, incluindo WordPress, Squarespace, Wix e HTML puro.
Incorporar um flipbook no seu site costumava exigir contratar um desenvolvedor, pagar um software caro ou se conformar com um link de PDF estático que ninguém clica. Essa época acabou. Hoje, o Flipbooks AI entrega um código de incorporação compartilhável em segundos, e você pode ter uma publicação totalmente interativa, com efeito de virar página, no ar em qualquer site, de graça.
Este artigo mostra cada etapa do processo, desde criar seu flipbook até copiar e colar o código de incorporação, em todas as principais plataformas, incluindo WordPress, Squarespace, Wix, Webflow e sites em HTML puro.
Antes de partir para os passos, vale saber com o que você está lidando. Um código de incorporação de flipbook é um pequeno trecho de HTML, normalmente uma tag <iframe>, que carrega seu flipbook interativo diretamente dentro de qualquer página da web. Os visitantes veem um visualizador totalmente funcional sem sair do seu site.
O código tem mais ou menos esta aparência:
<iframe src="https://flipbooksai.com/view/your-flipbook-id" width="100%" height="600" frameborder="0" allowfullscreen></iframe>
Você cola uma vez. Ele funciona em qualquer lugar.
💡 Dica de especialista: Os códigos de incorporação do Flipbooks AI são responsivos por padrão. Defina
width="100%"e o flipbook se ajusta automaticamente a qualquer tamanho de tela, incluindo celulares e tablets.
Um link direto para o PDF joga o visitante em uma aba do navegador sem identidade visual, sem interatividade e sem como saber quem viu o quê. Um flipbook incorporado mantém seu público no seu site, dentro do seu design, com a experiência completa de virar páginas. A taxa de rejeição cai. O tempo na página aumenta.
Veja como as duas abordagens se comparam:
| Funcionalidade | Link direto do PDF | Flipbook incorporado |
|---|---|---|
| Permanece no seu site | Não | Sim |
| Animação de virar página | Não | Sim |
| Responsivo para celular | Parcialmente | Totalmente |
| Identidade visual personalizada | Não | Sim |
| Análises e estatísticas | Não | Sim (Professional) |
| Proteção por senha | Não | Sim |
| Incorporar vídeos e áudio | Não | Sim |
| Sem marcas d’água | N/A | Sim (plano Standard e superiores) |
| Captação de contatos | Não | Sim (Professional) |
A diferença na experiência do visitante é grande. Um flipbook incorporado parece parte natural do seu site. Um link de PDF parece algo improvisado que ninguém pediu.
Você não consegue incorporar o que ainda não criou. Se você já tem um flipbook pronto, pule para a seção de incorporação. Se não tiver, este é o caminho mais rápido para colocá-lo no ar no Flipbooks AI.
Acesse o Flipbooks AI e crie uma conta gratuita. Depois de entrar, clique em Criar flipbook e arraste e solte seu arquivo PDF. A plataforma converte cada página automaticamente em um flipbook interativo, com animações suaves de virar página, em segundos.
O Conversor de PDF para flipbook cuida de tudo, desde catálogos de produtos e cardápios de restaurantes até relatórios anuais e portfólios criativos. Se seu documento já é um PDF, o conversor faz o resto.
Depois que seu PDF for processado, você pode personalizar cada elemento visual:
Antes de pegar seu código de incorporação, revise as configurações de compartilhamento para garantir que o acesso esteja correto:
Clique no botão Compartilhar em qualquer flipbook publicado e depois selecione a aba Incorporar. Você verá um trecho de iframe personalizável, com dimensões ajustáveis. Defina a largura e a altura que você precisa e copie o bloco de código completo. Esse é o código que você vai colar no seu site.
Agora, a incorporação em si. O processo varia um pouco de acordo com a plataforma, mas o código de incorporação nunca muda. Copie-o uma vez no Flipbooks AI e cole onde sua plataforma aceitar HTML.
O WordPress é o CMS mais usado, e incorporar um flipbook leva menos de dois minutos.
Usando o editor de blocos (Gutenberg):
Usando o editor clássico:
⚠️ Atenção: Nunca cole código de iframe no editor Visual. O WordPress remove automaticamente as tags de iframe nesse modo, e seu flipbook não vai aparecer.
💡 Os blocos de código do Squarespace exigem o plano Business ou superior para exibir HTML personalizado. Os planos Personal não oferecem suporte a códigos de incorporação personalizados.
Se você gerencia seus próprios arquivos HTML, esta é a abordagem mais direta:
<section class="flipbook-section">
<iframe
src="https://flipbooksai.com/view/your-flipbook-id"
width="100%"
height="650"
frameborder="0"
allowfullscreen>
</iframe>
</section>
Acertar as dimensões importa. Um flipbook pequeno demais fica ilegível. Grande demais e ele estoura o layout no celular. Estes tamanhos recomendados cobrem os casos de uso mais comuns.
| Caso de uso | Largura | Altura | Observações |
|---|---|---|---|
| Seção principal de largura total | 100% | 700px | Ideal para páginas de destino |
| Post de blog ou incorporação em artigo | 100% | 550px | Encaixa bem dentro das colunas de texto |
| Widget de barra lateral | 350px | 450px | Compacto para áreas de navegação |
| Página de catálogo de produtos | 100% | 650px | Padrão para catálogos e cardápios |
| Vitrine de portfólio | 100% | 600px | Ideal para livros de fotos e design |
| Seção de relatório corporativo | 100% | 680px | Aparência profissional para relatórios |
✅ Boa prática: Use sempre
width="100%"combinado com uma altura fixa em pixels. Isso garante que o flipbook se ajuste corretamente a todos os tamanhos de tela, sem estourar horizontalmente nem quebrar seu layout.
O Flipbooks AI oferece um plano gratuito junto com planos pagos. Veja o que importa especificamente para incorporação:
| Funcionalidade | Gratuito | Standard | Professional |
|---|---|---|---|
| Incorporar no site | Sim | Sim | Sim |
| Sem marcas d’água | Não | Sim | Sim |
| Flipbooks ilimitados | Não | Sim | Sim |
| Identidade visual personalizada | Limitada | Sim | Sim |
| Proteção por senha | Não | Sim | Sim |
| Incorporar vídeos e áudio | Não | Sim | Sim |
| Análises | Não | Não | Sim |
| Formulários de contato | Não | Não | Sim |
| Downloads offline | Não | Não | Sim |
| Responsivo para celular | Sim | Sim | Sim |
Para qualquer uso voltado a negócios, o plano Standard, no mínimo, remove a marca d’água e libera flipbooks ilimitados, o que o torna a escolha prática para sites profissionais. Veja a comparação completa na página de preços.
Saber como incorporar é uma coisa. Saber onde colocar a incorporação é o que gera resultados reais.
E-commerce e varejo: Um catálogo de produtos incorporado em uma página de categoria mantém os compradores no seu site por mais tempo e reduz a rejeição. Use o Gerador de catálogo de produtos ou o Criador de catálogo digital gratuito para criar catálogos com produtos para compra que podem ser folheados como uma revista física.
Restaurantes e hotelaria: Um cardápio incorporado na sua página de pedidos elimina qualquer atrito. Os clientes navegam sem baixar nada. O Criador de flipbook de cardápio de restaurante ou o Criador de flipbook de cardápio cuida da formatação automaticamente.
Imóveis: Corretores incorporam folhetos de imóveis diretamente nas páginas dos imóveis. Os visitantes folheiam o folheto sem sair da página do imóvel. O Criador de folheto imobiliário produz folhetos com qualidade de impressão que ficam bonitos na tela.
Educação e treinamento: Materiais de curso e manuais de treinamento incorporados em um portal do aluno ou em um site interno são muito mais envolventes do que um PDF para download. O Editor de material de curso interativo e o Flipbook de manual de treinamento foram feitos exatamente para esse cenário.
Comunicação corporativa: Relatórios anuais e materiais para investidores incorporados em uma página de relações com investidores têm aparência sofisticada e profissional. Use o Criador de relatório anual interativo para um resultado que reflita a qualidade da sua organização.
Portfólios criativos: Fotógrafos e designers incorporam seus trabalhos como flipbooks visuais de página inteira em seus sites de portfólio. O Flipbook de portfólio fotográfico e o Criador de portfólio digital criam galerias roláveis impressionantes.
O Flipbooks AI tem uma funcionalidade dedicada à incorporação: a ferramenta Incorporar flipbook no site. Ela gera códigos de incorporação totalmente otimizados, com opções extras que você não encontra em um iframe simples:
Todas essas configurações ficam diretamente no painel de compartilhamento, quando você cria ou edita qualquer flipbook. Não é preciso ferramentas externas nem programação.
Mesmo um processo simples de copiar e colar pode produzir resultados inesperados. Estes são os problemas mais comuns e suas soluções.
O flipbook mostra uma caixa branca em branco: A URL do iframe está incorreta ou o flipbook está definido como privado. Acesse seu painel do Flipbooks AI, confirme que o flipbook está publicado e definido como público, e depois copie o código de incorporação novamente.
O flipbook fica cortado no celular: Você está usando uma largura fixa em pixels. Substitua width="700" por width="100%" e o problema se resolve imediatamente em todos os dispositivos.
O flipbook não aparece no WordPress: Você colou o código no editor Visual. Mude para a aba Texto ou HTML, cole o código ali, e ele será exibido corretamente.
Erro de conteúdo misto de segurança no console do navegador: Isso acontece quando seu site usa HTTPS, mas a URL de incorporação aponta para HTTP. Todas as URLs de incorporação do Flipbooks AI usam HTTPS por padrão. Se você usa uma configuração hospedada por conta própria, verifique se o seu site tem um certificado SSL válido instalado.
O flipbook carrega devagar: Ative o carregamento tardio nas configurações de incorporação do seu painel do Flipbooks AI. Isso adia o carregamento do flipbook até que o visitante role até ele, o que pode melhorar de forma significativa a velocidade geral da página e as pontuações de Core Web Vitals.
O código de incorporação some depois de salvar em um construtor de páginas: Alguns construtores de páginas higienizam o HTML ao salvar. Use um widget de bloco HTML ou de código em vez de um bloco de texto, e o código será mantido corretamente.
Uma pergunta que surge com frequência: incorporar um flipbook afeta o ranqueamento da página nos buscadores? A resposta honesta é que os mecanismos de busca não rastreiam de forma confiável o conteúdo dentro de iframes. O texto das páginas do seu flipbook fica, em grande parte, invisível para o Google.
Isso não é necessariamente um problema. Seu flipbook funciona como uma camada de experiência visual e interativa, e não como seu principal veículo de conteúdo. A solução é simples: mantenha o texto principal, rico em palavras-chave, na própria página, acima ou abaixo da incorporação, e trate o flipbook como uma experiência de conteúdo premium para visitantes humanos.
Para tirar o máximo proveito de SEO em qualquer página com um flipbook incorporado:
Nada disso conflita com a incorporação. Ambos podem coexistir e ter bom desempenho juntos.
Dependendo do seu setor, o Flipbooks AI tem ferramentas específicas que vão além dos flipbooks básicos:
Explore a biblioteca completa em flipbooksai.com/tools.
O processo é realmente simples: crie seu flipbook, pegue o código de incorporação e cole no seu site. Não importa se você usa WordPress, Squarespace, Wix, Webflow ou uma página HTML feita à mão: o mesmo código funciona em todos eles, sem modificações.
O plano gratuito oferece o suficiente para testar a ideia e ver a incorporação no ar no seu site. Quando estiver pronto para remover as marcas d’água, adicionar identidade visual personalizada, proteger o conteúdo com senha e acompanhar o comportamento dos leitores com análises, conheça os planos de preços e escolha o nível certo para as suas necessidades.
Comece com um PDF que você já tem. Crie seu primeiro flipbook no Flipbooks AI agora mesmo, pegue seu código de incorporação em menos de dois minutos e coloque-o no ar no seu site hoje.
Escolha seu idioma
