Tutorial, Flipbooks, SiteComo incorporar um flipbook ao seu site

Por: Robert Soares     |     Jan 31, 2026

Três maneiras de colocar um flipbook no seu site

Você criou um flipbook. Agora quer colocá-lo no seu site. Há três abordagens, e a melhor depende de quanto controle você precisa.

1. Incorporação com iFrame — a mais simples. Funciona em qualquer lugar.
2. Incorporação com JavaScript — responsiva por padrão. Oferece mais controle.
3. Link direto — nenhum código, apenas uma URL.

Cada uma tem suas vantagens e desvantagens. O principal ponto que pega muita gente de surpresa? O celular. Uma incorporação que parece perfeita no notebook pode ficar péssima no telefone. Falaremos disso em instantes.

Do ponto de vista técnico, este é um trabalho comum de incorporação na web: o comportamento do iframe é explicado na referência de iframe da MDN, e a usabilidade dos toques deve seguir as orientações da WCAG sobre tamanho mínimo dos alvos.

Método 1: incorporação com iFrame (mais fácil)

Um iFrame é uma janela para outra página da web. Você cola algumas linhas de código e seu flipbook aparece.

Obtenha o código de incorporação

No Flipbooker, abra seu flipbook e clique em “Compartilhar”. Procure a aba “Incorporar”. Você verá um código parecido com este:

<iframe
  src="YOUR_FLIPBOOK_URL"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen>
</iframe>

Cole no seu site

No site, encontre o lugar onde deseja exibir o flipbook. Na maioria dos construtores de páginas, adicione um bloco “HTML” ou “Código personalizado”. Cole o código. Salve e visualize.

Ajuste as dimensões

O padrão é largura de 100% (preenche o contêiner) e altura de 600 px. Ajuste conforme necessário:

• Largura total e mais alto: height="800"
• Tamanho fixo: width="800" height="600"
• Página inteira: width="100%" height="100vh"

Prós: funciona em qualquer lugar. Sem dependências. Simples. Contras: dimensões fixas podem ser complicadas no celular. Falaremos disso abaixo.

Método 2: incorporação com JavaScript (responsiva)

A incorporação com JavaScript oferece mais controle e um comportamento responsivo melhor. Se você já brigou com um iFrame que fica ótimo no computador e péssimo no celular, esta é a solução.

Obtenha o código JavaScript

Na aba Compartilhar > Incorporar do Flipbooker, selecione “JavaScript” em vez de “iFrame”. Você verá:

<div id="flipbooker-embed-abc123"></div>
<script src="YOUR_EMBED_SCRIPT_URL"></script>
<script>
  Flipbooker.embed({
    container: '#flipbooker-embed-abc123',
    flipbook: 'abc123',
    responsive: true
  });
</script>

Adicione à página

Cole esse código onde deseja exibir o flipbook. A <div> é o contêiner; os scripts fazem o trabalho.

Configure as opções

A incorporação com JavaScript aceita opções:

Flipbooker.embed({
  container: '#flipbooker-embed-abc123',
  flipbook: 'abc123',
  responsive: true,
  minHeight: 400,
  maxHeight: 800,
  startPage: 1,
  showToolbar: true
});

Prós: responsiva por padrão. Mais controle. Melhor comportamento no celular. Contras: um pouco mais complexa. Exige que o JavaScript esteja habilitado.

Método 3: link direto

Às vezes, não é necessário incorporar. Basta levar as pessoas à página do flipbook.

Quando links diretos fazem mais sentido

• Campanhas de email (a incorporação não funciona em emails)
• Posts em redes sociais
• QR codes em materiais impressos
• Qualquer situação em que seu CMS restrinja códigos personalizados

Obtenha seu link

No Flipbooker, clique em Compartilhar e copie a URL direta:

YOUR_FLIPBOOK_URL

Use-a em emails, posts sociais ou em qualquer lugar onde você compartilhe links.

Prós: funciona em qualquer lugar. Não exige código. Experiência em tela cheia. Contras: os leitores saem do seu site.

Instruções específicas por plataforma

WordPress

Editor de blocos (Gutenberg): adicione um bloco “HTML personalizado”, cole o código de incorporação, visualize e publique.

Editor clássico: mude para a aba “Texto” (não “Visual”), cole o código e volte para Visual para verificar a renderização.

Elementor: adicione um widget HTML, cole o código e ajuste o tamanho do widget.

Squarespace

Adicione um bloco “Código” à página. Cole o código de incorporação. Para ocupar toda a largura, coloque-o em uma seção de largura total.

Dica para Squarespace: o tratamento responsivo pode ser temperamental. Na prática, incorporações com iFrame que ficam boas no computador ainda podem quebrar o layout em alguns modelos no celular. Teste em um telefone de verdade antes de publicar.

Wix

Adicione um elemento “Incorporar” ou “iFrame HTML”, escolha “Código” e cole sua incorporação. Redimensione o elemento para caber no layout.

Dica para Wix: talvez seja necessário definir dimensões específicas em pixels, não porcentagens.

Webflow

Adicione um elemento “Embed”, cole o código e estilize o contêiner para que ele seja responsivo.

Dica para Webflow: use a incorporação com JavaScript para ter mais controle responsivo. Discussões no fórum do Webflow mostram que incorporações com iFrame podem empurrar o conteúdo para fora da tela no celular.

Shopify

Edite sua página ou produto. No editor de conteúdo, clique em “Mostrar HTML” ou <>. Cole o código e salve.

Para integrar ao tema, edite os arquivos do tema e adicione-o a uma seção.

O problema no celular (e como corrigi-lo)

Eis o que surpreende a maioria das pessoas: uma incorporação com iFrame que parece perfeita no notebook pode quebrar completamente no celular. Não é um bug no flipbook. É assim que os iFrames funcionam.

Nas palavras da equipe de engenharia da Embeddable: “Os navegadores móveis acrescentam uma camada extra de dificuldade ao ampliar o frame e desativar a rolagem com inércia.” O resultado? Seus usuários veem um pequeno retângulo ampliado no lugar do flipbook. Ou duas barras de rolagem.

A correção responsiva do iFrame

Coloque o iFrame dentro de um contêiner responsivo:

<div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe
    src="YOUR_FLIPBOOK_URL"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>

O padding-bottom: 75% cria uma proporção de 4:3. Ajuste às suas necessidades:

• 16:9 → padding-bottom: 56.25%
• 4:3 → padding-bottom: 75%
• Quadrado → padding-bottom: 100%

Ou simplesmente use a incorporação com JavaScript

Defina responsive: true, e ela ajustará o tamanho automaticamente. Sem uma div externa, sem cálculos de proporção.

Flipbooker.embed({
  container: '#flipbooker-embed',
  flipbook: 'abc123',
  responsive: true,
  minHeight: 400
});

Se você usa WordPress, Squarespace ou qualquer plataforma em que não seja fácil controlar o CSS, esta é a opção mais segura.

Problemas comuns e soluções

O flipbook não carrega

• Confira se a URL está correta
• Verifique se o flipbook está publicado (e não em rascunho)
• Confirme que seu site permite iFrames

Tamanho errado ou conteúdo cortado

• Ajuste os valores de largura e altura
• Use a técnica do contêiner responsivo
• Teste em dispositivos móveis reais, não apenas redimensionando o navegador

Barras de rolagem aparecendo

• Adicione frameborder="0" e scrolling="no" ao iFrame
• Confira se o contêiner não está restringindo o tamanho

Não carrega no celular

• Alguns navegadores móveis restringem iFrames em certos contextos
• Experimente a incorporação com JavaScript
• Ofereça um link direto como alternativa

O erro mais comum? Incorporar, conferir no notebook e considerar o trabalho concluído. Pegue o celular. Abra a página. Se o flipbook estiver errado ali, seus visitantes verão a mesma coisa. A incorporação com JavaScript resolve a maior parte disso automaticamente, mas, mesmo assim, uma checagem de dez segundos no telefone evita o problema silencioso de metade do público encontrar uma página quebrada.