Integração com Wix / Squarespace

Information

O Wix e o Squarespace são construtores de websites populares utilizados por mais de 250 milhões de sites em todo o mundo. Ambas as plataformas tornam fácil incorporar temporizadores do gettickr.app sem necessidade de código!

O Wix e o Squarespace são conhecidos pelos seus editores visuais amigáveis, que tornam a criação de sites acessível a todos. Ambas as plataformas suportam a incorporação de temporizadores do gettickr.app, embora cada uma tenha a sua abordagem. Este guia cobre ambas em detalhe.

Comparação de Plataformas

Funcionalidade	Wix	Squarespace	Notas
Método de Embed	Elemento HTML iFrame	Bloco de Código	Ambas usam HTML
Dificuldade	Fácil	Fácil	Sem necessidade de código
Posicionamento	Absoluto (arrastar)	Baseado em blocos	Wix é mais flexível
Responsivo	Automático	Automático	Ambos lidam bem com mobile
Pré‑visualização	Tempo real	Tempo real	Ver alterações imediatamente
Vários Temporizadores	✅ Ilimitado	✅ Ilimitado	Adicione quantos precisar
CSS Personalizado	✅ Sim	✅ Sim	Estilização avançada
Edição Mobile	Editor separado	Editor unificado	Abordagens diferentes
Curva de Aprendizagem	Baixa	Baixa	Amigáveis ao utilizador

Tip

Ambas as plataformas são excelentes para integrar temporizadores – escolha com base na que já utiliza ou prefere para construção de sites.

Integração no Wix

O Wix usa um editor drag‑and‑drop que torna a construção de websites intuitiva e visual.

Passo a Passo para Wix

Passo 1: Criar o Seu Temporizador

Aceda ao Editor
Desenhe e configure o temporizador
Ajuste cores e fontes para combinar com o seu site Wix
Copie o URL do temporizador na secção de Renderização

Passo 2: Abrir o Editor do Wix

Inicie sessão na sua conta Wix
Vá a My Sites
Clique em "Edit Site" no site onde pretende adicionar o temporizador
Navegue até à página onde o temporizador deve aparecer

Passo 3: Adicionar Elemento HTML iFrame

Clique no botão "+" (Adicionar Elementos) na barra lateral esquerda
Desça ou pesquise pela secção "Embed"
Clique em "Embed"
Selecione "HTML iframe" nas opções
O Wix coloca um elemento placeholder na sua página

Information

O elemento HTML iFrame é concebido para incorporar conteúdo externo como temporizadores, vídeos e mapas. É a mesma tecnologia usada para embeds do YouTube!

Passo 4: Configurar o iFrame

Clique no elemento iFrame para o selecionar
Clique em "Enter Code" ou no ícone de Settings
Na secção "Code", escolha o separador "Code" (não o de URL)
Cole o seu código iFrame:

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="100%"
  height="400"
  frameborder="0"
  style="border: none;"
  title="Temporizador de Contagem"
>
</iframe>

Clique em "Update"

Passo 5: Posicionar e Redimensionar

Arraste o elemento para a posição desejada
Redimensione através das alças nos cantos
Utilize as guias de alinhamento do Wix (linhas azuis) para alinhar com outros elementos
Mantenha Shift enquanto arrasta para manter proporções

Passo 6: Otimização Mobile

Clique no ícone mobile na barra superior
Mude para o Mobile Editor
Reposicione e redimensione o temporizador para ecrãs móveis
Os layouts mobile e desktop são independentes no Wix

Tip

O Wix permite posicionamento separado para mobile e desktop – aproveite para criar layouts ótimos para cada tipo de dispositivo!

Passo 7: Publicar

Clique em "Preview" para ver antes de publicar
Teste em vistas desktop e mobile
Clique em "Publish" quando estiver satisfeito
O seu temporizador fica online!

Definições de Elemento no Wix

Definição	Localização	Finalidade	Recomendação
Largura	Alças de resize	Largura do elemento	Use largura total
Altura	Alças de resize	Altura do elemento	300–500px
Posição	Arrastar elemento	Coordenadas X/Y	Centro/topo
Alinhamento	Menu de contexto	Alinhar com outros elementos	Use guias
Bloquear	Menu de contexto	Evitar movimentos acidentais	Após finalizar
Duplicar	Menu de contexto	Copiar para múltiplos timers	Poupa tempo
Ocultar no Mobile	Definições	Exibir só no desktop	Opcional
Animações	Definições	Efeitos de entrada	Apenas subtis

Dicas de Posicionamento no Wix

Vantagens do Posicionamento Absoluto:

Controlo ao pixel
Sobreposição em imagens/secções
Layouts criativos
Design profissional

Considerações:

Teste cuidadosamente em mobile
Pode sobrepor em ecrãs pequenos
Requer ajuste manual para mobile

Warning

Ao usar posicionamento livre do Wix, teste sempre como os elementos se reorganizam em dispositivos móveis. O que está perfeito em desktop pode sobrepor ou criar espaços em mobile!

Exemplos de Código para Wix

Temporizador Full‑Width na Hero:

<div
  style="width: 100%; max-width: 1200px; margin: 0 auto; padding: 40px 20px;"
>
  <h2 style="text-align: center; font-size: 36px; margin-bottom: 20px;">
    Oferta por Tempo Limitado!
  </h2>
  <iframe
    src="https://gettickr.app/r/#YOUR-TIMER-ID"
    width="100%"
    height="400"
    frameborder="0"
    style="border: none; display: block;"
    title="Temporizador de Promoção"
  ></iframe>
</div>

Temporizador Compacto na Barra Lateral:

<div
  style="background: #f8f9fa; padding: 20px; border-radius: 8px; text-align: center;"
>
  <h3 style="margin-top: 0; font-size: 20px;">Contagem para o Evento</h3>
  <iframe
    src="https://gettickr.app/r/#YOUR-TIMER-ID"
    width="100%"
    height="250"
    frameborder="0"
    style="border: none;"
    title="Temporizador de Evento"
  ></iframe>
  <p style="margin-bottom: 0; font-size: 14px;">Não perca!</p>
</div>

Integração no Squarespace

O Squarespace utiliza um sistema baseado em blocos com uma abordagem moderna e limpa.

Passo a Passo para Squarespace

Passo 1: Criar o Seu Temporizador

Aceda ao Editor
Desenhe um temporizador que combine com a estética do seu site Squarespace
Sites Squarespace tendem a ser minimalistas – considere estilos simples
Copie o URL do temporizador

Passo 2: Abrir o Editor Squarespace

Inicie sessão na sua conta Squarespace
Vá a Pages no menu à esquerda
Navegue até à página onde pretende o temporizador
Clique em "Edit" para abrir o editor da página

Passo 3: Adicionar Bloco de Código

Aponte para onde pretende o temporizador (entre blocos existentes)
Clique no "+" (Insert Point) que aparece
Procure ou desça até "Code"
Clique em "Code" para adicionar o Bloco de Código
Surge um editor com o placeholder <h1>HELLO</h1>

Passo 4: Inserir o Código do Temporizador

Apague o código placeholder
Cole o código iFrame:

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="100%"
  height="400"
  frameborder="0"
  style="border: none; max-width: 100%;"
  title="Temporizador de Contagem"
>
</iframe>

Clique em "Apply" no canto inferior direito
O temporizador aparece no fluxo da página

Information

O Bloco de Código do Squarespace suporta HTML, CSS e JavaScript. Para incorporação básica do temporizador, necessita apenas de HTML (modo padrão).

Passo 5: Ajustar Posição do Bloco

Arraste o Bloco de Código para reorganizar
Use o menu do bloco (hover → clique nas seis bolinhas) para mais opções
Posições comuns:
- Acima do conteúdo – máxima visibilidade
- Abaixo do cabeçalho – colocação contextual
- Antes do rodapé – proeminente mas discreto

Passo 6: Personalizar Definições do Bloco

Aponte para o Bloco de Código
Clique em "Edit" para modificar código
Clique em "Duplicate" para copiar e usar vários temporizadores
Clique em "Remove" para eliminar

Passo 7: Guardar e Publicar

Clique em "Save" no topo à esquerda
Clique em "Preview" para testar antes de publicar
Use ícones de dispositivo para testar vistas mobile/tablet
Clique em "Publish" ou "Update" quando pronto

Tipos de Bloco no Squarespace

Bloco	Utilização	Suporte ao Temporizador	Notas
Code	Incorporar temporizadores	✅ Perfeito	Método recomendado
Markdown	Texto com HTML	⚠️ Limitado	Não ideal para iFrames
Embed	Embeds por URL	❌ Não	Requer provedores específicos
HTML	Legado (versões antigas)	✅ Sim	Use Code block no 7.1
Custom CSS	Estilo site‑wide	⬜ Indireto	Para estilizar temporizadores

Tip

Utilize sempre o Code Block para integração no Squarespace 7.1 (versão atual). É concebido para HTML personalizado como iFrames!

Exemplos de Código no Squarespace

Temporizador na Hero:

<section
  style="text-align: center; padding: 60px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;"
>
  <h1 style="font-size: 48px; margin: 0 0 10px 0;">Promoção de Verão</h1>
  <p style="font-size: 24px; margin: 0 0 30px 0;">Termina em breve!</p>
  <iframe
    src="https://gettickr.app/r/#YOUR-TIMER-ID"
    width="100%"
    height="400"
    frameborder="0"
    style="border: none; max-width: 1000px;"
    title="Temporizador de Promoção"
  ></iframe>
</section>

Temporizador Integrado no Conteúdo:

<div style="margin: 40px auto; max-width: 800px;">
  <h3 style="text-align: center; margin-bottom: 20px;">O Evento começa em:</h3>
  <iframe
    src="https://gettickr.app/r/#YOUR-TIMER-ID"
    width="100%"
    height="300"
    frameborder="0"
    style="border: none; display: block;"
    title="Temporizador de Evento"
  ></iframe>
</div>

Temporizador para Lançamento de Produto:

<div
  style="background: #f5f5f5; padding: 40px; border-radius: 8px; margin: 20px 0;"
>
  <h2 style="text-align: center; margin-top: 0; color: #333;">
    🚀 Lançamento de Novo Produto
  </h2>
  <iframe
    src="https://gettickr.app/r/#YOUR-TIMER-ID"
    width="100%"
    height="350"
    frameborder="0"
    style="border: none;"
    title="Temporizador de Lançamento"
  ></iframe>
  <p style="text-align: center; margin-bottom: 0;">
    <a
      href="/shop"
      style="display: inline-block; padding: 12px 30px; background: #000; color: #fff; text-decoration: none; border-radius: 4px; margin-top: 20px;"
    >
      Receber Notificações
    </a>
  </p>
</div>

Estilização Avançada (Ambas as Plataformas)

CSS Personalizado no Wix

Local: Site Settings → Custom Code → Add Custom Code (em <head>)

<style>
  /* Estilizar todos os iFrames do site */
  iframe {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }

  /* Estilização específica para mobile */
  @media (max-width: 768px) {
    iframe {
      height: 300px !important;
    }
  }
</style>

CSS Personalizado no Squarespace

Local: Design → Custom CSS

/* Estilizar iFrames em Bloco de Código */
.sqs-block-code iframe {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.sqs-block-code iframe:hover {
  transform: scale(1.02);
}

/* Otimização para mobile */
@media screen and (max-width: 767px) {
  .sqs-block-code iframe {
    height: 250px !important;
  }
}

Tip

Use CSS personalizado para aplicar um estilo consistente a todos os temporizadores do seu site sem editar cada código de embed individualmente!

Resolução de Problemas

Problemas no Wix

Problema	Causa	Solução
Temporizador não aparece	Tipo de elemento errado	Use HTML iFrame, não outro embed
Código aparece como texto	Usar caixa de texto	Use elemento HTML iFrame
Temporizador pequeno	Elemento com pouca altura	Redimensione pelas alças
Sobreposição em mobile	Posicionamento absoluto	Ajuste no Mobile Editor
Não encontra iFrame	A procurar no sítio errado	Add Elements → Embed → HTML iframe
Temporizador congelado	Erro de sintaxe no código	Verifique o código do iFrame

Warning

O Wix atualiza frequentemente o editor. Se não encontrar "HTML iFrame", procure por "Embed Code" ou "Custom Element" – a funcionalidade permanece, os nomes podem mudar.

Problemas no Squarespace

Problema	Causa	Solução
Temporizador não aparece	Bloco errado	Use Code Block, não Markdown
Ecrã preto	URL incorreto	Verifique o URL do temporizador
Temporizador demasiado largo	Sem max‑width	Adicione `max-width: 100%`
Não consegue editar	Bloco não selecionado	Clique Edit no Code Block
Altura incorreta	px não definido	Especifique altura em pixels
Mobile com má aparência	Testes só em desktop	Faça preview em mobile antes de publicar

Information

O Squarespace 7.1 (versão atual) usa Code Blocks. Sites 7.0 antigos usam métodos de embed diferentes. Este guia cobre o 7.1.

Considerações de Desempenho

Ambas as plataformas otimizam desempenho automaticamente, mas considere:

Consideração	Recomendação	Motivo
Nº de Temporizadores	Máx. 1–3 por página	Evitar carregamentos lentos
Tamanho do Temporizador	Adequado ao local	Evitar iFrames gigantes
Mobile First	Desenhar para mobile	Maior parte do tráfego é mobile
Qualidade de Imagem	Otimize assets	Evitar problemas somados
Terceiros	Limitar outros embeds	Cada embed aumenta latência

Tip

Se a página ficar lenta após adicionar temporizadores, verifique o tamanho total na DevTools (F12 → separador Network).

Considerações por Template

Templates no Wix

Tipo de Template	Melhor Colocação do Temporizador	Notas
Blank Template	Em qualquer lado (controlo total)	Máxima flexibilidade
Store	Páginas de produto, página inicial	Foco na conversão
Events	Hero, barras laterais	Contagem de eventos natural
Portfolio	Páginas de projeto	Lançamentos/deadlines
Blog	Cabeçalho do post, barra lateral	Temporizadores por conteúdo

Templates no Squarespace

Família de Templates	Melhor Colocação	Notas
Avenue	Index, hero	Full‑width funciona bem
Brine	Secções de conteúdo	Sistema flexível de blocos
Bedford	Abaixo de cabeçalhos	Layout clássico
Five	Landing pages	Foco em página única
Seven	Páginas de produto	Otimizado para e‑commerce

Information

Cada família de templates tem diferentes larguras máximas e layouts. Personalize temporizadores para funcionarem dentro das restrições do seu template.

Próximos Passos

Integração por iFrame – Guia detalhado de personalização de iFrame
Personalizar Design – Combine com a estética do seu site
Integração com WordPress – Se também usa WordPress
Integração com Shopify – Para lojas online

Tip

O Wix e o Squarespace tornam a integração de temporizadores simples. Escolha a plataforma que melhor se adapta às suas necessidades de website – os temporizadores funcionarão bem em ambas!

Integração com Wix / Squarespace

Information

Comparação de Plataformas

Funcionalidade	Wix	Squarespace	Notas
Método de Embed	Elemento HTML iFrame	Bloco de Código	Ambas usam HTML
Dificuldade	Fácil	Fácil	Sem necessidade de código
Posicionamento	Absoluto (arrastar)	Baseado em blocos	Wix é mais flexível
Responsivo	Automático	Automático	Ambos lidam bem com mobile
Pré‑visualização	Tempo real	Tempo real	Ver alterações imediatamente
Vários Temporizadores	✅ Ilimitado	✅ Ilimitado	Adicione quantos precisar
CSS Personalizado	✅ Sim	✅ Sim	Estilização avançada
Edição Mobile	Editor separado	Editor unificado	Abordagens diferentes
Curva de Aprendizagem	Baixa	Baixa	Amigáveis ao utilizador

Tip

Ambas as plataformas são excelentes para integrar temporizadores – escolha com base na que já utiliza ou prefere para construção de sites.

Integração no Wix

O Wix usa um editor drag‑and‑drop que torna a construção de websites intuitiva e visual.

Passo a Passo para Wix

Passo 1: Criar o Seu Temporizador

Aceda ao Editor
Desenhe e configure o temporizador
Ajuste cores e fontes para combinar com o seu site Wix
Copie o URL do temporizador na secção de Renderização

Passo 2: Abrir o Editor do Wix

Inicie sessão na sua conta Wix
Vá a My Sites
Clique em "Edit Site" no site onde pretende adicionar o temporizador
Navegue até à página onde o temporizador deve aparecer

Passo 3: Adicionar Elemento HTML iFrame

Clique no botão "+" (Adicionar Elementos) na barra lateral esquerda
Desça ou pesquise pela secção "Embed"
Clique em "Embed"
Selecione "HTML iframe" nas opções
O Wix coloca um elemento placeholder na sua página

Information

O elemento HTML iFrame é concebido para incorporar conteúdo externo como temporizadores, vídeos e mapas. É a mesma tecnologia usada para embeds do YouTube!

Passo 4: Configurar o iFrame

Clique no elemento iFrame para o selecionar
Clique em "Enter Code" ou no ícone de Settings
Na secção "Code", escolha o separador "Code" (não o de URL)
Cole o seu código iFrame:

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="100%"
  height="400"
  frameborder="0"
  style="border: none;"
  title="Temporizador de Contagem"
>
</iframe>

Clique em "Update"

Passo 5: Posicionar e Redimensionar

Arraste o elemento para a posição desejada
Redimensione através das alças nos cantos
Utilize as guias de alinhamento do Wix (linhas azuis) para alinhar com outros elementos
Mantenha Shift enquanto arrasta para manter proporções

Passo 6: Otimização Mobile

Clique no ícone mobile na barra superior
Mude para o Mobile Editor
Reposicione e redimensione o temporizador para ecrãs móveis
Os layouts mobile e desktop são independentes no Wix

Tip

O Wix permite posicionamento separado para mobile e desktop – aproveite para criar layouts ótimos para cada tipo de dispositivo!

Passo 7: Publicar

Clique em "Preview" para ver antes de publicar
Teste em vistas desktop e mobile
Clique em "Publish" quando estiver satisfeito
O seu temporizador fica online!

Definições de Elemento no Wix

Definição	Localização	Finalidade	Recomendação
Largura	Alças de resize	Largura do elemento	Use largura total
Altura	Alças de resize	Altura do elemento	300–500px
Posição	Arrastar elemento	Coordenadas X/Y	Centro/topo
Alinhamento	Menu de contexto	Alinhar com outros elementos	Use guias
Bloquear	Menu de contexto	Evitar movimentos acidentais	Após finalizar
Duplicar	Menu de contexto	Copiar para múltiplos timers	Poupa tempo
Ocultar no Mobile	Definições	Exibir só no desktop	Opcional
Animações	Definições	Efeitos de entrada	Apenas subtis

Dicas de Posicionamento no Wix

Vantagens do Posicionamento Absoluto:

Controlo ao pixel
Sobreposição em imagens/secções
Layouts criativos
Design profissional

Considerações:

Teste cuidadosamente em mobile
Pode sobrepor em ecrãs pequenos
Requer ajuste manual para mobile

Warning

Ao usar posicionamento livre do Wix, teste sempre como os elementos se reorganizam em dispositivos móveis. O que está perfeito em desktop pode sobrepor ou criar espaços em mobile!

Exemplos de Código para Wix

Temporizador Full‑Width na Hero:

<div
  style="width: 100%; max-width: 1200px; margin: 0 auto; padding: 40px 20px;"
>
  <h2 style="text-align: center; font-size: 36px; margin-bottom: 20px;">
    Oferta por Tempo Limitado!
  </h2>
  <iframe
    src="https://gettickr.app/r/#YOUR-TIMER-ID"
    width="100%"
    height="400"
    frameborder="0"
    style="border: none; display: block;"
    title="Temporizador de Promoção"
  ></iframe>
</div>

Temporizador Compacto na Barra Lateral:

<div
  style="background: #f8f9fa; padding: 20px; border-radius: 8px; text-align: center;"
>
  <h3 style="margin-top: 0; font-size: 20px;">Contagem para o Evento</h3>
  <iframe
    src="https://gettickr.app/r/#YOUR-TIMER-ID"
    width="100%"
    height="250"
    frameborder="0"
    style="border: none;"
    title="Temporizador de Evento"
  ></iframe>
  <p style="margin-bottom: 0; font-size: 14px;">Não perca!</p>
</div>

Integração no Squarespace

O Squarespace utiliza um sistema baseado em blocos com uma abordagem moderna e limpa.

Passo a Passo para Squarespace

Passo 1: Criar o Seu Temporizador

Aceda ao Editor
Desenhe um temporizador que combine com a estética do seu site Squarespace
Sites Squarespace tendem a ser minimalistas – considere estilos simples
Copie o URL do temporizador

Passo 2: Abrir o Editor Squarespace

Inicie sessão na sua conta Squarespace
Vá a Pages no menu à esquerda
Navegue até à página onde pretende o temporizador
Clique em "Edit" para abrir o editor da página

Passo 3: Adicionar Bloco de Código

Aponte para onde pretende o temporizador (entre blocos existentes)
Clique no "+" (Insert Point) que aparece
Procure ou desça até "Code"
Clique em "Code" para adicionar o Bloco de Código
Surge um editor com o placeholder <h1>HELLO</h1>

Passo 4: Inserir o Código do Temporizador

Apague o código placeholder
Cole o código iFrame:

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="100%"
  height="400"
  frameborder="0"
  style="border: none; max-width: 100%;"
  title="Temporizador de Contagem"
>
</iframe>

Clique em "Apply" no canto inferior direito
O temporizador aparece no fluxo da página

Information

O Bloco de Código do Squarespace suporta HTML, CSS e JavaScript. Para incorporação básica do temporizador, necessita apenas de HTML (modo padrão).

Passo 5: Ajustar Posição do Bloco

Arraste o Bloco de Código para reorganizar
Use o menu do bloco (hover → clique nas seis bolinhas) para mais opções
Posições comuns:
- Acima do conteúdo – máxima visibilidade
- Abaixo do cabeçalho – colocação contextual
- Antes do rodapé – proeminente mas discreto

Passo 6: Personalizar Definições do Bloco

Aponte para o Bloco de Código
Clique em "Edit" para modificar código
Clique em "Duplicate" para copiar e usar vários temporizadores
Clique em "Remove" para eliminar

Passo 7: Guardar e Publicar

Clique em "Save" no topo à esquerda
Clique em "Preview" para testar antes de publicar
Use ícones de dispositivo para testar vistas mobile/tablet
Clique em "Publish" ou "Update" quando pronto

Tipos de Bloco no Squarespace

Bloco	Utilização	Suporte ao Temporizador	Notas
Code	Incorporar temporizadores	✅ Perfeito	Método recomendado
Markdown	Texto com HTML	⚠️ Limitado	Não ideal para iFrames
Embed	Embeds por URL	❌ Não	Requer provedores específicos
HTML	Legado (versões antigas)	✅ Sim	Use Code block no 7.1
Custom CSS	Estilo site‑wide	⬜ Indireto	Para estilizar temporizadores

Tip

Utilize sempre o Code Block para integração no Squarespace 7.1 (versão atual). É concebido para HTML personalizado como iFrames!

Exemplos de Código no Squarespace

Temporizador na Hero:

<section
  style="text-align: center; padding: 60px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;"
>
  <h1 style="font-size: 48px; margin: 0 0 10px 0;">Promoção de Verão</h1>
  <p style="font-size: 24px; margin: 0 0 30px 0;">Termina em breve!</p>
  <iframe
    src="https://gettickr.app/r/#YOUR-TIMER-ID"
    width="100%"
    height="400"
    frameborder="0"
    style="border: none; max-width: 1000px;"
    title="Temporizador de Promoção"
  ></iframe>
</section>

Temporizador Integrado no Conteúdo:

<div style="margin: 40px auto; max-width: 800px;">
  <h3 style="text-align: center; margin-bottom: 20px;">O Evento começa em:</h3>
  <iframe
    src="https://gettickr.app/r/#YOUR-TIMER-ID"
    width="100%"
    height="300"
    frameborder="0"
    style="border: none; display: block;"
    title="Temporizador de Evento"
  ></iframe>
</div>

Temporizador para Lançamento de Produto:

<div
  style="background: #f5f5f5; padding: 40px; border-radius: 8px; margin: 20px 0;"
>
  <h2 style="text-align: center; margin-top: 0; color: #333;">
    🚀 Lançamento de Novo Produto
  </h2>
  <iframe
    src="https://gettickr.app/r/#YOUR-TIMER-ID"
    width="100%"
    height="350"
    frameborder="0"
    style="border: none;"
    title="Temporizador de Lançamento"
  ></iframe>
  <p style="text-align: center; margin-bottom: 0;">
    <a
      href="/shop"
      style="display: inline-block; padding: 12px 30px; background: #000; color: #fff; text-decoration: none; border-radius: 4px; margin-top: 20px;"
    >
      Receber Notificações
    </a>
  </p>
</div>

Estilização Avançada (Ambas as Plataformas)

CSS Personalizado no Wix

Local: Site Settings → Custom Code → Add Custom Code (em <head>)

<style>
  /* Estilizar todos os iFrames do site */
  iframe {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }

  /* Estilização específica para mobile */
  @media (max-width: 768px) {
    iframe {
      height: 300px !important;
    }
  }
</style>

CSS Personalizado no Squarespace

Local: Design → Custom CSS

/* Estilizar iFrames em Bloco de Código */
.sqs-block-code iframe {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.sqs-block-code iframe:hover {
  transform: scale(1.02);
}

/* Otimização para mobile */
@media screen and (max-width: 767px) {
  .sqs-block-code iframe {
    height: 250px !important;
  }
}

Tip

Use CSS personalizado para aplicar um estilo consistente a todos os temporizadores do seu site sem editar cada código de embed individualmente!

Resolução de Problemas

Problemas no Wix

Problema	Causa	Solução
Temporizador não aparece	Tipo de elemento errado	Use HTML iFrame, não outro embed
Código aparece como texto	Usar caixa de texto	Use elemento HTML iFrame
Temporizador pequeno	Elemento com pouca altura	Redimensione pelas alças
Sobreposição em mobile	Posicionamento absoluto	Ajuste no Mobile Editor
Não encontra iFrame	A procurar no sítio errado	Add Elements → Embed → HTML iframe
Temporizador congelado	Erro de sintaxe no código	Verifique o código do iFrame

Warning

O Wix atualiza frequentemente o editor. Se não encontrar "HTML iFrame", procure por "Embed Code" ou "Custom Element" – a funcionalidade permanece, os nomes podem mudar.

Problemas no Squarespace

Problema	Causa	Solução
Temporizador não aparece	Bloco errado	Use Code Block, não Markdown
Ecrã preto	URL incorreto	Verifique o URL do temporizador
Temporizador demasiado largo	Sem max‑width	Adicione `max-width: 100%`
Não consegue editar	Bloco não selecionado	Clique Edit no Code Block
Altura incorreta	px não definido	Especifique altura em pixels
Mobile com má aparência	Testes só em desktop	Faça preview em mobile antes de publicar

Information

O Squarespace 7.1 (versão atual) usa Code Blocks. Sites 7.0 antigos usam métodos de embed diferentes. Este guia cobre o 7.1.

Considerações de Desempenho

Ambas as plataformas otimizam desempenho automaticamente, mas considere:

Consideração	Recomendação	Motivo
Nº de Temporizadores	Máx. 1–3 por página	Evitar carregamentos lentos
Tamanho do Temporizador	Adequado ao local	Evitar iFrames gigantes
Mobile First	Desenhar para mobile	Maior parte do tráfego é mobile
Qualidade de Imagem	Otimize assets	Evitar problemas somados
Terceiros	Limitar outros embeds	Cada embed aumenta latência

Tip

Se a página ficar lenta após adicionar temporizadores, verifique o tamanho total na DevTools (F12 → separador Network).

Considerações por Template

Templates no Wix

Tipo de Template	Melhor Colocação do Temporizador	Notas
Blank Template	Em qualquer lado (controlo total)	Máxima flexibilidade
Store	Páginas de produto, página inicial	Foco na conversão
Events	Hero, barras laterais	Contagem de eventos natural
Portfolio	Páginas de projeto	Lançamentos/deadlines
Blog	Cabeçalho do post, barra lateral	Temporizadores por conteúdo

Templates no Squarespace

Família de Templates	Melhor Colocação	Notas
Avenue	Index, hero	Full‑width funciona bem
Brine	Secções de conteúdo	Sistema flexível de blocos
Bedford	Abaixo de cabeçalhos	Layout clássico
Five	Landing pages	Foco em página única
Seven	Páginas de produto	Otimizado para e‑commerce

Information

Cada família de templates tem diferentes larguras máximas e layouts. Personalize temporizadores para funcionarem dentro das restrições do seu template.

Próximos Passos

Integração por iFrame – Guia detalhado de personalização de iFrame
Personalizar Design – Combine com a estética do seu site
Integração com WordPress – Se também usa WordPress
Integração com Shopify – Para lojas online

Tip

O Wix e o Squarespace tornam a integração de temporizadores simples. Escolha a plataforma que melhor se adapta às suas necessidades de website – os temporizadores funcionarão bem em ambas!