Fazer seu flipbook aparecer no seu site deveria ser simples, mas iframes quebrados, conflitos de políticas de segurança e restrições específicas de cada plataforma podem travar tudo. Este artigo detalha cada causa e traz soluções práticas para WordPress, Wix, Squarespace e outras plataformas.
Você publicou seu flipbook, copiou o código de incorporação, colou no seu site e nada apareceu. Sem carregamento, sem erro visível, apenas um retângulo em branco onde deveria estar seu documento interativo. Esta é uma das frustrações mais comuns na publicação digital, e quase sempre tem uma causa que pode ser corrigida. Seja no WordPress, no Wix, no Squarespace ou em um site feito sob medida, o problema se resume a alguns conflitos técnicos entre a forma como seu site lida com conteúdo externo e a forma como as incorporações de flipbook funcionam.
O Flipbooks AI usa a incorporação padrão por iframe, o mesmo método do qual dependem o YouTube, o Google Maps e praticamente todas as outras plataformas incorporáveis. Quando esse iframe não é exibido, o problema está na configuração do seu site, não no flipbook em si. Este artigo percorre cada causa, desde os cabeçalhos de segurança até as particularidades de cada plataforma e os códigos quebrados, e mostra os passos exatos para corrigir cada uma.
Há várias categorias distintas de falha quando uma incorporação de flipbook para de funcionar. A maioria dos desenvolvedores e criadores de conteúdo presume que o problema está na plataforma de flipbook, mas raramente é isso. A origem do bloqueio quase sempre está do lado do site que recebe o conteúdo.
Alguns ambientes de hospedagem, principalmente planos de hospedagem compartilhada e certos hosts gerenciados de WordPress, aplicam regras no nível do servidor que restringem como os iframes são carregados. Essas regras existem por motivos legítimos de segurança, mas podem impedir, sem querer, que incorporações válidas de terceiros sejam exibidas.
O principal culpado no nível do servidor é o cabeçalho de resposta X-Frame-Options. Se seu servidor envia X-Frame-Options: SAMEORIGIN ou X-Frame-Options: DENY, qualquer iframe que aponte para um domínio externo é bloqueado silenciosamente pelo navegador. A página carrega, mas o iframe aparece como uma caixa vazia.
Se seu site roda em HTTPS, os navegadores vão recusar carregar qualquer conteúdo incorporado servido por HTTP simples. Isso se chama bloqueio de conteúdo misto (mixed content), e os navegadores aplicam essa regra sem exceção.
Quando uma plataforma de flipbook serve seu conteúdo em HTTPS, mas o src do seu iframe usa, por engano, uma URL HTTP, a incorporação falha silenciosamente. Sempre confirme se o seu site e a URL de origem da incorporação usam o mesmo protocolo.
A Content Security Policy (CSP) é um recurso de segurança do navegador que os donos de sites configuram para especificar quais fontes externas podem carregar conteúdo. Se o seu site tem um cabeçalho CSP que não inclui o domínio da plataforma de flipbook, o navegador vai recusar carregar o iframe, muitas vezes sem nenhum erro visível para quem está navegando.
Erros de CSP aparecem no console de desenvolvedor do navegador com mensagens como: Refused to frame 'https://[platform]' because it violates the following Content Security Policy directive.
⚠️ Bloqueios de CSP são falhas silenciosas do ponto de vista do usuário. Sempre abra primeiro o console do navegador antes de presumir que o código de incorporação está quebrado.
Mesmo quando as configurações de segurança do seu site estão perfeitamente ajustadas, um código de incorporação malformado ou incorreto ainda vai resultar em um espaço em branco. Isso é mais comum do que a maioria das pessoas imagina.
A maioria das plataformas de flipbook oferece várias opções de compartilhamento: um link direto, uma incorporação em pop-up, uma incorporação em linha e, às vezes, uma incorporação de página inteira. Cada uma funciona de um jeito diferente no seu HTML. Copiar um link direto e colá-lo onde deveria ir um código de iframe é um dos erros mais comuns entre quem está publicando pela primeira vez.
Um código de incorporação em iframe tem esta aparência:
<iframe src="https://flipbooksai.com/view/your-flipbook-id" width="100%" height="600" frameborder="0" allowfullscreen></iframe>
Um link direto não se parece nada com isso, e colocá-lo cru no conteúdo da página não vai gerar uma incorporação em nenhuma circunstância.
Erros de copiar e colar acontecem com mais frequência do que a maioria das pessoas admite. Quando você copia um código de incorporação e cola em um editor visual de CMS, o editor pode remover tags HTML, converter aspas retas em aspas curvas (tipográficas) ou inserir caracteres invisíveis. Qualquer uma dessas mudanças quebra o iframe.
| Atributo | Finalidade | O que quebra sem ele |
|---|---|---|
src | Aponta para a URL do flipbook | Nada é carregado |
width | Define o tamanho horizontal | O iframe colapsa para 0px de largura |
height | Define o tamanho vertical | O iframe colapsa para uma altura invisível |
frameborder="0" | Remove a borda padrão | Aparece uma borda feia ao redor da incorporação |
allowfullscreen | Ativa o modo tela cheia | O botão de tela cheia não faz nada |
Sempre cole os códigos de incorporação no modo HTML ou de código-fonte do seu CMS, nunca no editor de texto visual.
💡 Se o seu CMS converte aspas retas em aspas curvas, o atributo src do seu iframe vai quebrar. Use uma colagem de texto simples (Ctrl+Shift+V na maioria dos sistemas) ou o elemento de bloco de código dedicado do seu CMS.
Cada criador de sites lida com incorporações externas de um jeito. O que funciona em um site HTML puro pode falhar em uma plataforma gerenciada. Veja o que você precisa saber sobre os três cenários mais comuns.
O próprio WordPress não bloqueia iframes, mas muitos plugins de segurança do WordPress bloqueiam. Ferramentas como Wordfence, iThemes Security e soluções semelhantes podem aplicar cabeçalhos de Content Security Policy ou modificar cabeçalhos de resposta HTTP de um jeito que impede o carregamento de iframes externos, muitas vezes sem nenhum aviso no painel do WordPress.
Além disso, o editor de blocos do WordPress (Gutenberg) não permite HTML cru em blocos comuns de parágrafo ou de texto. Você precisa usar um bloco "HTML personalizado" para inserir o código do iframe corretamente. O Editor Clássico é mais permissivo, mas alternar entre o modo visual e o modo texto pode remover ou modificar tags HTML se você não tomar cuidado durante a edição.
O Wix restringe a inserção direta de iframes na maioria dos tipos de widget e oferece um elemento dedicado "Incorporar HTML" especificamente para conteúdo de terceiros. Se você colar um iframe em uma caixa de texto ou em uma seção de conteúdo comum, o Wix vai removê-lo silenciosamente, sem nenhuma mensagem de erro.
O caminho correto no Wix: adicione um elemento, escolha "Código de incorporação", selecione "Incorporar HTML" e cole ali o seu código de iframe. Esse é o único caminho compatível para incorporações de terceiros na plataforma Wix.
⚠️ O plano gratuito do Wix tem restrições adicionais para incorporações de HTML personalizado. Se o elemento Incorporar HTML aparecer em cinza ou indisponível, seu plano pode não oferecer suporte a código personalizado. Verifique seu nível de assinatura antes de continuar a solução de problemas.
O Squarespace lida com incorporações externas pelos seus elementos "Bloco de incorporação" ou "Bloco de código". O Bloco de incorporação foi feito para serviços específicos já aprovados e não aceita código de iframe puro. O Bloco de código é onde o HTML do seu iframe precisa ir.
No Squarespace 7.1: adicione um bloco, selecione "Código", cole o HTML do seu iframe e confirme que o bloco não está no modo "Exibir fonte", que mostraria o HTML cru como texto na página em vez de renderizar o flipbook.
Aqui está uma tabela de referência rápida com as plataformas mais comuns e as correções específicas de incorporação para cada uma:
| Plataforma | Problema comum | Correção |
|---|---|---|
| WordPress | Plugin de segurança bloqueando iframes | Adicione uma exceção de CSP ou desative o plugin para testar |
| WordPress | Colagem no editor visual | Use o bloco HTML personalizado |
| Wix | Colagem em um widget de texto | Use o elemento Incorporar HTML do menu Adicionar |
| Squarespace | Bloco de incorporação recusando o iframe | Troque para o Bloco de código com o modo HTML selecionado |
| Shopify | Restrições no nível do tema | Adicione o iframe diretamente no modelo Liquid de uma seção |
| Webflow | Restrições de componentes | Use um elemento HTML Embed no Designer |
| HTML personalizado | Atributos ausentes ou quebrados | Verifique se a tag iframe está completa, com todos os atributos obrigatórios |
| Ghost | Parser de Markdown removendo tags | Use um card HTML em vez de um card Markdown |
As falhas de incorporação tecnicamente mais complexas vêm de cabeçalhos de segurança aplicados pelo seu servidor web ou pela sua CDN. Eles não são controlados pelo seu CMS, e sim pela infraestrutura de hospedagem, e por isso podem ser tão frustrantes de localizar.
| Tipo de erro | Causa | Correção |
|---|---|---|
X-Frame-Options: DENY | O servidor bloqueia todo conteúdo de iframe | Remova o cabeçalho ou coloque o domínio do flipbook na lista de permitidos |
X-Frame-Options: SAMEORIGIN | O servidor permite apenas frames da mesma origem | Remova ou atualize a configuração do cabeçalho |
Violação de CSP frame-src | Domínio do flipbook fora da lista de permitidos | Adicione o domínio do flipbook à diretiva frame-src |
| Bloqueio de conteúdo misto | Incompatibilidade HTTP/HTTPS entre a página e a incorporação | Garanta que a URL da incorporação sempre use HTTPS |
| 403 Forbidden ao carregar o iframe | O flipbook está em rascunho ou definido como privado | Publique o flipbook e defina a visibilidade como pública |
✅ Se você está em um host gerenciado como WP Engine, Kinsta ou Cloudways, entre em contato com a equipe de suporte para pedir ajuda na alteração dos cabeçalhos de resposta HTTP. É a solução mais rápida para bloqueios de incorporação no nível de segurança.
Para descobrir qual cabeçalho está bloqueando sua incorporação:
| Erro | O que acontece | O que fazer no lugar |
|---|---|---|
| Colar o iframe no editor visual | As tags são removidas ou alteradas | Use apenas o bloco de HTML ou de código |
| Usar HTTP na URL do src | O navegador bloqueia o conteúdo misto | Use sempre URLs HTTPS |
| Largura fixa em pixels no celular | A incorporação transborda em telas pequenas | Defina width="100%" |
| Nenhuma altura especificada | O iframe colapsa para uma altura invisível | Adicione height="600" ou equivalente |
Omitir allowfullscreen | O botão de tela cheia não funciona | Inclua sempre este atributo |
| Copiar um link direto | Nada é incorporado na página | Use especificamente o código do iframe |
| Colar no elemento errado do CMS | Aparece como texto cru em vez do flipbook | Use o elemento de código da plataforma |
💡 Teste rápido: cole o código de incorporação em um arquivo
.htmlsimples, abra-o localmente em qualquer navegador e veja se o flipbook carrega. Se carregar, a URL do flipbook é válida e a configuração do seu CMS é a origem do problema.
O Flipbooks AI foi feito para que a incorporação funcione bem em praticamente todas as plataformas de sites modernas. Este é o processo correto, do envio até uma incorporação publicada e funcionando no seu site.
Passo 1: Envie seu PDF
Acesse o Flipbooks AI e entre na sua conta ou crie uma. Envie seu PDF usando a área de arrastar e soltar. A plataforma converte o arquivo em um flipbook interativo em poucos segundos, com animações de virada de página e um layout totalmente responsivo para celular.
Passo 2: Personalize seu flipbook
Use o editor para definir as cores da sua marca, adicionar seu logotipo, configurar as transições de página e ajustar os controles de leitura. Você pode adicionar senha para documentos privados, e todo flipbook já é responsivo para celular, sem nenhuma configuração extra.
Passo 3: Obtenha o código de incorporação
Abra as opções de compartilhamento do seu flipbook e selecione "Incorporar no site". Copie o código de incorporação em iframe do painel. A ferramenta de incorporação do Flipbooks AI fornece uma tag iframe pré-formatada que inclui a URL HTTPS correta, as dimensões adequadas e todos os atributos obrigatórios. Não é preciso nenhuma edição manual.
Passo 4: Cole no seu CMS corretamente
Use o elemento de bloco de HTML ou de código do seu site, seguindo os passos específicos de cada plataforma descritos acima. Nunca cole em um editor visual ou de texto rico. O código de incorporação está pronto para uso exatamente como foi fornecido.
Passo 5: Verifique no computador e no celular
Depois de publicar, abra a página em um navegador de computador e em um celular. Defina a largura do iframe como 100% para um dimensionamento responsivo em todos os tamanhos de tela. O flipbook ajusta automaticamente o layout para a navegação por toque no celular.
O que você recebe com toda incorporação:
Depois de aplicar uma correção, verifique-a de forma adequada, em vez de apenas recarregar a página uma vez e presumir que funcionou.
Abra o console do desenvolvedor (F12) na página com a sua incorporação depois da correção. Uma incorporação bem-sucedida não deve gerar nenhum erro em vermelho na aba Console. Se ainda aparecerem erros, leia-os com atenção. Um "403 Forbidden" na aba Rede significa que a própria URL do flipbook está retornando um erro, provavelmente um problema de visibilidade ou de autenticação. Um erro de CSP significa que a sua correção de cabeçalho não foi aplicada corretamente ou ainda não foi propagada.
Teste em pelo menos três navegadores: Chrome, Firefox e Safari. O Safari tem configurações de privacidade padrão mais rígidas, que podem afetar como determinados recursos de outros sites são carregados. Se a incorporação funciona no Chrome, mas não no Safari, o problema provavelmente está relacionado às restrições de cookies de terceiros ou às configurações de prevenção inteligente de rastreamento no dispositivo do usuário.
Sempre teste em um dispositivo móvel de verdade, e não apenas no modo de simulação responsiva do navegador. O emulador de dispositivos do Chrome é útil, mas não reproduz o Safari no iOS. Para resultados constantes no celular, use width="100%" no seu iframe e coloque-o dentro de um contêiner div com a propriedade max-width para controlar o tamanho máximo de exibição em telas grandes de computador.
Se você percorreu todas as correções acima e a incorporação continua sem aparecer, verifique estas possibilidades restantes antes de entrar em contato com o suporte.
Primeiro, confirme que o flipbook está publicado e com visibilidade pública. Um flipbook em modo de rascunho retorna 403 ou 404 quando o iframe tenta carregá-lo, o que parece idêntico a um iframe bloqueado visto de fora. É uma causa surpreendentemente comum de incorporações em branco persistentes.
Segundo, entre em contato com seu provedor de hospedagem e pergunte diretamente se o servidor aplica algum cabeçalho X-Frame-Options globalmente. Alguns hosts gerenciados fazem isso como padrão de segurança, e desativá-lo exige uma alteração de configuração no nível do servidor que você não consegue fazer de dentro do CMS.
Terceiro, se o seu site fica atrás de uma CDN, verifique as configurações de cabeçalhos de segurança da CDN de forma independente da sua hospedagem. A Cloudflare, por exemplo, permite adicionar ou modificar cabeçalhos de resposta em "Transform Rules" e "HTTP Response Headers" no painel. Essas configurações funcionam separadamente da configuração da hospedagem e podem sobrescrever o que o seu servidor envia.
Cada uma dessas falhas é um problema de configuração com uma correção documentada. Nenhuma delas é causada por uma limitação fundamental da tecnologia de incorporação de flipbooks. Siga os passos de diagnóstico em ordem: verifique o console do navegador, confira o próprio código de incorporação, revise o tratamento de HTML do seu CMS e, por fim, analise os cabeçalhos do servidor e da CDN. A solução está sempre em uma dessas camadas.
Pronto para criar e incorporar flipbooks que funcionam sem atrito? Comece grátis no Flipbooks AI. A ferramenta para incorporar flipbook em site gera um código de iframe limpo e testado, que você pode colar em qualquer CMS sem se preocupar com atributos quebrados ou parâmetros ausentes.
Explore todas as ferramentas de flipbook disponíveis para encontrar o formato certo para o seu conteúdo, de catálogos de produtos a e-books interativos e apresentações digitais. Compare os planos e preços para escolher o nível que atende às suas necessidades de publicação.
Escolha seu idioma
