Criou um app com Lovable ou Bolt e precisa de um folheto, catálogo ou relatório que os leitores possam folhear de verdade? Este tutorial mostra os prompts exatos, o componente React e as configurações do iframe para incorporar um flipbook sem quebrar seu layout nem a visualização no celular.
Você criou um app funcional em uma tarde, e agora precisa mostrar dentro dele um folheto, um catálogo de produtos ou um relatório de 60 páginas. Um simples link de PDF fica desajeitado, e um visualizador de PDF puro parece ultrapassado. A solução mais limpa é um flipbook com efeito de virar página, e a forma mais rápida de criar um é com o Flipbooks AI. Depois, basta incorporá-lo ao seu projeto no Lovable ou no Bolt com algumas linhas de código ou um único prompt no chat.
Este tutorial percorre todo o processo: converter o PDF, pegar o código de incorporação, pedir ao Lovable ou ao Bolt que o posicione e resolver os problemas habituais de iframe. Todos os trechos de código estão prontos para copiar.
Os construtores de apps com IA geram componentes React rapidamente, mas não geram visualizadores de documentos bem acabados. Quando você pede "um visualizador de PDF", muitas vezes recebe apenas uma simples tag <embed> que quebra no celular, esconde a navegação entre páginas e não oferece estatísticas.
Um flipbook resolve três problemas de uma vez:
Os fundadores que usam esses construtores costumam precisar de documentos em alguns pontos específicos:
💡 Dica de profissional: Se o documento muda com frequência, como uma tabela de preços, um flipbook hospedado é melhor do que incluir um PDF no seu repositório. Você evita o commit, o build e o problema de cache.
As duas ferramentas geram projetos em React e Vite, então o método de incorporação é quase idêntico. As diferenças estão em como você orienta a IA e em onde edita os arquivos.
| Funcionalidade | Lovable | Bolt |
|---|---|---|
| Tecnologias geradas | React, Vite, Tailwind, Supabase | React ou outros frameworks, Vite, Tailwind |
| Melhor forma de incorporar | Prompt no chat ou edição na visualização de código | Prompt no chat ou edição na árvore de arquivos |
| Pré-visualização integrada | Painel de pré-visualização integrado | Pré-visualização do WebContainer |
| Suporte a iframe | Suporte total | Suporte total |
| Destino de publicação | Hospedagem do Lovable ou domínio próprio | Netlify e outros |
| Precisa de etapa de build | Sem etapa manual | Sem etapa manual |
Resumindo: você não precisa de nenhum plugin especial em nenhuma das plataformas. Uma iframe padrão funciona nas duas.
Antes de mexer no seu app, crie o próprio flipbook. Isso leva cerca de dois minutos, e o Conversor de PDF para flipbook faz o trabalho pesado.
Dar o estilo agora economiza edições depois. No editor, você pode ajustar:
✅ Boa prática: Use no fundo do flipbook a mesma cor de fundo da seção do seu app. Uma caixa cinza que não combina dentro de uma página branca é o principal motivo para as incorporações parecerem coladas.
Defina quem pode ver o documento. Links públicos são adequados para materiais de marketing. Para relatórios de clientes, ative a proteção por senha, para que só quem tiver o código consiga abrir. Lembre-se de que a senha fica no flipbook, e não no seu app, então você não precisa criar autenticação extra para isso.
Abra o painel de compartilhamento do seu flipbook pronto e selecione a opção de incorporar. Você recebe um trecho de iframe parecido com este:
<iframe
src="https://flipbooksai.com/embed/YOUR-FLIPBOOK-ID"
width="100%"
height="600"
allowfullscreen
style="border: none;"
></iframe>
Se quiser conhecer melhor as opções, a página Incorporar flipbook em site lista todos os métodos de compartilhamento, incluindo links diretos e códigos QR.
O React não aceita todos os atributos HTML como estão escritos. Se você colar o trecho manualmente em um componente, troque estes:
| Versão HTML | Versão React (JSX) |
|---|---|
allowfullscreen | allowFullScreen |
style="border: none;" | style={{ border: "none" }} |
frameborder="0" | frameBorder={0} |
class="..." | className="..." |
Se pular essa conversão, seu app pode mostrar um aviso no console ou um quadro em branco. Se você pedir ao construtor de IA que faça o trabalho, ele mesmo faz a conversão.
No Lovable, você tem dois caminhos: descrever o resultado no chat ou colar o código você mesmo.
Abra o chat e envie algo como isto:
Add a section titled "Our Catalog" to the home page. Inside it, embed this
iframe responsive at full width with a 16:10 aspect ratio, no border,
rounded corners, allow fullscreen, and lazy loading:
<iframe src="https://flipbooksai.com/embed/YOUR-FLIPBOOK-ID"></iframe>
O Lovable geralmente cria um novo componente e o importa para sua página. Revise a pré-visualização e depois publique.
Para ter mais controle, crie um componente reutilizável. Esta versão recebe o ID do flipbook como prop, para que você possa posicionar vários documentos pelo app:
type FlipbookEmbedProps = {
id: string;
title: string;
};
export default function FlipbookEmbed({ id, title }: FlipbookEmbedProps) {
return (
<div className="w-full overflow-hidden rounded-xl shadow-lg">
<div className="relative w-full" style={{ paddingTop: "62.5%" }}>
<iframe
src={`https://flipbooksai.com/embed/${id}`}
title={title}
loading="lazy"
allowFullScreen
className="absolute inset-0 h-full w-full"
style={{ border: "none" }}
/>
</div>
</div>
);
}
Depois, use-o onde quiser:
<FlipbookEmbed id="YOUR-FLIPBOOK-ID" title="Spring product catalog" />
O truque do espaçamento interno (padding) mantém a proporção de 16:10 em qualquer largura, o que impede o iframe de encolher em telas estreitas.
O Bolt segue o mesmo padrão. Abra o chat e descreva o que você quer, ou abra a árvore de arquivos, crie src/components/FlipbookEmbed.tsx e cole o componente acima.
Create a FlipbookEmbed component that takes an id and title prop and renders
an iframe pointing to https://flipbooksai.com/embed/{id}. Make it responsive
with a 16:10 aspect ratio, rounded corners, lazy loading, and fullscreen
support. Use it on the Resources page.
O Bolt vai configurar a importação e mostrar o resultado na pré-visualização. Se a pré-visualização mostrar uma caixa em branco, não se desespere. Muitas vezes é um problema do ambiente de pré-visualização, então abra a URL publicada antes de presumir que o código está errado.
Para uma biblioteca de recursos, guarde seus documentos em um array e percorra-o:
const documents = [
{ id: "abc123", title: "Product catalog" },
{ id: "def456", title: "Annual report" },
{ id: "ghi789", title: "Onboarding manual" },
];
export default function Library() {
return (
<div className="grid gap-8 md:grid-cols-2">
{documents.map((doc) => (
<FlipbookEmbed key={doc.id} id={doc.id} title={doc.title} />
))}
</div>
);
}
💡 Dica de profissional: Peça ao construtor que carregue esses IDs da tabela do seu banco de dados. Quando você adicionar uma linha, um novo flipbook aparece sem nenhuma mudança no código.
Mesmo um trecho limpo pode se comportar mal. Aqui estão os problemas que os leitores mais encontram e a correção mais rápida para cada um.
| Problema | Causa provável | Correção |
|---|---|---|
| Quadro vazio | ID do flipbook errado ou link privado | Confira o ID e as configurações de compartilhamento |
| Quadro baixo demais | Altura fixa em pixels | Use o contêiner com proporção definida |
| Sem botão de tela cheia | Atributo ausente | Adicione allowFullScreen |
| Aviso no console do React | Atributos HTML no JSX | Converta para props em camelCase |
| Página salta durante o carregamento | Nenhum espaço reservado | Envolva em um contêiner com proporção |
| Bloqueado pelo navegador | Conteúdo misto (http e https) | Use sempre a URL https |
Mais da metade dos visitantes vai abrir seu app no celular. Um flipbook já é responsivo por si só, mas o contêiner ainda faz diferença:
width="100%" e nunca uma largura fixa em pixels.⚠️ Atenção: Não coloque o iframe dentro de um contêiner com
overflow: hiddene altura fixa. Isso corta a barra de ferramentas e faz o documento parecer quebrado.
Um visualizador incorporado é leve, mas vários numa mesma página somam peso. Adicione loading="lazy" para que os quadros só carreguem quando entrarem na área visível da tela. Em uma página com muitos documentos, mostre primeiro uma miniatura da capa e carregue o iframe depois de um clique. Sua pontuação no Lighthouse vai agradecer.
Veja como diferentes fundadores usam essa configuração.
| Caso de uso | Número de páginas ideal | Ferramenta sugerida |
|---|---|---|
| Catálogo de produtos | 20 a 80 | Catálogo de produtos |
| Apresentação de vendas | 10 a 25 | Apresentação de vendas |
| Relatório anual | 30 a 100 | Criador de relatório anual interativo |
| Manual de treinamento | 15 a 60 | Flipbook de manual de treinamento |
| Portfólio digital | 10 a 40 | Criador de portfólio digital |
Depois que a incorporação funciona, algumas funcionalidades da plataforma tornam o flipbook mais útil dentro de um app.
title descritivo para acessibilidade.Agora você tem tudo o que precisa: um flipbook convertido, um componente React reutilizável e prompts que funcionam nos dois construtores. O trabalho inteiro leva menos de quinze minutos, e o resultado tem um aspecto muito mais profissional do que um link de download.
Pronto para criar o seu? Comece grátis no Flipbooks AI, explore todas as ferramentas de flipbook para encontrar o modelo certo e compare os planos e preços quando quiser estatísticas e captação de contatos. Quando estiver pronto para publicar, escolha seu plano e vá para o ar.
Escolha seu idioma
