Websites HTML Personalizados

Information

Websites codificados de forma personalizada oferecem controle completo sobre a integração de temporizadores. Esteja você trabalhando com HTML puro, usando um gerador de site estático ou construindo com um framework, este guia cobre tudo o que você precisa!

Websites codificados de forma personalizada oferecem flexibilidade ilimitada para incorporar temporizadores do gettickr.app. Este guia foi desenvolvido para desenvolvedores e abrange métodos de integração desde HTML básico até implementações avançadas com frameworks.

Visão Geral de Início Rápido

Implementação	Dificuldade	Ideal Para	Tempo Necessário
HTML Básico	Fácil	Sites estáticos	2 minutos
CSS Responsivo	Fácil	Sites mobile-friendly	5 minutos
JavaScript	Médio	Carregamento dinâmico	10 minutos
Geradores Estáticos	Médio	Sites JAMstack	5 minutos
React/Vue	Médio	SPAs, aplicações modernas	10 minutos
Avançado	Difícil	Integrações complexas	30+ minutos

Tip

Comece com a integração HTML básica e melhore progressivamente com base nas suas necessidades específicas e na arquitetura do site!

Integração HTML Básica

O método de integração mais simples usa um elemento iFrame HTML padrão.

Implementação Mínima

<!DOCTYPE html>
<html lang="pt">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contagem Regressiva do Evento</title>
  </head>
  <body>
    <h1>Contagem Regressiva do Lançamento do Produto</h1>

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

    <p>Não perca o nosso maior lançamento do ano!</p>
  </body>
</html>

Referência de Atributos HTML

Atributo	Obrigatório	Valor de Exemplo	Finalidade
`src`	✅ Sim	`https://gettickr.app/r/#abc123`	URL do temporizador
`width`	✅ Sim	`800` ou `100%`	Largura do iFrame
`height`	✅ Sim	`400`	Altura do iFrame
`frameborder`	⬜ Não	`0`	Remover borda (legado)
`style`	⬜ Não	`border: none;`	Estilização CSS
`title`	⬜ Sim	`"Temporizador de Contagem"`	Descrição de acessibilidade
`aria-label`	⬜ Não	`"Tempo restante: 3 horas"`	Descrição para leitores de tela
`loading`	⬜ Não	`lazy`	Carregamento lazy
`allow`	⬜ Não	`fullscreen`	Permissões de funcionalidades
`sandbox`	⬜ Não	`allow-scripts allow-same-origin`	Restrições de segurança
`referrerpolicy`	⬜ Não	`no-referrer-when-downgrade`	Política de cabeçalho de referrer

Estilização CSS e Layout

Temporizador Centralizado

<style>
  .timer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
  }

  .timer-container iframe {
    display: block;
    margin: 0 auto;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }
</style>

<div class="timer-container">
  <h2>Contagem Regressiva do Evento</h2>
  <iframe
    src="https://gettickr.app/r/#YOUR-TIMER-ID"
    width="100%"
    height="400"
    title="Temporizador do Evento"
  >
  </iframe>
</div>

Layout em Grid com Múltiplos Temporizadores

<style>
  .timer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
  }

  .timer-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .timer-card h3 {
    margin-top: 0;
    color: #333;
  }

  .timer-card iframe {
    width: 100%;
    border: none;
    border-radius: 8px;
  }
</style>

<div class="timer-grid">
  <div class="timer-card">
    <h3>Evento 1: Lançamento do Produto</h3>
    <iframe
      src="https://gettickr.app/r/#TIMER-1"
      height="300"
      title="Temporizador do Evento 1"
    ></iframe>
  </div>

  <div class="timer-card">
    <h3>Evento 2: Promoção Relâmpago</h3>
    <iframe
      src="https://gettickr.app/r/#TIMER-2"
      height="300"
      title="Temporizador do Evento 2"
    ></iframe>
  </div>

  <div class="timer-card">
    <h3>Evento 3: Webinar</h3>
    <iframe
      src="https://gettickr.app/r/#TIMER-3"
      height="300"
      title="Temporizador do Evento 3"
    ></iframe>
  </div>
</div>

Temporizador na Seção Hero

<style>
  .hero-countdown {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 80px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .hero-countdown::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('/pattern.svg') repeat;
    opacity: 0.1;
  }

  .hero-countdown .content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
  }

  .hero-countdown h1 {
    font-size: 56px;
    margin: 0 0 20px 0;
    font-weight: 700;
  }

  .hero-countdown .subtitle {
    font-size: 24px;
    margin: 0 0 40px 0;
    opacity: 0.95;
  }

  .hero-countdown iframe {
    border: none;
    background: transparent;
    max-width: 100%;
  }
</style>

<section class="hero-countdown">
  <div class="content">
    <h1>🎉 Promoção de Inauguração</h1>
    <p class="subtitle">Até 70% de Desconto - Não Perca!</p>
    <iframe
      src="https://gettickr.app/r/#YOUR-TIMER-ID"
      width="100%"
      height="500"
      title="Contagem Regressiva da Promoção"
    >
    </iframe>
  </div>
</section>

Geradores de Sites Estáticos

Jekyll

<!-- _includes/countdown-timer.html -->
<div class="countdown-timer-wrapper">
  {% if include.title %}
  <h2>{{ include.title }}</h2>
  {% endif %}

  <iframe
    src="https://gettickr.app/r/#{{ include.timer_id }}"
    width="{{ include.width | default: '100%' }}"
    height="{{ include.height | default: '400' }}"
    frameborder="0"
    style="border: none; max-width: 100%;"
    title="{{ include.title | default: 'Temporizador de Contagem Regressiva' }}"
  >
  </iframe>

  {% if include.caption %}
  <p class="timer-caption">{{ include.caption }}</p>
  {% endif %}
</div>

<!-- Uso em páginas/posts -->
{% include countdown-timer.html timer_id="YOUR-TIMER-ID" title="Contagem
Regressiva do Evento" height="500" caption="Não perca!" %}

Hugo

<!-- layouts/shortcodes/timer.html -->
{{ $timerId := .Get "id" }} {{ $width := .Get "width" | default "100%" }} {{
$height := .Get "height" | default "400" }} {{ $title := .Get "title" | default
"Temporizador de Contagem Regressiva" }}

<div class="hugo-timer-container">
  {{ if .Get "heading" }}
  <h2>{{ .Get "heading" }}</h2>
  {{ end }}

  <iframe
    src="https://gettickr.app/r/#{{ $timerId }}"
    width="{{ $width }}"
    height="{{ $height }}"
    frameborder="0"
    style="border: none; max-width: 100%;"
    title="{{ $title }}"
  >
  </iframe>
</div>

<!-- Uso em arquivos de conteúdo -->
{{< timer id="YOUR-TIMER-ID" height="500" heading="Promoção Acaba Em Breve!" >}}

Gatsby (React)

// src/components/CountdownTimer.js
import React from 'react';

const CountdownTimer = ({
  timerId,
  width = '100%',
  height = '400',
  title = 'Temporizador de Contagem Regressiva',
  className = '',
  style = {}
}) => {
  if (!timerId) {
    console.error('CountdownTimer: a propriedade timerId é obrigatória');
    return null;
  }

  const iframeStyle = {
    border: 'none',
    maxWidth: '100%',
    ...style
  };

  return (
    <iframe
      src={`https://gettickr.app/r/#${timerId}`}
      width={width}
      height={height}
      title={title}
      className={className}
      style={iframeStyle}
      frameBorder="0"
      allowFullScreen
    />
  );
};

export default CountdownTimer;

// Uso em páginas
import CountdownTimer from '../components/CountdownTimer';

const EventPage = () => (
  <div>
    <h1>Lançamento do Produto</h1>
    <CountdownTimer
      timerId="YOUR-TIMER-ID"
      height="500"
      title="Contagem Regressiva do Lançamento"
    />
  </div>
);

Eleventy (11ty)

// _includes/timer.njk
<div class="eleventy-timer">
  {% if heading %}
  <h2>{{ heading }}</h2>
  {% endif %}

  <iframe
    src="https://gettickr.app/r/#{{ timerId }}"
    width="{{ width or '100%' }}"
    height="{{ height or '400' }}"
    frameborder="0"
    style="border: none; max-width: 100%;"
    title="{{ title or 'Temporizador de Contagem Regressiva' }}"
  >
  </iframe>
</div>

<!-- Uso em templates -->
{% include "timer.njk", { timerId: "YOUR-TIMER-ID", heading: "Contagem
Regressiva do Evento", height: "500" } %}

Tip

Crie componentes/includes reutilizáveis de temporizador no seu gerador de site estático para manter a consistência e simplificar a gestão de temporizadores em todo o site!

Integração com Frameworks

Componente React

import React, { useEffect, useRef, useState } from 'react';

const TickrTimer = ({
  timerId,
  width = '100%',
  height = '400',
  title = 'Temporizador de Contagem Regressiva',
  className = '',
  loading = 'lazy',
  onLoad,
  onError
}) => {
  const iframeRef = useRef(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [hasError, setHasError] = useState(false);

  useEffect(() => {
    const iframe = iframeRef.current;
    if (!iframe) return;

    const handleLoad = () => {
      setIsLoaded(true);
      onLoad?.();
    };

    const handleError = () => {
      setHasError(true);
      onError?.();
    };

    iframe.addEventListener('load', handleLoad);
    iframe.addEventListener('error', handleError);

    return () => {
      iframe.removeEventListener('load', handleLoad);
      iframe.removeEventListener('error', handleError);
    };
  }, [onLoad, onError]);

  if (!timerId) {
    console.error('TickrTimer: a propriedade timerId é obrigatória');
    return <div>Erro: ID do temporizador não fornecido</div>;
  }

  return (
    <div className={`tickr-timer-wrapper ${className}`}>
      {!isLoaded && !hasError && (
        <div className="timer-loading">Carregando temporizador...</div>
      )}
      {hasError && (
        <div className="timer-error">Falha ao carregar temporizador</div>
      )}
      <iframe
        ref={iframeRef}
        src={`https://gettickr.app/r/#${timerId}`}
        width={width}
        height={height}
        title={title}
        loading={loading}
        style={{ border: 'none', maxWidth: '100%' }}
        frameBorder="0"
        allowFullScreen
      />
    </div>
  );
};

export default TickrTimer;

// Uso
import TickrTimer from './components/TickrTimer';

function App() {
  return (
    <div>
      <h1>Lançamento do Produto</h1>
      <TickrTimer
        timerId="YOUR-TIMER-ID"
        height="500"
        className="launch-timer"
        onLoad={() => console.log('Temporizador carregado')}
      />
    </div>
  );
}

Componente Vue 3

<!-- CountdownTimer.vue -->
<template>
  <div class="countdown-timer-wrapper" :class="className">
    <div v-if="loading && !loaded" class="timer-loading">
      Carregando temporizador...
    </div>
    <div v-if="error" class="timer-error">
      Falha ao carregar temporizador
    </div>
    <iframe
      ref="iframeRef"
      :src="`https://gettickr.app/r/#${timerId}`"
      :width="width"
      :height="height"
      :title="title"
      :loading="loadingAttr"
      frameborder="0"
      allowfullscreen
      style="border: none; max-width: 100%;"
      @load="handleLoad"
      @error="handleError"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const props = defineProps({
  timerId: {
    type: String,
    required: true
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '400'
  },
  title: {
    type: String,
    default: 'Temporizador de Contagem Regressiva'
  },
  className: {
    type: String,
    default: ''
  },
  loadingAttr: {
    type: String,
    default: 'lazy'
  }
});

const emit = defineEmits(['load', 'error']);

const iframeRef = ref(null);
const loaded = ref(false);
const error = ref(false);
const loading = ref(true);

const handleLoad = () => {
  loaded.value = true;
  loading.value = false;
  emit('load');
};

const handleError = () => {
  error.value = true;
  loading.value = false;
  emit('error');
};
</script>

<style scoped>
.countdown-timer-wrapper {
  position: relative;
}

.timer-loading,
.timer-error {
  padding: 20px;
  text-align: center;
  background: #f0f0f0;
  border-radius: 8px;
}

.timer-error {
  color: #e74c3c;
}
</style>

<!-- Uso -->
<template>
  <div>
    <h1>Contagem Regressiva do Evento</h1>
    <CountdownTimer
      timer-id="YOUR-TIMER-ID"
      height="500"
      @load="onTimerLoad"
    />
  </div>
</template>

<script setup>
import CountdownTimer from './components/CountdownTimer.vue';

const onTimerLoad = () => {
  console.log('Temporizador carregado com sucesso');
};
</script>

Componente Angular

// countdown-timer.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-countdown-timer',
  template: `
    <div class="countdown-timer-wrapper" [ngClass]="className">
      <div *ngIf="loading" class="timer-loading">Carregando temporizador...</div>
      <div *ngIf="error" class="timer-error">Falha ao carregar temporizador</div>
      <iframe
        [src]="safeUrl"
        [width]="width"
        [height]="height"
        [title]="title"
        [attr.loading]="loadingAttr"
        frameborder="0"
        allowfullscreen
        (load)="onLoad()"
        (error)="onError()"
        style="border: none; max-width: 100%;">
      </iframe>
    </div>
  `,
  styles: [`
    .countdown-timer-wrapper {
      position: relative;
    }
    .timer-loading, .timer-error {
      padding: 20px;
      text-align: center;
      background: #f0f0f0;
      border-radius: 8px;
    }
    .timer-error {
      color: #e74c3c;
    }
  `]
})
export class CountdownTimerComponent implements OnInit {
  @Input() timerId!: string;
  @Input() width: string = '100%';
  @Input() height: string = '400';
  @Input() title: string = 'Temporizador de Contagem Regressiva';
  @Input() className: string = '';
  @Input() loadingAttr: string = 'lazy';

  safeUrl!: SafeResourceUrl;
  loading: boolean = true;
  error: boolean = false;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
    if (!this.timerId) {
      console.error('CountdownTimer: timerId é obrigatório');
      this.error = true;
      this.loading = false;
      return;
    }

    const url = `https://gettickr.app/r/#${this.timerId}`;
    this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

  onLoad() {
    this.loading = false;
  }

  onError() {
    this.loading = false;
    this.error = true;
  }
}

// Uso em templates
<app-countdown-timer
  timerId="YOUR-TIMER-ID"
  height="500"
  className="launch-timer">
</app-countdown-timer>

Information

Os componentes de framework proporcionam melhor integração com o ciclo de vida da sua aplicação, gestão de estado, e podem incluir estados de carregamento e tratamento de erros.

Otimização de Desempenho

Carregamento Lazy

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

Pré-carregar Temporizadores Críticos

<!-- Na seção <head> -->
<link rel="preconnect" href="https://gettickr.app" />
<link rel="dns-prefetch" href="https://gettickr.app" />

Script de Carregamento Assíncrono

<div id="timer-placeholder" data-timer-id="YOUR-TIMER-ID"></div>

<script>
  (function () {
    function loadTimer() {
      const placeholder = document.getElementById('timer-placeholder');
      const timerId = placeholder.dataset.timerId;

      if (!placeholder || !timerId) return;

      const iframe = document.createElement('iframe');
      iframe.src = `https://gettickr.app/r/#${timerId}`;
      iframe.width = '100%';
      iframe.height = '400';
      iframe.style.border = 'none';
      iframe.title = 'Temporizador de Contagem Regressiva';

      placeholder.appendChild(iframe);
    }

    // Carregar após a página estar totalmente carregada
    if (document.readyState === 'complete') {
      loadTimer();
    } else {
      window.addEventListener('load', loadTimer);
    }
  })();
</script>

Melhores Práticas de Desempenho

Prática	Implementação	Benefício
Carregamento Lazy	Adicionar atributo `loading="lazy"`	Carregamento inicial mais rápido
DNS Prefetch	`<link rel="dns-prefetch">`	Conexão mais rápida
Preconnect	`<link rel="preconnect">`	Carregamento de recursos mais rápido
JavaScript Assíncrono	Carregar após evento de carregamento da página	Carregamento não bloqueante
Intersection Observer	Carregar ao rolar para a vista	Carregamento diferido
Minimizar Contagem de Temporizadores	Máximo de 1-3 temporizadores por página	Melhor desempenho
Dimensões Apropriadas	Corresponder ao tamanho do design	Reduzir renderização desnecessária
Remover Atributos Não Usados	Remover HTML desnecessário	DOM mais pequeno

Melhores Práticas de Segurança

Content Security Policy (CSP)

<!-- Adicionar ao <head> ou definir como cabeçalho HTTP -->
<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; frame-src https://gettickr.app; script-src 'self';"
/>

Atributo Sandbox (se necessário)

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="100%"
  height="400"
  sandbox="allow-scripts allow-same-origin"
  title="Temporizador de Contagem Regressiva"
>
</iframe>

Warning

Use o atributo sandbox apenas se especificamente exigido pela sua política de segurança. Uma configuração incorreta pode quebrar a funcionalidade do temporizador.

Apenas HTTPS

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="100%"
  height="400"
  title="Temporizador de Contagem Regressiva"
>
</iframe>

Information

Use sempre HTTPS (https://) nos URLs do temporizador, nunca HTTP. Os navegadores modernos bloqueiam conteúdo misto (iFrames HTTP em páginas HTTPS).

Resolução de Problemas

Problemas Comuns

Problema	Causa Possível	Solução
Temporizador não aparece	URL incorreto	Verificar ID e URL do temporizador
iFrame preto/vazio	Problema de rede	Verificar console do navegador para erros
Content Security Policy	CSP bloqueando iframe	Adicionar gettickr.app a frame-src
Aviso de conteúdo misto	HTTP em página HTTPS	Usar https:// no URL do temporizador
Temporizador muito pequeno	Tamanho do container muito pequeno	Ajustar largura/altura do container
Conteúdo sobreposto	Conflitos CSS	Usar isolamento ou z-index
Carregamento lento	Sem carregamento lazy	Adicionar atributo `loading="lazy"`
Erros JavaScript	Erro de sintaxe no código	Verificar console do navegador, validar JS

Próximos Passos

Integração iFrame - Documentação básica de iFrame
Integração WordPress - Se também usar WordPress
Integração Shopify - Para sites de e-commerce

Tip

A integração HTML personalizada oferece máxima flexibilidade. Comece de forma simples e melhore progressivamente com base nas suas necessidades!

Websites HTML Personalizados

Information

Visão Geral de Início Rápido

Implementação	Dificuldade	Ideal Para	Tempo Necessário
HTML Básico	Fácil	Sites estáticos	2 minutos
CSS Responsivo	Fácil	Sites mobile-friendly	5 minutos
JavaScript	Médio	Carregamento dinâmico	10 minutos
Geradores Estáticos	Médio	Sites JAMstack	5 minutos
React/Vue	Médio	SPAs, aplicações modernas	10 minutos
Avançado	Difícil	Integrações complexas	30+ minutos

Tip

Comece com a integração HTML básica e melhore progressivamente com base nas suas necessidades específicas e na arquitetura do site!

Integração HTML Básica

O método de integração mais simples usa um elemento iFrame HTML padrão.

Implementação Mínima

<!DOCTYPE html>
<html lang="pt">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contagem Regressiva do Evento</title>
  </head>
  <body>
    <h1>Contagem Regressiva do Lançamento do Produto</h1>

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

    <p>Não perca o nosso maior lançamento do ano!</p>
  </body>
</html>

Referência de Atributos HTML

Atributo	Obrigatório	Valor de Exemplo	Finalidade
`src`	✅ Sim	`https://gettickr.app/r/#abc123`	URL do temporizador
`width`	✅ Sim	`800` ou `100%`	Largura do iFrame
`height`	✅ Sim	`400`	Altura do iFrame
`frameborder`	⬜ Não	`0`	Remover borda (legado)
`style`	⬜ Não	`border: none;`	Estilização CSS
`title`	⬜ Sim	`"Temporizador de Contagem"`	Descrição de acessibilidade
`aria-label`	⬜ Não	`"Tempo restante: 3 horas"`	Descrição para leitores de tela
`loading`	⬜ Não	`lazy`	Carregamento lazy
`allow`	⬜ Não	`fullscreen`	Permissões de funcionalidades
`sandbox`	⬜ Não	`allow-scripts allow-same-origin`	Restrições de segurança
`referrerpolicy`	⬜ Não	`no-referrer-when-downgrade`	Política de cabeçalho de referrer

Estilização CSS e Layout

Temporizador Centralizado

<style>
  .timer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
  }

  .timer-container iframe {
    display: block;
    margin: 0 auto;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }
</style>

<div class="timer-container">
  <h2>Contagem Regressiva do Evento</h2>
  <iframe
    src="https://gettickr.app/r/#YOUR-TIMER-ID"
    width="100%"
    height="400"
    title="Temporizador do Evento"
  >
  </iframe>
</div>

Layout em Grid com Múltiplos Temporizadores

<style>
  .timer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
  }

  .timer-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .timer-card h3 {
    margin-top: 0;
    color: #333;
  }

  .timer-card iframe {
    width: 100%;
    border: none;
    border-radius: 8px;
  }
</style>

<div class="timer-grid">
  <div class="timer-card">
    <h3>Evento 1: Lançamento do Produto</h3>
    <iframe
      src="https://gettickr.app/r/#TIMER-1"
      height="300"
      title="Temporizador do Evento 1"
    ></iframe>
  </div>

  <div class="timer-card">
    <h3>Evento 2: Promoção Relâmpago</h3>
    <iframe
      src="https://gettickr.app/r/#TIMER-2"
      height="300"
      title="Temporizador do Evento 2"
    ></iframe>
  </div>

  <div class="timer-card">
    <h3>Evento 3: Webinar</h3>
    <iframe
      src="https://gettickr.app/r/#TIMER-3"
      height="300"
      title="Temporizador do Evento 3"
    ></iframe>
  </div>
</div>

Temporizador na Seção Hero

<style>
  .hero-countdown {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 80px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .hero-countdown::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('/pattern.svg') repeat;
    opacity: 0.1;
  }

  .hero-countdown .content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
  }

  .hero-countdown h1 {
    font-size: 56px;
    margin: 0 0 20px 0;
    font-weight: 700;
  }

  .hero-countdown .subtitle {
    font-size: 24px;
    margin: 0 0 40px 0;
    opacity: 0.95;
  }

  .hero-countdown iframe {
    border: none;
    background: transparent;
    max-width: 100%;
  }
</style>

<section class="hero-countdown">
  <div class="content">
    <h1>🎉 Promoção de Inauguração</h1>
    <p class="subtitle">Até 70% de Desconto - Não Perca!</p>
    <iframe
      src="https://gettickr.app/r/#YOUR-TIMER-ID"
      width="100%"
      height="500"
      title="Contagem Regressiva da Promoção"
    >
    </iframe>
  </div>
</section>

Geradores de Sites Estáticos

Jekyll

<!-- _includes/countdown-timer.html -->
<div class="countdown-timer-wrapper">
  {% if include.title %}
  <h2>{{ include.title }}</h2>
  {% endif %}

  <iframe
    src="https://gettickr.app/r/#{{ include.timer_id }}"
    width="{{ include.width | default: '100%' }}"
    height="{{ include.height | default: '400' }}"
    frameborder="0"
    style="border: none; max-width: 100%;"
    title="{{ include.title | default: 'Temporizador de Contagem Regressiva' }}"
  >
  </iframe>

  {% if include.caption %}
  <p class="timer-caption">{{ include.caption }}</p>
  {% endif %}
</div>

<!-- Uso em páginas/posts -->
{% include countdown-timer.html timer_id="YOUR-TIMER-ID" title="Contagem
Regressiva do Evento" height="500" caption="Não perca!" %}

Hugo

<!-- layouts/shortcodes/timer.html -->
{{ $timerId := .Get "id" }} {{ $width := .Get "width" | default "100%" }} {{
$height := .Get "height" | default "400" }} {{ $title := .Get "title" | default
"Temporizador de Contagem Regressiva" }}

<div class="hugo-timer-container">
  {{ if .Get "heading" }}
  <h2>{{ .Get "heading" }}</h2>
  {{ end }}

  <iframe
    src="https://gettickr.app/r/#{{ $timerId }}"
    width="{{ $width }}"
    height="{{ $height }}"
    frameborder="0"
    style="border: none; max-width: 100%;"
    title="{{ $title }}"
  >
  </iframe>
</div>

<!-- Uso em arquivos de conteúdo -->
{{< timer id="YOUR-TIMER-ID" height="500" heading="Promoção Acaba Em Breve!" >}}

Gatsby (React)

// src/components/CountdownTimer.js
import React from 'react';

const CountdownTimer = ({
  timerId,
  width = '100%',
  height = '400',
  title = 'Temporizador de Contagem Regressiva',
  className = '',
  style = {}
}) => {
  if (!timerId) {
    console.error('CountdownTimer: a propriedade timerId é obrigatória');
    return null;
  }

  const iframeStyle = {
    border: 'none',
    maxWidth: '100%',
    ...style
  };

  return (
    <iframe
      src={`https://gettickr.app/r/#${timerId}`}
      width={width}
      height={height}
      title={title}
      className={className}
      style={iframeStyle}
      frameBorder="0"
      allowFullScreen
    />
  );
};

export default CountdownTimer;

// Uso em páginas
import CountdownTimer from '../components/CountdownTimer';

const EventPage = () => (
  <div>
    <h1>Lançamento do Produto</h1>
    <CountdownTimer
      timerId="YOUR-TIMER-ID"
      height="500"
      title="Contagem Regressiva do Lançamento"
    />
  </div>
);

Eleventy (11ty)

// _includes/timer.njk
<div class="eleventy-timer">
  {% if heading %}
  <h2>{{ heading }}</h2>
  {% endif %}

  <iframe
    src="https://gettickr.app/r/#{{ timerId }}"
    width="{{ width or '100%' }}"
    height="{{ height or '400' }}"
    frameborder="0"
    style="border: none; max-width: 100%;"
    title="{{ title or 'Temporizador de Contagem Regressiva' }}"
  >
  </iframe>
</div>

<!-- Uso em templates -->
{% include "timer.njk", { timerId: "YOUR-TIMER-ID", heading: "Contagem
Regressiva do Evento", height: "500" } %}

Tip

Crie componentes/includes reutilizáveis de temporizador no seu gerador de site estático para manter a consistência e simplificar a gestão de temporizadores em todo o site!

Integração com Frameworks

Componente React

import React, { useEffect, useRef, useState } from 'react';

const TickrTimer = ({
  timerId,
  width = '100%',
  height = '400',
  title = 'Temporizador de Contagem Regressiva',
  className = '',
  loading = 'lazy',
  onLoad,
  onError
}) => {
  const iframeRef = useRef(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [hasError, setHasError] = useState(false);

  useEffect(() => {
    const iframe = iframeRef.current;
    if (!iframe) return;

    const handleLoad = () => {
      setIsLoaded(true);
      onLoad?.();
    };

    const handleError = () => {
      setHasError(true);
      onError?.();
    };

    iframe.addEventListener('load', handleLoad);
    iframe.addEventListener('error', handleError);

    return () => {
      iframe.removeEventListener('load', handleLoad);
      iframe.removeEventListener('error', handleError);
    };
  }, [onLoad, onError]);

  if (!timerId) {
    console.error('TickrTimer: a propriedade timerId é obrigatória');
    return <div>Erro: ID do temporizador não fornecido</div>;
  }

  return (
    <div className={`tickr-timer-wrapper ${className}`}>
      {!isLoaded && !hasError && (
        <div className="timer-loading">Carregando temporizador...</div>
      )}
      {hasError && (
        <div className="timer-error">Falha ao carregar temporizador</div>
      )}
      <iframe
        ref={iframeRef}
        src={`https://gettickr.app/r/#${timerId}`}
        width={width}
        height={height}
        title={title}
        loading={loading}
        style={{ border: 'none', maxWidth: '100%' }}
        frameBorder="0"
        allowFullScreen
      />
    </div>
  );
};

export default TickrTimer;

// Uso
import TickrTimer from './components/TickrTimer';

function App() {
  return (
    <div>
      <h1>Lançamento do Produto</h1>
      <TickrTimer
        timerId="YOUR-TIMER-ID"
        height="500"
        className="launch-timer"
        onLoad={() => console.log('Temporizador carregado')}
      />
    </div>
  );
}

Componente Vue 3

<!-- CountdownTimer.vue -->
<template>
  <div class="countdown-timer-wrapper" :class="className">
    <div v-if="loading && !loaded" class="timer-loading">
      Carregando temporizador...
    </div>
    <div v-if="error" class="timer-error">
      Falha ao carregar temporizador
    </div>
    <iframe
      ref="iframeRef"
      :src="`https://gettickr.app/r/#${timerId}`"
      :width="width"
      :height="height"
      :title="title"
      :loading="loadingAttr"
      frameborder="0"
      allowfullscreen
      style="border: none; max-width: 100%;"
      @load="handleLoad"
      @error="handleError"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const props = defineProps({
  timerId: {
    type: String,
    required: true
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '400'
  },
  title: {
    type: String,
    default: 'Temporizador de Contagem Regressiva'
  },
  className: {
    type: String,
    default: ''
  },
  loadingAttr: {
    type: String,
    default: 'lazy'
  }
});

const emit = defineEmits(['load', 'error']);

const iframeRef = ref(null);
const loaded = ref(false);
const error = ref(false);
const loading = ref(true);

const handleLoad = () => {
  loaded.value = true;
  loading.value = false;
  emit('load');
};

const handleError = () => {
  error.value = true;
  loading.value = false;
  emit('error');
};
</script>

<style scoped>
.countdown-timer-wrapper {
  position: relative;
}

.timer-loading,
.timer-error {
  padding: 20px;
  text-align: center;
  background: #f0f0f0;
  border-radius: 8px;
}

.timer-error {
  color: #e74c3c;
}
</style>

<!-- Uso -->
<template>
  <div>
    <h1>Contagem Regressiva do Evento</h1>
    <CountdownTimer
      timer-id="YOUR-TIMER-ID"
      height="500"
      @load="onTimerLoad"
    />
  </div>
</template>

<script setup>
import CountdownTimer from './components/CountdownTimer.vue';

const onTimerLoad = () => {
  console.log('Temporizador carregado com sucesso');
};
</script>

Componente Angular

// countdown-timer.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-countdown-timer',
  template: `
    <div class="countdown-timer-wrapper" [ngClass]="className">
      <div *ngIf="loading" class="timer-loading">Carregando temporizador...</div>
      <div *ngIf="error" class="timer-error">Falha ao carregar temporizador</div>
      <iframe
        [src]="safeUrl"
        [width]="width"
        [height]="height"
        [title]="title"
        [attr.loading]="loadingAttr"
        frameborder="0"
        allowfullscreen
        (load)="onLoad()"
        (error)="onError()"
        style="border: none; max-width: 100%;">
      </iframe>
    </div>
  `,
  styles: [`
    .countdown-timer-wrapper {
      position: relative;
    }
    .timer-loading, .timer-error {
      padding: 20px;
      text-align: center;
      background: #f0f0f0;
      border-radius: 8px;
    }
    .timer-error {
      color: #e74c3c;
    }
  `]
})
export class CountdownTimerComponent implements OnInit {
  @Input() timerId!: string;
  @Input() width: string = '100%';
  @Input() height: string = '400';
  @Input() title: string = 'Temporizador de Contagem Regressiva';
  @Input() className: string = '';
  @Input() loadingAttr: string = 'lazy';

  safeUrl!: SafeResourceUrl;
  loading: boolean = true;
  error: boolean = false;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
    if (!this.timerId) {
      console.error('CountdownTimer: timerId é obrigatório');
      this.error = true;
      this.loading = false;
      return;
    }

    const url = `https://gettickr.app/r/#${this.timerId}`;
    this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

  onLoad() {
    this.loading = false;
  }

  onError() {
    this.loading = false;
    this.error = true;
  }
}

// Uso em templates
<app-countdown-timer
  timerId="YOUR-TIMER-ID"
  height="500"
  className="launch-timer">
</app-countdown-timer>

Information

Os componentes de framework proporcionam melhor integração com o ciclo de vida da sua aplicação, gestão de estado, e podem incluir estados de carregamento e tratamento de erros.

Otimização de Desempenho

Carregamento Lazy

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

Pré-carregar Temporizadores Críticos

<!-- Na seção <head> -->
<link rel="preconnect" href="https://gettickr.app" />
<link rel="dns-prefetch" href="https://gettickr.app" />

Script de Carregamento Assíncrono

<div id="timer-placeholder" data-timer-id="YOUR-TIMER-ID"></div>

<script>
  (function () {
    function loadTimer() {
      const placeholder = document.getElementById('timer-placeholder');
      const timerId = placeholder.dataset.timerId;

      if (!placeholder || !timerId) return;

      const iframe = document.createElement('iframe');
      iframe.src = `https://gettickr.app/r/#${timerId}`;
      iframe.width = '100%';
      iframe.height = '400';
      iframe.style.border = 'none';
      iframe.title = 'Temporizador de Contagem Regressiva';

      placeholder.appendChild(iframe);
    }

    // Carregar após a página estar totalmente carregada
    if (document.readyState === 'complete') {
      loadTimer();
    } else {
      window.addEventListener('load', loadTimer);
    }
  })();
</script>

Melhores Práticas de Desempenho

Prática	Implementação	Benefício
Carregamento Lazy	Adicionar atributo `loading="lazy"`	Carregamento inicial mais rápido
DNS Prefetch	`<link rel="dns-prefetch">`	Conexão mais rápida
Preconnect	`<link rel="preconnect">`	Carregamento de recursos mais rápido
JavaScript Assíncrono	Carregar após evento de carregamento da página	Carregamento não bloqueante
Intersection Observer	Carregar ao rolar para a vista	Carregamento diferido
Minimizar Contagem de Temporizadores	Máximo de 1-3 temporizadores por página	Melhor desempenho
Dimensões Apropriadas	Corresponder ao tamanho do design	Reduzir renderização desnecessária
Remover Atributos Não Usados	Remover HTML desnecessário	DOM mais pequeno

Melhores Práticas de Segurança

Content Security Policy (CSP)

<!-- Adicionar ao <head> ou definir como cabeçalho HTTP -->
<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; frame-src https://gettickr.app; script-src 'self';"
/>

Atributo Sandbox (se necessário)

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="100%"
  height="400"
  sandbox="allow-scripts allow-same-origin"
  title="Temporizador de Contagem Regressiva"
>
</iframe>

Warning

Use o atributo sandbox apenas se especificamente exigido pela sua política de segurança. Uma configuração incorreta pode quebrar a funcionalidade do temporizador.

Apenas HTTPS

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="100%"
  height="400"
  title="Temporizador de Contagem Regressiva"
>
</iframe>

Information

Use sempre HTTPS (https://) nos URLs do temporizador, nunca HTTP. Os navegadores modernos bloqueiam conteúdo misto (iFrames HTTP em páginas HTTPS).

Resolução de Problemas

Problemas Comuns

Problema	Causa Possível	Solução
Temporizador não aparece	URL incorreto	Verificar ID e URL do temporizador
iFrame preto/vazio	Problema de rede	Verificar console do navegador para erros
Content Security Policy	CSP bloqueando iframe	Adicionar gettickr.app a frame-src
Aviso de conteúdo misto	HTTP em página HTTPS	Usar https:// no URL do temporizador
Temporizador muito pequeno	Tamanho do container muito pequeno	Ajustar largura/altura do container
Conteúdo sobreposto	Conflitos CSS	Usar isolamento ou z-index
Carregamento lento	Sem carregamento lazy	Adicionar atributo `loading="lazy"`
Erros JavaScript	Erro de sintaxe no código	Verificar console do navegador, validar JS

Próximos Passos

Integração iFrame - Documentação básica de iFrame
Integração WordPress - Se também usar WordPress
Integração Shopify - Para sites de e-commerce

Tip

A integração HTML personalizada oferece máxima flexibilidade. Comece de forma simples e melhore progressivamente com base nas suas necessidades!