Integração por iFrame

Information

iFrames são o método universal para incorporar temporizadores da gettickr.app em qualquer website. Este guia mostra tudo o que precisa saber para implementar temporizadores usando código iFrame.

Os iFrames são a tecnologia fundamental por trás da incorporação de temporizadores da gettickr.app em websites. Compreender como trabalhar com iFrames dá‑lhe flexibilidade para integrar temporizadores em qualquer plataforma de website ou página com código personalizado.

O que é um iFrame?

Um iFrame (inline frame) é um elemento HTML que incorpora outra página HTML dentro da sua página atual. Ao usar um iFrame para incorporar um temporizador, está a criar uma janela no seu website que mostra o seu temporizador a partir da gettickr.app.

Aspeto	Descrição
Tecnologia	Elemento HTML padrão (`<iframe>`)
Suporte de browser	Todos os browsers modernos (Chrome, Firefox, Safari, Edge)
Compatibilidade	Funciona em todas as plataformas de website
Complexidade	Simples — basta colar código HTML
Flexibilidade	Controlo total sobre tamanho, posição e estilo

Tip

iFrames são a mesma tecnologia usada para incorporar vídeos do YouTube, Google Maps e outros conteúdos externos em websites. Se a sua plataforma suporta estes, suporta temporizadores da gettickr.app!

Estrutura básica de código iFrame

O código básico de iFrame para incorporar um temporizador segue uma estrutura HTML simples:

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="800"
  height="400"
  frameborder="0"
  allowfullscreen
>
</iframe>

Atributos do iFrame explicados

Atributo	Finalidade	Valor de exemplo	Obrigatório
`src`	URL do temporizador a exibir	`https://gettickr.app/r/#abc123`	✅ Sim
`width`	Largura do iFrame	`800` (px) ou `100%` (responsivo)	✅ Sim
`height`	Altura do iFrame	`400` (px)	✅ Sim
`frameborder`	Borda à volta do iFrame	`0` (sem borda)	⬜ Opcional
`allowfullscreen`	Permitir modo fullscreen	Sem valor necessário	⬜ Opcional
`loading`	Quando carregar o iFrame	`lazy` (carregar quando visível)	⬜ Opcional
`title`	Descrição para acessibilidade	`"Temporizador de Contagem"`	⬜ Recomendado

Tip

Inclua sempre o atributo title para acessibilidade — ajuda leitores de ecrã a descrever o conteúdo a utilizadores com deficiência visual.

Criar o seu código iFrame

Siga estes passos para criar o código iFrame do seu temporizador:

Passo 1: Obter o URL do seu temporizador

Crie e personalize o seu temporizador no Editor
Na secção Renderer, encontre o URL de apresentação do temporizador
Copie o URL completo (parece https://gettickr.app/r/#YOUR-TIMER-ID)

Passo 2: Escolher dimensões

Decida a largura e altura com base no design do temporizador e onde será exibido:

Local de colocação	Largura recomendada	Altura recomendada	Rácio de aspeto
Largura total	`100%`	`400-600px`	~16:9 ou 16:6
Secção hero	`1200px` ou `100%`	`600px`	2:1
Barra lateral	`300-400px`	`200-300px`	~4:3
Conteúdo padrão	`800px`	`400px`	2:1
Widget pequeno	`400px`	`200px`	2:1

Information

Combine as dimensões do iFrame com as dimensões de design definidas ao criar o seu temporizador no editor, para o melhor aspeto.

Passo 3: Construir o seu código

Substitua YOUR-TIMER-ID pelo ID real do temporizador no URL:

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="800"
  height="400"
  frameborder="0"
  title="Temporizador de Contagem"
  allowfullscreen
>
</iframe>

Passo 4: Adicionar ao seu website

Copie o código iFrame completo e cole‑o no seu website:

Editor HTML/Código: Cole diretamente no HTML
Construtor de sites: Use um bloco “HTML Personalizado” ou “Embed Code”
CMS: Adicione a um bloco HTML, widget HTML personalizado ou editor de texto (modo HTML)

Warning

Tenha a certeza de colar o código em modo HTML, não no editor visual/formatado. Se colar em modo visual, o código aparecerá como texto em vez de renderizar o temporizador.

Considerações de segurança

Browsers modernos implementam funcionalidades de segurança para iFrames para proteger os utilizadores:

Funcionalidade de segurança	O que faz	Compatibilidade gettickr.app
Requisito HTTPS	Muitos sites só permitem iFrames HTTPS	✅ gettickr.app usa HTTPS
X-Frame-Options	Controla quem pode incorporar o conteúdo	✅ Permite incorporação
Cabeçalhos CSP	Restrições de Content Security Policy	✅ Lista branca definida
Atributo sandbox	Restringe capacidades do iFrame	⬜ Não necessário para timers

Information

Os temporizadores da gettickr.app foram desenhados para funcionar em iFrames com segurança, sem requerer configurações especiais. As definições padrão de segurança dos browsers funcionam perfeitamente.

Atributo sandbox (opcional)

Se a política de segurança do seu website o exigir, pode adicionar restrições sandbox:

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="800"
  height="400"
  sandbox="allow-scripts allow-same-origin"
  style="border: none;"
>
</iframe>

Warning

Adicione o atributo sandbox apenas se for especificamente exigido pela sua política de segurança. Pode restringir funcionalidades do temporizador se não for configurado corretamente.

Otimização de desempenho

Carregamento preguiçoso (Lazy Loading)

Adie o carregamento de iFrames até estarem próximos do viewport:

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="800"
  height="400"
  loading="lazy"
  style="border: none;"
>
</iframe>

Benefícios:

Carregamento inicial mais rápido
Menor largura de banda para utilizadores que não chegam até ao temporizador
Melhor desempenho em dispositivos móveis

Tip

Use loading="lazy" para temporizadores que aparecem abaixo da primeira dobra (não imediatamente visíveis ao carregar a página).

Boas práticas de desempenho

Prática	Porquê	Como
Um temporizador por página	Minimiza uso de recursos	Use um temporizador, não múltiplos
Tamanho apropriado	Evite carregar iFrames demasiado grandes	Combine dimensões de design
Lazy Loading	Carregar apenas quando necessário	Adicione `loading="lazy"`
Evitar iFrames aninhados	Complexidade prejudica desempenho	Apenas um nível

Resolução de problemas

Temporizador não aparece

Problema	Solução
Espaço em branco onde deveria estar	Verifique se o URL do temporizador está correto
Nenhum iFrame visível	Garanta que está em modo HTML (não editor visual)
Mensagem de erro no iFrame	O temporizador pode ter sido apagado ou URL incorreto
Ecrã preto	As dimensões do iFrame podem estar incorretas

Tip

Abra o URL do temporizador diretamente no navegador para confirmar que funciona antes de depurar a incorporação via iFrame.

Problemas de dimensionamento

Problema	Solução
Temporizador parece pequeno	Aumente os valores de largura e altura
Temporizador cortado	Verifique se dimensões do iFrame combinam com o design do temporizador
Overflow no contentor	Adicione `max-width: 100%` ao iFrame
Barras de scroll indesejadas	Defina `scrolling="no"` ou `overflow: hidden`
Rácio incorreto em mobile	Implemente contentor responsivo com rácio fixo

Problemas específicos de plataforma

Plataforma	Problema comum	Solução
WordPress	Editor visual remove código	Use Code Editor ou bloco HTML
Wix	iFrame não permitido em texto	Use elemento HTML iFrame do menu Add
Squarespace	Suporte iFrame limitado	Use Code Block, não Text Block
Shopify	iFrame em templates Liquid	Use sintaxe Liquid adequada para HTML
Webflow	Necessário elemento Embed	Use o elemento Embed, não HTML Embed

Warning

Algumas plataformas de websites filtram ou restringem código iFrame por segurança. Se o seu iFrame não funcionar, verifique a documentação da sua plataforma sobre incorporação de conteúdo externo.

Erros na consola do browser

Consulte a consola do developer (F12) para mensagens de erro:

X-Frame-Options denied

Solução: Contacte o seu alojamento — o site pode estar a bloquear iFrames.

Mixed Content: blocked loading insecure content

Solução: Garanta que o URL do temporizador usa https:// e não http://.

CSP: frame-src violation

Solução: Atualize a sua Content Security Policy para permitir gettickr.app.

Próximos passos

Integração WordPress — Guia específico para WordPress
Integração Shopify — Configuração de temporizadores em e‑commerce
Integração HTML Personalizado — Técnicas avançadas de implementação
Personalizar Design do Temporizador — Faça o temporizador corresponder à estética do seu website

Tip

Para instruções específicas de plataforma além do código iFrame básico, veja os guias de integração dedicados à sua plataforma de website!

Integração por iFrame

Information

iFrames são o método universal para incorporar temporizadores da gettickr.app em qualquer website. Este guia mostra tudo o que precisa saber para implementar temporizadores usando código iFrame.

O que é um iFrame?

Aspeto	Descrição
Tecnologia	Elemento HTML padrão (`<iframe>`)
Suporte de browser	Todos os browsers modernos (Chrome, Firefox, Safari, Edge)
Compatibilidade	Funciona em todas as plataformas de website
Complexidade	Simples — basta colar código HTML
Flexibilidade	Controlo total sobre tamanho, posição e estilo

Tip

Estrutura básica de código iFrame

O código básico de iFrame para incorporar um temporizador segue uma estrutura HTML simples:

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="800"
  height="400"
  frameborder="0"
  allowfullscreen
>
</iframe>

Atributos do iFrame explicados

Atributo	Finalidade	Valor de exemplo	Obrigatório
`src`	URL do temporizador a exibir	`https://gettickr.app/r/#abc123`	✅ Sim
`width`	Largura do iFrame	`800` (px) ou `100%` (responsivo)	✅ Sim
`height`	Altura do iFrame	`400` (px)	✅ Sim
`frameborder`	Borda à volta do iFrame	`0` (sem borda)	⬜ Opcional
`allowfullscreen`	Permitir modo fullscreen	Sem valor necessário	⬜ Opcional
`loading`	Quando carregar o iFrame	`lazy` (carregar quando visível)	⬜ Opcional
`title`	Descrição para acessibilidade	`"Temporizador de Contagem"`	⬜ Recomendado

Tip

Inclua sempre o atributo title para acessibilidade — ajuda leitores de ecrã a descrever o conteúdo a utilizadores com deficiência visual.

Criar o seu código iFrame

Siga estes passos para criar o código iFrame do seu temporizador:

Passo 1: Obter o URL do seu temporizador

Crie e personalize o seu temporizador no Editor
Na secção Renderer, encontre o URL de apresentação do temporizador
Copie o URL completo (parece https://gettickr.app/r/#YOUR-TIMER-ID)

Passo 2: Escolher dimensões

Decida a largura e altura com base no design do temporizador e onde será exibido:

Local de colocação	Largura recomendada	Altura recomendada	Rácio de aspeto
Largura total	`100%`	`400-600px`	~16:9 ou 16:6
Secção hero	`1200px` ou `100%`	`600px`	2:1
Barra lateral	`300-400px`	`200-300px`	~4:3
Conteúdo padrão	`800px`	`400px`	2:1
Widget pequeno	`400px`	`200px`	2:1

Information

Combine as dimensões do iFrame com as dimensões de design definidas ao criar o seu temporizador no editor, para o melhor aspeto.

Passo 3: Construir o seu código

Substitua YOUR-TIMER-ID pelo ID real do temporizador no URL:

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="800"
  height="400"
  frameborder="0"
  title="Temporizador de Contagem"
  allowfullscreen
>
</iframe>

Passo 4: Adicionar ao seu website

Copie o código iFrame completo e cole‑o no seu website:

Editor HTML/Código: Cole diretamente no HTML
Construtor de sites: Use um bloco “HTML Personalizado” ou “Embed Code”
CMS: Adicione a um bloco HTML, widget HTML personalizado ou editor de texto (modo HTML)

Warning

Tenha a certeza de colar o código em modo HTML, não no editor visual/formatado. Se colar em modo visual, o código aparecerá como texto em vez de renderizar o temporizador.

Considerações de segurança

Browsers modernos implementam funcionalidades de segurança para iFrames para proteger os utilizadores:

Funcionalidade de segurança	O que faz	Compatibilidade gettickr.app
Requisito HTTPS	Muitos sites só permitem iFrames HTTPS	✅ gettickr.app usa HTTPS
X-Frame-Options	Controla quem pode incorporar o conteúdo	✅ Permite incorporação
Cabeçalhos CSP	Restrições de Content Security Policy	✅ Lista branca definida
Atributo sandbox	Restringe capacidades do iFrame	⬜ Não necessário para timers

Information

Atributo sandbox (opcional)

Se a política de segurança do seu website o exigir, pode adicionar restrições sandbox:

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="800"
  height="400"
  sandbox="allow-scripts allow-same-origin"
  style="border: none;"
>
</iframe>

Warning

Adicione o atributo sandbox apenas se for especificamente exigido pela sua política de segurança. Pode restringir funcionalidades do temporizador se não for configurado corretamente.

Otimização de desempenho

Carregamento preguiçoso (Lazy Loading)

Adie o carregamento de iFrames até estarem próximos do viewport:

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="800"
  height="400"
  loading="lazy"
  style="border: none;"
>
</iframe>

Benefícios:

Carregamento inicial mais rápido
Menor largura de banda para utilizadores que não chegam até ao temporizador
Melhor desempenho em dispositivos móveis

Tip

Use loading="lazy" para temporizadores que aparecem abaixo da primeira dobra (não imediatamente visíveis ao carregar a página).

Boas práticas de desempenho

Prática	Porquê	Como
Um temporizador por página	Minimiza uso de recursos	Use um temporizador, não múltiplos
Tamanho apropriado	Evite carregar iFrames demasiado grandes	Combine dimensões de design
Lazy Loading	Carregar apenas quando necessário	Adicione `loading="lazy"`
Evitar iFrames aninhados	Complexidade prejudica desempenho	Apenas um nível

Resolução de problemas

Temporizador não aparece

Problema	Solução
Espaço em branco onde deveria estar	Verifique se o URL do temporizador está correto
Nenhum iFrame visível	Garanta que está em modo HTML (não editor visual)
Mensagem de erro no iFrame	O temporizador pode ter sido apagado ou URL incorreto
Ecrã preto	As dimensões do iFrame podem estar incorretas

Tip

Abra o URL do temporizador diretamente no navegador para confirmar que funciona antes de depurar a incorporação via iFrame.

Problemas de dimensionamento

Problema	Solução
Temporizador parece pequeno	Aumente os valores de largura e altura
Temporizador cortado	Verifique se dimensões do iFrame combinam com o design do temporizador
Overflow no contentor	Adicione `max-width: 100%` ao iFrame
Barras de scroll indesejadas	Defina `scrolling="no"` ou `overflow: hidden`
Rácio incorreto em mobile	Implemente contentor responsivo com rácio fixo

Problemas específicos de plataforma

Plataforma	Problema comum	Solução
WordPress	Editor visual remove código	Use Code Editor ou bloco HTML
Wix	iFrame não permitido em texto	Use elemento HTML iFrame do menu Add
Squarespace	Suporte iFrame limitado	Use Code Block, não Text Block
Shopify	iFrame em templates Liquid	Use sintaxe Liquid adequada para HTML
Webflow	Necessário elemento Embed	Use o elemento Embed, não HTML Embed

Warning

Erros na consola do browser

Consulte a consola do developer (F12) para mensagens de erro:

X-Frame-Options denied

Solução: Contacte o seu alojamento — o site pode estar a bloquear iFrames.

Mixed Content: blocked loading insecure content

Solução: Garanta que o URL do temporizador usa https:// e não http://.

CSP: frame-src violation

Solução: Atualize a sua Content Security Policy para permitir gettickr.app.

Próximos passos

Integração WordPress — Guia específico para WordPress
Integração Shopify — Configuração de temporizadores em e‑commerce
Integração HTML Personalizado — Técnicas avançadas de implementação
Personalizar Design do Temporizador — Faça o temporizador corresponder à estética do seu website

Tip

Para instruções específicas de plataforma além do código iFrame básico, veja os guias de integração dedicados à sua plataforma de website!