Passo a passo para usar o elemento Code Embed do Webflow e colocar um flipbook em qualquer página. Veja o código iframe, as regras de tamanho, as configurações responsivas, os erros mais comuns e uma comparação entre os métodos de incorporação para que seu PDF fique nítido em todas as telas.
Você tem um PDF bem acabado, um site no Webflow exatamente do jeito que você quer e uma lacuna incômoda entre os dois. Um link de download parece sem graça, e um monte de imagens estáticas parece desajeitado. A forma mais limpa de fechar essa lacuna é o elemento Code Embed, que permite encaixar um flipbook com efeito de virar página em qualquer página do Webflow com algumas linhas de HTML. Crie o flipbook com o Flipbooks AI, copie o código de incorporação, cole e publique. Essa é a ideia toda, e o restante deste artigo percorre cada detalhe para que nada te surpreenda no dia do lançamento.
O Webflow é excelente em layout, interações e conteúdo de CMS. O que ele não faz nativamente é exibir um documento de várias páginas do jeito que o leitor espera: com viradas de página, zoom, sumário e botão de compartilhamento. Um flipbook cumpre esse papel.
Um visitante chega à sua página, vê uma publicação com cara de livro e folheia com um clique, um deslize ou uma tecla de seta. Não há download, nem plugin de visualizador de PDF, nem espera para um arquivo de 40 MB terminar de carregar. Para catálogos, lookbooks, relatórios anuais e cardápios, isso se parece muito mais com o original impresso.
O documento continua dentro do seu design. Seu cabeçalho, seu rodapé e seus scripts de análise continuam ao redor dele. E como o flipbook fica em uma URL hospedada própria, você pode atualizar o PDF depois sem voltar ao Webflow Designer.
💡 Dica de ouro: Trate o flipbook como qualquer outra seção da página. Dê a ele um título, um parágrafo curto de apresentação e uma chamada para ação logo abaixo. Uma incorporação solta, sem contexto, é ignorada com mais frequência do que você imagina.
| Caso de uso | Página típica | Por que um flipbook ajuda |
|---|---|---|
| Catálogo de produtos | Página de loja ou de recursos | Visitantes navegam sem sair do site |
| Cardápio de restaurante | Página de cardápio | Pensado para celular, fácil de atualizar a cada temporada |
| Portfólio | Página de trabalhos ou de estudos de caso | Mantém o ritmo visual do layout original |
| Relatório anual | Página para investidores ou sobre a empresa | Legível em qualquer dispositivo, sem necessidade de download |
| Lookbook | Página de destino de coleção | Dá a sensação de virar páginas de verdade |
O elemento Code Embed é um componente do Webflow encontrado no painel Add, em Components. Ele aceita HTML, CSS e JavaScript puros e exibe o resultado na página publicada. No Designer, normalmente você vê um marcador de posição, então para visualizar é preciso publicar ou usar o modo de visualização.
As pessoas confundem os dois. O elemento Code Embed fica em um ponto exato do seu layout. O Código personalizado, nas configurações da página ou do site, injeta scripts no head ou antes da tag de fechamento do body, e não tem um lugar visível. Um flipbook é conteúdo visível, então o que você quer é o elemento.
O Webflow limita cada Code Embed a 50.000 caracteres. Um iframe tem cerca de 300 caracteres, então o limite nunca faz diferença aqui. Ele só se torna relevante se você tentar colar um documento inteiro em linha, o que não deve fazer.
O Code Embed está disponível em todos os planos de site do Webflow, inclusive no plano gratuito Starter para testes. Publicar em um domínio próprio exige um plano de site pago, mas a incorporação funciona da mesma forma no subdomínio de teste, então você pode testar antes de se comprometer.
Antes de abrir o Webflow, produza o próprio flipbook. Isso leva alguns minutos, e a qualidade do arquivo de origem importa mais do que qualquer configuração de incorporação.
Exporte seu PDF no tamanho final da página, com imagens em uma resolução adequada. Uma exportação de 150 dpi basta para telas e mantém os tempos de carregamento curtos. Verifique se as fontes estão incorporadas e se nenhuma página tem margem indevida.
✅ Melhor prática: Combine a cor de fundo do flipbook com a cor de fundo da seção no Webflow. Assim o visualizador se integra à página, em vez de parecer uma caixa colocada por cima.
Muitos conversores estampam um logo no canto de cada página. O Flipbooks AI nunca adiciona marca d’água, o que faz muita diferença quando o flipbook fica em um site de cliente ou em uma vitrine com marca própria. Veja os planos para entender como flipbooks ilimitados e proteção por senha se encaixam em cada faixa.
Aqui está o processo completo dentro do Webflow. Mantenha o Designer aberto em uma aba e o painel de compartilhamento do seu flipbook em outra.
Cole seu código de incorporação. Um iframe típico tem esta aparência:
<iframe
src="https://your-flipbook-url-here"
width="100%"
height="700"
frameborder="0"
allowfullscreen
loading="lazy"
title="Product catalog flipbook">
</iframe>
Substitua o src pelo link exato copiado do seu painel de compartilhamento. Clique em Save & Close.
Publique primeiro no seu domínio de teste. Abra a página em um notebook e depois em um celular. Navegue por algumas páginas, teste o botão de tela cheia e confira se o som toca, caso tenha adicionado áudio.
⚠️ Atenção: Se a incorporação não mostrar nada depois de publicar, a causa quase sempre é um erro de digitação no
srcou um iframe bloqueado por uma configuração de segurança de conteúdo. Verifique o console do navegador antes de presumir que o problema é do Webflow.
Um iframe não sabe quanto espaço a página ainda tem. Você precisa informar, e precisa informar de forma diferente em cada ponto de quebra.
Uma página dupla de flipbook é mais larga do que alta, então uma altura de 600 a 750 pixels funciona bem no computador. Acima disso, você cria muito espaço vazio acima e abaixo das páginas.
Use sempre width="100%" e deixe o contêiner pai definir a largura real. Defina para o contêiner uma largura máxima, como 1100 pixels, para um texto legível em monitores grandes.
Para um flipbook que escala com limpeza, envolva o iframe em uma div que mantém a proporção:
<div style="position:relative;padding-top:56.25%;">
<iframe
src="https://your-flipbook-url-here"
style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"
allowfullscreen
title="Flipbook">
</iframe>
</div>
O padding-top de 56,25% gera uma caixa 16:9 que diminui suavemente em tablets e celulares. Para documentos em retrato, como cardápios, experimente 75% ou até 100% no lugar.
| Ponto de quebra | Largura do contêiner | Altura do iframe | Observações |
|---|---|---|---|
| Computador (1280+) | 1100 px máximo | 700 px | Mostra a página dupla |
| Tablet (768 a 991) | 90% | 600 px | A página dupla ainda é legível |
| Celular na horizontal | 100% | 450 px | A visualização de página única costuma ser ativada |
| Celular na vertical | 100% | 420 px | Adicione uma legenda curta acima |
💡 Se você usar o contêiner de proporção, não precisa de uma altura separada para cada ponto de quebra. A caixa se ajusta sozinha.
A rota do Code Embed não é a única forma de colocar um documento em uma página do Webflow. Veja como ela se compara com as alternativas comuns.
| Método | Efeito de virar página | Pensado para celular | Editar sem republicar | Estatísticas |
|---|---|---|---|---|
| Flipbook via Code Embed | Sim | Sim | Sim | Sim (plano Professional) |
| Link direto para o PDF | Não | Depende do dispositivo | Sim | Limitadas |
| iframe de visualizador de PDF | Não | Misto | Sim | Limitadas |
| Imagens em um slider | Parcial | Sim | Não | Limitadas |
| Texto formatado com imagens | Não | Sim | Não | Nenhuma |
Se o documento é uma fatura de uma página ou uma ficha técnica que as pessoas imprimem, um link simples serve. Não complique demais.
Qualquer coisa com mais de algumas páginas, qualquer coisa visual e qualquer coisa que você queira acompanhar. Um catálogo de 60 páginas em um slider é difícil de montar e difícil de manter. Um flipbook troca pelo novo PDF e a página já está atualizada.
Ver o padrão em contexto facilita o planejamento da configuração.
Uma pequena loja de moda publica um lookbook por temporada. Usando o Criador de flipbook de lookbook, a dona envia o novo PDF a cada temporada. A página do Webflow nunca muda, porque a incorporação aponta para o mesmo link do flipbook. Atualizar leva minutos, não uma sessão de design.
Uma cafeteria mantém o cardápio em um flipbook criado com o Criador de flipbook de cardápio de restaurante. Os preços mudam todo mês. A equipe troca o arquivo, e o cardápio do site fica correto antes do horário de pico do almoço.
Um freelancer cria sites de clientes no Webflow e usa o Criador de flipbook de relatório para os resumos trimestrais. Cada cliente recebe uma página privada com um flipbook protegido por senha. O freelancer envia um link, não um anexo.
Com a ferramenta Portfólio de fotografia, um fotógrafo publica um livro selecionado com os trabalhos mais recentes. As imagens grandes continuam nítidas, e a incorporação fica abaixo de uma biografia curta na página Sobre.
A maioria dos problemas é pequena e previsível. Percorra esta lista antes de começar a reescrever qualquer coisa.
src abre sozinha em uma nova aba do navegador.Aumente a altura ou troque para o contêiner de proporção. Páginas cortadas quase sempre significam que o iframe é menor do que o visualizador precisa.
Os navegadores bloqueiam a reprodução automática com som. O visitante precisa clicar uma vez antes. Adicione uma linha curta como "Clique em play para ouvir o áudio" perto da incorporação.
Adicione loading="lazy" ao iframe para que ele só carregue quando o visitante rolar a página até perto dele. Coloque o flipbook abaixo da dobra sempre que possível e mantenha leve a primeira tela da página.
| Sintoma | Causa provável | Solução |
|---|---|---|
| Nada aparece | Erro de digitação em src | Copie o link de novo no painel de compartilhamento |
| Caixa cinza no Designer | Comportamento normal | Publique e veja no ar |
| A página rola dentro da caixa | Altura muito pequena | Aumente o valor da altura |
| Botão de tela cheia ausente | allowfullscreen removido | Adicione o atributo de volta |
| Primeira renderização lenta | A incorporação carrega imediatamente | Adicione loading="lazy" |
Depois que o básico funciona, pequenos toques fazem a seção parecer intencional.
Escreva um título, uma ou duas frases sobre o que há dentro e um botão para quem prefere baixar o arquivo. Downloads offline estão disponíveis como opção, então você pode oferecer os dois caminhos.
Se você quer saber quantas pessoas abrem o flipbook e quais páginas elas leem, o plano Professional inclui estatísticas e geração de contatos. Compare as opções na página de preços. Para um olhar mais detalhado sobre essa configuração exata, veja a ferramenta Incorporar flipbook no site.
Materiais sensíveis, como tabelas de preços para revendedores, podem ficar protegidos por senha. A página do Webflow continua pública, e o próprio flipbook pede a senha antes de abrir.
✅ Checklist final:
srccorreto,width="100%", uma altura adequada,allowfullscreen,loading="lazy", umtitledescritivo e um teste em um celular de verdade.
Agora você tem tudo o que precisa: um PDF limpo, um flipbook, um iframe e regras de tamanho que se sustentam em todos os pontos de quebra. O processo inteiro leva cerca de quinze minutos na primeira vez e alguns minutos para cada atualização depois.
Pronto para criar um? Comece grátis no Flipbooks AI e depois explore todas as ferramentas e modelos disponíveis para encontrar o layout certo para o seu conteúdo. Quando quiser estatísticas, senhas e flipbooks ilimitados, compare os planos de preços e escolha o que cabe no seu site.
Escolha seu idioma
