Um passo a passo mostrando exatamente como incorporar um flipbook interativo em qualquer site em minutos. Aborda códigos de incorporação com iframe, integração com WordPress, configurações no Wix e no Squarespace, dicas de dimensionamento responsivo, solução de problemas comuns e casos de uso reais, de restaurantes a imóveis.
Se você passou um bom tempo criando o catálogo, o folheto ou a revista perfeitos, a última coisa que quer é que ele fique numa pasta que ninguém abre. Incorporar um flipbook diretamente no seu site resolve isso na hora. Os visitantes folheiam o conteúdo na própria página, sem baixar nada e sem sair do seu site. E com o Flipbooks AI, todo o processo, do PDF ao flipbook incorporado, leva menos de cinco minutos.
PDFs estáticos servem para download. Mas quando você incorpora um flipbook interativo no seu site, muda a experiência por completo. Os visitantes interagem com o conteúdo como fariam com uma revista ou um catálogo impresso, com viradas de página suaves, links clicáveis e total responsividade para celulares.
Os números confirmam isso. Conteúdo interativo invariavelmente supera documentos estáticos:
| Formato | Tempo médio na página | Adequado para celular | Links clicáveis | Não precisa de download |
|---|---|---|---|---|
| Link de PDF estático | 45 segundos | Parcial | Não | Não |
| Visualizador de PDF incorporado | 1,2 minuto | Ruim | Não | Sim |
| Flipbook incorporado | 3,8 minutos | Sim | Sim | Sim |
Quando os visitantes ficam mais tempo, leem mais e confiam mais na sua marca. Um flipbook incorporado é uma das formas mais simples de melhorar essa experiência de maneira significativa.
Antes de incorporar qualquer coisa, você precisa de três itens:
Só isso. Não há plugins para instalar. Não são necessários conhecimentos de programação. O código de incorporação que o Flipbooks AI gera funciona em praticamente todas as principais plataformas de sites.
💡 Dica de ouro: Otimize seu PDF antes do envio. Comprima arquivos grandes para menos de 50MB para a conversão mais rápida. Use exportações de alta qualidade do Canva, do InDesign ou do Illustrator para os melhores resultados visuais.
Este é o fluxo principal. Depois de ter este código, incorporar em qualquer plataforma leva menos de dois minutos.
A plataforma aceita PDFs de qualquer tamanho. Não importa se você envia um folheto de duas páginas ou um relatório anual de 200 páginas: a conversão lida com os dois sem problemas.
Antes de copiar o código de incorporação, reserve alguns minutos para personalizar o visual:
A personalização define o que os visitantes veem no momento em que o flipbook carrega na sua página. Acerte isso aqui, antes de incorporar.
<iframe> geradoO código fica assim:
<iframe src="https://flipbooksai.com/view/your-flipbook-id" width="100%" height="600px" frameborder="0" allowfullscreen></iframe>
Esse bloco de código é tudo o que você precisa. O restante deste artigo mostra exatamente onde colá-lo em cada plataforma principal.
O WordPress alimenta mais de 40% da internet, então vamos começar por ele.
Isso funciona no editor de blocos padrão do WordPress (Gutenberg):
<iframe> no bloco✅ Boa prática: Defina a largura do iframe como
100%e a altura como550pxou600pxpara um resultado limpo e responsivo, que funciona tanto no computador quanto no celular.
Se você usa Elementor, Divi, Beaver Builder ou outro construtor de páginas:
O flipbook será exibido em linha, ocupando a largura da coluna ou da seção onde você o colocou.
⚠️ Atenção: Alguns plugins de segurança do WordPress bloqueiam iframes por padrão. Se o seu flipbook não aparecer, verifique as configurações do plugin (Wordfence, iThemes Security) e inclua o domínio do Flipbooks AI na lista de permitidos.
O Wix trata os iframes de forma um pouco diferente, então sempre visualize no computador e no celular antes de publicar.
💡 Dica de ouro: No Squarespace, use uma seção de largura total para o bloco de código, para dar ao seu flipbook o máximo de espaço na tela.
No Webflow, adicione um componente Incorporação de HTML à sua área de trabalho e cole o código. Para sites HTML estáticos, cole o iframe diretamente no HTML da página, no local onde ele deve aparecer:
<section class="flipbook-wrapper">
<iframe
src="https://flipbooksai.com/view/your-flipbook-id"
width="100%"
height="600"
frameborder="0"
allowfullscreen>
</iframe>
</section>
Envolver o iframe em uma <section> ou em uma <div> dá controle via CSS sobre margens, espaçamento interno e cor de fundo.
Nem todos os cenários de incorporação são iguais. Veja como se comparam as principais opções:
| Tipo de incorporação | Ideal para | Responsivo | Código necessário | Dificuldade |
|---|---|---|---|---|
| iframe padrão | A maioria dos sites | Sim (largura de 100%) | Sim (colar) | Fácil |
| Invólucro responsivo | Manter a proporção da imagem | Sim (automático) | Sim (2 linhas de CSS) | Fácil |
| Incorporação em tela cheia | Páginas de destino, seções de destaque | Sim | Sim (pequenos ajustes) | Média |
| Pop-up ou lightbox | Páginas de produtos, CTAs | Sim | Sim (trecho em JS) | Média |
| Somente link direto | E-mail, redes sociais, compartilhamento simples | N/A | Não | Nenhuma |
Para a maioria dos sites, o iframe responsivo padrão é a escolha certa. Defina a largura como 100% e a altura como um valor fixo em pixels, como 600px. Isso garante um comportamento constante em diferentes tamanhos de tela, sem CSS adicional.
Acertar o tamanho faz a diferença entre um flipbook que parece parte do seu site e um que parece deslocado.
Configurações recomendadas para diferentes contextos:
| Local | Largura | Altura | Observações |
|---|---|---|---|
| Seção de largura total | 100% | 600 a 700px | Funciona em todos os tamanhos de tela |
| Layout de duas colunas | 100% | 500px | Acompanha a largura da coluna |
| Post de blog em linha | 100% | 450px | Equilibrado dentro do artigo |
| Destaque ou página de destino | 100% | 750px | Máximo impacto visual |
| Widget de barra lateral | 100% | 400px | Compacto, mas legível |
✅ Boa prática: Sempre teste seu flipbook incorporado no celular depois de publicar. A ferramenta Incorporar flipbook no site gera código otimizado para dispositivos móveis por padrão, mas confira o resultado real no seu celular antes de publicar.
Até uma incorporação simples pode dar problemas. Estes são os mais comuns e como resolvê-los.
Flipbook não aparece de jeito nenhum
Flipbook aparece, mas exibe um erro
src do iframe está correto e não foi alteradoFlipbook está pequeno demais ou cortado
height no seu código de iframe100% se ela estiver com um valor fixo em pixels menor que o contêinerFlipbook não rola no celular
scrolling="no" à tag iframe para evitar conflitos de captura de rolagem em navegadores móveis⚠️ Atenção: Nunca cole seu código de incorporação em um bloco de texto comum ou em um campo de parágrafo. Ele aparecerá como texto HTML bruto, em vez de exibir o flipbook. Sempre use um bloco específico de HTML, de código ou de incorporação.
Como a incorporação exige um flipbook primeiro, este é o caminho mais rápido do zero até o flipbook no seu site, usando o Flipbooks AI.
Acesse flipbooksai.com/account e crie sua conta. Não é preciso cartão de crédito para começar. O plano gratuito permite criar e incorporar flipbooks imediatamente.
Clique em Criar novo flipbook, envie seu PDF e aguarde a conversão. A plataforma faz tudo automaticamente, incluindo a renderização das páginas, a otimização das imagens e a responsividade para celulares.
Use o painel de personalização para:
Clique em Compartilhar e depois em Incorporar. Escolha as configurações de tamanho e copie o código iframe gerado. A ferramenta Incorporar flipbook no site torna esse passo simples, sem exigir nenhum conhecimento técnico.
Siga os passos específicos da plataforma descritos acima. Seu flipbook estará no ar em menos de dois minutos.
Recursos disponíveis por plano:
| Recurso | Gratuito | Standard | Professional |
|---|---|---|---|
| Flipbooks ilimitados | Não | Sim | Sim |
| Personalização da marca | Limitada | Sim | Sim |
| 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 | Sim | Sim |
| Incorporar vídeos e áudios | Não | Sim | Sim |
| Sem marcas d’água | Não | Sim | Sim |
Conheça os planos e preços para encontrar a opção certa para você.
A configuração técnica é a parte fácil. Veja onde os flipbooks incorporados realmente fazem diferença.
Restaurantes e hotelaria
Um restaurante pode incorporar um flipbook de cardápio digital diretamente na página do cardápio. Os clientes percorrem o cardápio completo, com fotos, preços e descrições, sem baixar nada. Atualizar o cardápio significa enviar um novo PDF, e o flipbook incorporado se atualiza automaticamente.
Imobiliárias
Corretores de imóveis se beneficiam ao incorporar folhetos de imóveis diretamente nas páginas dos imóveis. Os compradores folheiam plantas detalhadas, fotos da vizinhança e especificações do imóvel direto no navegador. É bem mais envolvente do que um link de download de PDF estático.
E-commerce e varejo
Varejistas incorporam catálogos de produtos em páginas de categoria ou em páginas de destino de campanhas. Os compradores percorrem o catálogo completo com a sensação de uma revista impressa. Para marcas de moda, um lookbook interativo incorporado na página inicial causa uma impressão visual imediata.
Empresas e serviços profissionais
Empresas compartilham relatórios anuais e apresentações de vendas incorporando-os em páginas para investidores ou clientes. Parece mais profissional do que um link de PDF e é muito mais envolvente do que um bloco de texto.
Educação e treinamento
Equipes de treinamento incorporam materiais de curso e manuais de treinamento em portais internos ou plataformas LMS. Os participantes acessam conteúdo formatado e com marcadores, sem precisar de softwares separados.
A incorporação é a opção mais poderosa, mas o Flipbooks AI oferece várias formas de compartilhar:
| Opção | Melhor uso | Exige acesso ao site |
|---|---|---|
| Código de incorporação (iframe) | Páginas do site, páginas de destino | Sim |
| Link direto | E-mail, redes sociais, QR codes | Não |
| Link protegido por senha | Materiais privados de clientes | Não |
| Link em tela cheia | Apresentações, anúncios | Não |
| Versão baixada para uso offline | Eventos, sem acesso à internet | Não |
Cada opção aponta para o mesmo flipbook publicado. Atualize seu PDF uma vez, e todos os métodos de compartilhamento refletem a mudança na hora.
Incorporar um flipbook no seu site não exige mais um desenvolvedor, um plugin ou uma tarde inteira de solução de problemas. Com um único código iframe e dois minutos de trabalho, seu conteúdo deixa de ser um PDF estático e passa a ser uma experiência interativa, pronta para celulares, com a qual os visitantes realmente querem interagir.
Falta apenas fazer. Comece gratuitamente no Flipbooks AI, envie seu primeiro PDF e tenha-o incorporado no seu site antes da próxima reunião.
Se você quer ver o que é possível além de folhetos e cardápios simples, veja todas as ferramentas de flipbook para encontrar modelos feitos para o seu caso de uso específico. Quando estiver pronto para remover as marcas d’água, adicionar estatísticas ou ativar formulários de contato, confira os planos e preços para escolher a opção certa.
Escolha seu idioma
