Como incorporar uma publicação digital no seu próprio site

Publicar uma edição digital são duas decisões, não uma: como ela se lê e onde ela vive. A maioria das ferramentas responde à primeira com brilhantismo e decide a segunda em silêncio por você: o seu catálogo acaba numa página que não é sua, sob uma marca que não é a sua, diante de uma audiência que você não pode faturar.

Este guia trata da segunda decisão: colocar o leitor dentro do seu próprio site — e os poucos detalhes que separam um embed limpo de um que quebra no celular, é bloqueado pelo seu CMS ou retorna 404 numa terça-feira porque alguém renomeou um domínio.

Por que incorporar em vez de apenas publicar um link

Um link para uma plataforma de hospedagem é, sinceramente, mais fácil. Não custa nada e leva dez segundos. Incorporar custa uns dez minutos e devolve a você:

• A visita. O tráfego fica na sua URL, onde também vivem a sua navegação, o seu formulário de contato e os seus botões de produto. Um link manda os leitores para um lugar onde você não está.
• O contexto. Um embed pode ficar diretamente sob a descrição do produto a que pertence, entre dois artigos ou dentro da página de um projeto de cliente.
• A apresentação. Largura, altura, layout ao redor, se aparece acima ou abaixo da dobra.

Uma ressalva honesta sobre busca: o conteúdo dentro de um iframe não é tratado de forma confiável como conteúdo da sua página. Se você quer que os mecanismos de busca vejam substância, escreva um parágrafo de verdade e um sumário na própria página, e deixe o leitor incorporado carregar a experiência. Não incorpore uma publicação numa página em branco e espere ranqueamento.

Passo 1: ativar a incorporação para essa publicação

Incorporar costuma ser uma configuração por publicação, não por conta — e é assim mesmo que deve ser: você decide, edição por edição, o que pode aparecer no seu site.

No Flipable, é a chave Embed habilitado na página de detalhes do catálogo. Quando está desligada, a URL de embed desse catálogo retorna 404 em todos os lugares: exatamente o comportamento que você quer enquanto uma publicação está sob embargo ou foi aposentada.

A publicação também precisa ter terminado a conversão. Um catálogo ainda em processamento, ou que falhou, não será renderizado — você verá uma mensagem de aguardo em vez de um leitor.

Passo 2: colocar na lista de permissões o domínio que vai hospedá-lo

Antes de o código funcionar, o domínio precisa estar registrado. O Flipable mantém uma lista de permitidos por espaço de trabalho em Configurações → Domains & Embed → Domínios permitidos, e um iframe de qualquer domínio fora dela é recusado.

Duas coisas que vale entender sobre essa correspondência:

• Um domínio cobre todos os seus subdomínios. Adicionar example.com também permite www.example.com, shop.example.com e staging.example.com. Para a maioria dos sites, isso significa que é necessária exatamente uma entrada.
• A correspondência é pelo domínio raiz, não pela URL completa. blog.example.com e example.com são a mesma entrada; example.net é outra. Assim, um microsite de campanha em outra raiz precisa da sua própria entrada.

Os slots de domínio são limitados pelo plano: um no Free, Starter e Pro, dois no Growth, três no Business. Se você vai publicar em três ou mais domínios raiz sem relação entre si, planeje isso antes de assinar contratos com clientes — não depois.

Passo 3: copiar o código de embed e colar como HTML

A página de detalhes de cada catálogo entrega um snippet pronto assim que a incorporação está habilitada e existe um token:

<iframe src="https://flipable.co/embed/{TOKEN}/{CATALOG_ID}"
        width="100%" height="600" frameborder="0" allowfullscreen></iframe>

Cole-o em algo que aceite HTML cru, não em um campo de rich text:

• WordPress: um bloco HTML personalizado
• Webflow: um elemento Embed
• Shopify: uma seção Custom Liquid
• Squarespace: um bloco Code
• Site feito à mão: em qualquer lugar do corpo

Se o seu CMS oferece um modo de edição «visual» e outro «HTML», use o modo HTML. Os editores de rich text são a causa mais comum de embeds morrerem em silêncio: eles convertem alegremente aspas retas em tipográficas, e o navegador acaba lendo lixo.

Passo 4: corrigir a altura antes que alguém abra no celular

Este é o passo que é pulado — e é o que os leitores notam.

A página incorporada preenche a altura que você der. Um iframe com height="600" significa que o leitor vive dentro de uma janela de 600 pixels: confortável no desktop; no celular, vira uma caixa rolável dentro da sua página que já é rolável. Duas áreas de scroll competindo numa tela sensível ao toque é uma experiência genuinamente ruim; a gente culpa a publicação, não o contêiner.

Um padrão mais robusto:

<iframe src="https://flipable.co/embed/{TOKEN}/{CATALOG_ID}"
        title="Catálogo outono/inverno"
        style="width:100%;height:clamp(500px,75vh,900px);border:0"
        allowfullscreen></iframe>

• clamp() dá aos celulares uma janela utilizável, deixa o desktop crescer e evita que tablets recebam uma faixa atrofiada.
• frameborder está obsoleto; border:0 é como se faz esse trabalho hoje.
• Defina um title explícito. É o nome acessível do frame, e não custa nada.
• Para uma landing em tela cheia, height:100vh funciona — mas conte com um cabeçalho fixo, ou mude para 100dvh para que a barra do navegador móvel não coma a base do leitor.

Depois olhe num celular de verdade, no retrato e na paisagem, antes de mandar o link para alguém importante.

Passo 5: decidir onde ele carrega na página

Se a publicação é a razão de ser da página, coloque-a na primeira tela e não a carregue com lazy loading. Se ela apoia a página — uma ficha técnica dentro de uma descrição de produto longa — adicione loading="lazy" para que quem nunca rolar até lá nunca a baixe.

Uma consequência que vale conhecer: as visualizações são contadas quando o leitor realmente carrega. Um embed lazy abaixo da dobra mostrará menos visualizações que a própria página, porque uma parcela dos visitantes nunca chegou até ele. Não é um erro da contagem; é uma descrição de comportamento. Julgue o desempenho de um embed pela profundidade de rolagem da página em que ele vive.

O que realmente protege uma publicação

Três mecanismos — e vale saber exatamente até onde cada um vai:

• Uma URL impossível de adivinhar. O caminho de embed carrega um token no nível do espaço de trabalho. Ninguém consegue adivinhar o endereço de embed de um catálogo; uma URL é, na prática, um segredo — trate-a como tal e não a cole em fóruns públicos.
• Uma lista de domínios mais frame-ancestors. Só os hosts na lista de permissões podem enquadrar a publicação; o navegador fica sabendo por uma Content-Security-Policy construída a partir da sua própria lista de domínios permitidos, de modo que a incorporação não autorizada falha em vez de apenas parecer errada.
• Um interruptor de desligamento por catálogo. Desligar a incorporação quebra imediatamente todos os embeds dessa publicação, onde quer que estejam. Esse é o seu botão de emergência.

E agora o limite, dito com clareza: uma lista de permissões não é um paywall. Abrir a URL de embed diretamente numa aba do navegador, em vez de dentro de um iframe, é permitido — a verificação de domínio trata de quem pode enquadrar seu conteúdo, não de quem pode lê-lo. Se uma publicação está realmente atrás de uma assinatura, proteja com a sua própria autenticação a página que contém o embed. O trabalho da ferramenta termina em «quem pode enquadrar isto»; «quem pode ler isto» é trabalho do seu site.

Quando não funcionar, verifique nesta ordem

1. Incorporação desligada para esse catálogo. Sintoma: 404 no frame. A causa mais comum, de longe.
2. O domínio hospedeiro não está na lista de permissões. Releia o domínio raiz exato na barra de endereços do navegador, na página que faz a incorporação.
3. ID de catálogo errado ou token copiado de outro espaço de trabalho. São strings longas e opacas; colar o meio de uma é fácil.
4. Conversão ainda em andamento, ou falhou. Sintoma: uma mensagem de aguardo ou um banner de erro na página do catálogo.
5. O seu próprio site bloqueia frames. Um frame-src restritivo na sua Content-Security-Policy, ou um plugin de segurança fazendo o mesmo, vai bloquear iframe de terceiros — inclusive o seu.
6. Incompatibilidade HTTPS. Incorporar um leitor HTTPS numa página HTTP é permitido; é o inverso que faz os navegadores reclamarem. Conserte o certificado.
7. O CMS mutilou a marcação. Veja o código-fonte da página publicada e confira se os atributos continuam corretamente entre aspas.

Check-list pré-voo

• Incorporação habilitada para essa publicação específica
• Domínio raiz na lista de permissões (os subdomínios vêm de brinde)
• Snippet colado num bloco HTML, não num campo de rich text
• Atributo title definido no frame
• Altura testada num celular, no retrato e na paisagem
• Embeds abaixo da dobra com loading="lazy"
• A página contém texto real se você quer que seja indexada
• Analytics verificados no dia seguinte, não no trimestre seguinte

Experimente com uma publicação

A forma mais rápida de saber se incorporar combina com o seu site é passar um único PDF existente pelo processo — um catálogo, um domínio, uma página, verificados num celular. Essa é, de propósito, a forma do plano gratuito: uma publicação, 100 páginas por catálogo, um domínio de embed, com um pequeno selo «Powered by Flipable» no leitor. O selo é a nossa publicidade — é por isso que o plano é tão generoso. Se o selo for um problema nos seus trabalhos para clientes, isso é exatamente o que os planos pagos removem.