Como Incorporar um Flipbook no Squarespace

Adicionar um flipbook interativo ao seu site Squarespace transforma conteúdo PDF estático em uma experiência envolvente de virada de página para seus visitantes. Seja exibindo um catálogo de produtos, portfólio ou folheto empresarial, incorporar um flipbook FlipLink leva apenas alguns minutos quando você conhece a abordagem certa.

Este guia orienta você em cada etapa — desde copiar o código de embed no FlipLink até colá-lo no Squarespace e garantir que fique ótimo em qualquer tamanho de tela.

O Que Você Precisa Antes de Começar

Antes de incorporar um flipbook, certifique-se de ter o seguinte preparado:

• Um flipbook FlipLink publicado — Faça upload do seu PDF em go.fliplink.me e publique. Você precisará do código de embed ou link de compartilhamento do seu painel.
• Um plano Squarespace Business ou superior — Injeção de código e blocos de código personalizados exigem pelo menos o plano Business. Planos Personal e básico não suportam incorporação de HTML personalizado ou iframes.
• Acesso ao editor do seu site Squarespace — Você estará editando páginas diretamente no construtor de páginas do Squarespace.

Se você ainda não criou seu flipbook, confira nosso guia sobre opções de compartilhamento e distribuição para entender todas as formas de compartilhar seu flipbook quando estiver pronto.

Passo 1: Obtenha Seu Código de Embed do FlipLink

Assim que seu flipbook estiver publicado no FlipLink, obter o código de embed é simples:

1. Faça login no painel do FlipLink em go.fliplink.me.
2. Abra o flipbook que deseja incorporar.
3. Clique no botão Compartilhar.
4. Selecione a aba Embed.
5. Copie o código de embed iframe fornecido.

O código de embed se parece com isso:

<iframe
  src="https://go.fliplink.me/view/your-flipbook-id"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen>
</iframe>

Guarde esse código — você vai colá-lo no Squarespace no próximo passo.

Passo 2: Adicione um Bloco de Código no Squarespace

O Squarespace usa um editor baseado em blocos, e o Bloco de Código é onde você vai colar o código de embed do seu flipbook.

1. Abra a página onde deseja que o flipbook apareça.
2. Clique em Editar na página.
3. Passe o mouse sobre a seção onde quer posicionar o flipbook e clique no ponto de inserção (a linha com ícone de mais).
4. Selecione Código nas opções de bloco. Se não aparecer, procure por "Código" no seletor de blocos.
5. Cole o código de embed iframe do FlipLink no bloco de código.
6. Desmarque a opção "Exibir Fonte" — isso é essencial. Se Exibir Fonte estiver marcado, o Squarespace mostrará o HTML bruto como texto em vez de renderizar o flipbook.
7. Clique em Salvar e saia do editor para visualizar sua página.

Seu flipbook agora deve aparecer diretamente na página, com animações interativas de virada de página.

Passo 3: Torne o Flipbook Responsivo

O código de embed padrão funciona bem no desktop, mas você vai querer garantir que se ajuste corretamente em tablets e dispositivos móveis. Aqui está uma versão melhorada do código de embed com estilo responsivo:

<div style="position: relative; width: 100%; padding-bottom: 75%; overflow: hidden;">
  <iframe
    src="https://go.fliplink.me/view/your-flipbook-id"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    allowfullscreen>
  </iframe>
</div>

O padding-bottom: 75% cria um container com proporção 4:3. Ajuste esse valor com base nas dimensões do seu flipbook:

• Proporção 4:3 (paisagem): padding-bottom: 75%
• Proporção 16:9 (widescreen): padding-bottom: 56.25%
• Proporção 3:4 (retrato): padding-bottom: 133%
• Proporção 1:1 (quadrado): padding-bottom: 100%

Essa técnica é chamada de método "aspect ratio box". O iframe preenche seu container perfeitamente, e o container se adapta fluidamente à largura da página.

Passo 4: Configure a Lista de Domínios Permitidos

Se você habilitou a lista de domínios permitidos no seu flipbook por segurança, precisa adicionar seu domínio Squarespace à lista permitida. Caso contrário, o embed será bloqueado.

1. No painel do FlipLink, abra as configurações do flipbook.
2. Navegue até a seção Lista de Domínios Permitidos.
3. Adicione seu domínio Squarespace (ex.: www.seudominio.com ou seudominio.squarespace.com).
4. Salve as configurações.

A lista de domínios permitidos é opcional, mas recomendada se você quer impedir que outros incorporem seu flipbook em sites não autorizados. Isso garante que seu conteúdo apareça apenas onde você deseja.

Usando Injeção de Código do Squarespace (Site Inteiro)

Se você quer que um flipbook apareça em todas as páginas — por exemplo, em uma área de rodapé ou cabeçalho — pode usar o recurso de Injeção de Código do Squarespace em vez de blocos de código individuais.

1. Vá para Configurações → Avançado → Injeção de Código.
2. Cole o código de embed no campo Rodapé (ou Cabeçalho, dependendo do posicionamento).
3. Envolva em um div container com estilo apropriado para controlar a posição.
4. Clique em Salvar.

Essa abordagem é útil para banners em todo o site ou widgets persistentes de flipbook, embora para a maioria dos casos, um bloco de código em uma página específica seja a melhor escolha.

Abordagens Alternativas

Nem toda situação exige um embed iframe completo. Aqui estão duas alternativas mais simples que funcionam em qualquer plano Squarespace, incluindo o Personal:

Bloco de Link com Thumbnail

Em vez de incorporar o flipbook diretamente, adicione um link visual que abre o flipbook em uma nova aba:

1. Tire um screenshot da capa do seu flipbook.
2. Adicione um Bloco de Imagem à sua página Squarespace com o screenshot.
3. Adicione um link à imagem apontando para a URL de compartilhamento do FlipLink.
4. Configure o link para abrir em uma nova janela.

Essa abordagem funciona em todos os planos Squarespace e dá controle total sobre a apresentação visual. Os visitantes clicam na imagem da capa e obtêm a experiência completa do flipbook em uma nova aba.

Bloco de Botão

Para uma abordagem mais limpa, estilo call-to-action:

1. Adicione um Bloco de Botão à sua página.
2. Defina o texto do botão para algo como "Ver Nosso Catálogo" ou "Ler o Folheto".
3. Vincule à URL de compartilhamento do FlipLink.
4. Configure para abrir em uma nova aba.

Este é o método mais simples e funciona de forma confiável em todos os planos e dispositivos.

Solucionando Problemas Comuns

O flipbook não aparece após salvar

Certifique-se de que desmarcou "Exibir Fonte" nas configurações do bloco de código. Quando essa opção está habilitada, o Squarespace renderiza o código como texto simples em vez de executá-lo.

O embed está bloqueado ou mostra um frame em branco

Verifique as configurações de lista de domínios permitidos no FlipLink. Se a lista está habilitada, seu domínio Squarespace deve estar na lista permitida. Verifique também se seu plano Squarespace suporta blocos de código — você precisa do Business ou superior.

O flipbook está cortado no mobile

Use o wrapper responsivo mostrado no Passo 3. A técnica de aspect ratio box garante que o iframe se ajuste corretamente. Se ainda estiver com problemas, tente reduzir levemente a porcentagem do padding-bottom para se adequar melhor à viewport mobile.

O Squarespace diz "Atualize para usar código personalizado"

Blocos de código e injeção de código estão disponíveis apenas nos planos Squarespace Business, Commerce Basic e Commerce Advanced. Se você está no plano Personal, use as alternativas de bloco de link ou bloco de botão descritas acima.

Dicas para a Melhor Experiência

• Escolha o posicionamento certo na página. Coloque seu flipbook em uma seção de largura total para máximo impacto. Evite incorporar em barras laterais estreitas onde a experiência de virada de página fica apertada.
• Defina uma altura significativa. Se não estiver usando o wrapper responsivo, defina a altura do iframe para pelo menos 600px no desktop. Menos que isso torna a leitura desconfortável.
• Adicione contexto ao redor do embed. Inclua um título e uma breve descrição acima do flipbook para que os visitantes entendam o que estão vendo antes de começar a folhear.
• Teste em múltiplos dispositivos. Visualize sua página no desktop, tablet e mobile antes de publicar. A pré-visualização de dispositivos integrada do Squarespace torna isso fácil.

Recursos Relacionados

Se você está incorporando flipbooks em outras plataformas, estes guias podem ajudar:

• Como Incorporar um PDF em Qualquer Site
• Como Incorporar um Flipbook no WordPress
• Como Incorporar um Flipbook com Iframe

Comece a Incorporar Seu Flipbook Hoje

Criar e incorporar um flipbook no Squarespace leva apenas minutos com o FlipLink. Faça upload do seu PDF, copie o código de embed e insira em um bloco de código do Squarespace — seus visitantes terão uma experiência de leitura polida e interativa sem sair do seu site.

Crie seu flipbook gratuito no FlipLink e comece a incorporar no seu site Squarespace hoje. Confira nossa página de preços para ver o que está incluído em cada plano.