Sitios web HTML personalizados

Information

Los sitios web codificados a medida ofrecen control completo sobre la integración del temporizador. Ya sea que estés trabajando con HTML puro, usando un generador de sitios estáticos o construyendo con un framework, ¡esta guía cubre todo lo que necesitas!

Los sitios web codificados a medida ofrecen flexibilidad ilimitada para integrar temporizadores de gettickr.app. Esta guía está diseñada para desarrolladores y cubre métodos de integración desde HTML básico hasta implementaciones avanzadas con frameworks.

Resumen de inicio rápido

Implementación	Dificultad	Mejor para	Tiempo requerido
HTML básico	Fácil	Sitios estáticos	2 minutos
CSS responsive	Fácil	Sitios adaptables a móviles	5 minutos
JavaScript	Media	Carga dinámica	10 minutos
Generadores estáticos	Media	Sitios JAMstack	5 minutos
React/Vue	Media	SPAs, aplicaciones modernas	10 minutos
Avanzado	Difícil	Integraciones complejas	30+ minutos

Tip

¡Comienza con la integración HTML básica y mejora progresivamente según tus necesidades específicas y la arquitectura de tu sitio!

Integración HTML básica

El método de integración más simple utiliza un elemento iFrame HTML estándar.

Implementación mínima

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cuenta regresiva del evento</title>
  </head>
  <body>
    <h1>Cuenta regresiva del lanzamiento del producto</h1>

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

    <p>¡No te pierdas nuestro mayor lanzamiento del año!</p>
  </body>
</html>

Referencia de atributos HTML

Atributo	Requerido	Valor de ejemplo	Propósito
`src`	✅ Sí	`https://gettickr.app/r/#abc123`	URL del temporizador
`width`	✅ Sí	`800` o `100%`	Ancho del iFrame
`height`	✅ Sí	`400`	Altura del iFrame
`frameborder`	⬜ No	`0`	Eliminar borde (legacy)
`style`	⬜ No	`border: none;`	Estilos CSS
`title`	⬜ Sí	`"Temporizador de cuenta regresiva"`	Descripción de accesibilidad
`aria-label`	⬜ No	`"Tiempo restante: 3 horas"`	Descripción para lectores de pantalla
`loading`	⬜ No	`lazy`	Carga diferida
`allow`	⬜ No	`fullscreen`	Permisos de características
`sandbox`	⬜ No	`allow-scripts allow-same-origin`	Restricciones de seguridad
`referrerpolicy`	⬜ No	`no-referrer-when-downgrade`	Política de encabezado referrer

Estilos CSS y diseño

Temporizador centrado

<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>Cuenta regresiva del evento</h2>
  <iframe
    src="https://gettickr.app/r/#YOUR-TIMER-ID"
    width="100%"
    height="400"
    title="Temporizador del evento"
  >
  </iframe>
</div>

Diseño de cuadrícula con múltiples 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: Lanzamiento del producto</h3>
    <iframe
      src="https://gettickr.app/r/#TIMER-1"
      height="300"
      title="Temporizador del evento 1"
    ></iframe>
  </div>

  <div class="timer-card">
    <h3>Evento 2: Venta flash</h3>
    <iframe
      src="https://gettickr.app/r/#TIMER-2"
      height="300"
      title="Temporizador del 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 del evento 3"
    ></iframe>
  </div>
</div>

Temporizador en sección 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>🎉 Gran venta de inauguración</h1>
    <p class="subtitle">¡Hasta 70% de descuento - No te lo pierdas!</p>
    <iframe
      src="https://gettickr.app/r/#YOUR-TIMER-ID"
      width="100%"
      height="500"
      title="Cuenta regresiva de la venta"
    >
    </iframe>
  </div>
</section>

Generadores de sitios 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 cuenta regresiva' }}"
  >
  </iframe>

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

<!-- Uso en páginas/posts -->
{% include countdown-timer.html timer_id="YOUR-TIMER-ID" title="Cuenta regresiva
del evento" height="500" caption="¡No te lo pierdas!" %}

Hugo

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

<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 en archivos de contenido -->
{{< timer id="YOUR-TIMER-ID" height="500" heading="¡La venta termina pronto!"
>}}

Gatsby (React)

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

const CountdownTimer = ({
  timerId,
  width = '100%',
  height = '400',
  title = 'Temporizador de cuenta regresiva',
  className = '',
  style = {}
}) => {
  if (!timerId) {
    console.error('CountdownTimer: la prop timerId es requerida');
    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 en páginas
import CountdownTimer from '../components/CountdownTimer';

const EventPage = () => (
  <div>
    <h1>Lanzamiento del producto</h1>
    <CountdownTimer
      timerId="YOUR-TIMER-ID"
      height="500"
      title="Cuenta regresiva del lanzamiento"
    />
  </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 cuenta regresiva' }}"
  >
  </iframe>
</div>

<!-- Uso en plantillas -->
{% include "timer.njk", { timerId: "YOUR-TIMER-ID", heading: "Cuenta regresiva
del evento", height: "500" } %}

Tip

¡Crea componentes/includes reutilizables de temporizadores en tu generador de sitios estáticos para mantener la consistencia y simplificar la gestión de temporizadores en todo tu sitio!

Integración con frameworks

Componente React

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

const TickrTimer = ({
  timerId,
  width = '100%',
  height = '400',
  title = 'Temporizador de cuenta regresiva',
  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: la prop timerId es requerida');
    return <div>Error: ID de temporizador no proporcionado</div>;
  }

  return (
    <div className={`tickr-timer-wrapper ${className}`}>
      {!isLoaded && !hasError && (
        <div className="timer-loading">Cargando temporizador...</div>
      )}
      {hasError && (
        <div className="timer-error">Error al cargar el 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>Lanzamiento del producto</h1>
      <TickrTimer
        timerId="YOUR-TIMER-ID"
        height="500"
        className="launch-timer"
        onLoad={() => console.log('Temporizador cargado')}
      />
    </div>
  );
}

Componente Vue 3

<!-- CountdownTimer.vue -->
<template>
  <div class="countdown-timer-wrapper" :class="className">
    <div v-if="loading && !loaded" class="timer-loading">
      Cargando temporizador...
    </div>
    <div v-if="error" class="timer-error">
      Error al cargar el 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 cuenta regresiva'
  },
  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>Cuenta regresiva del 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 cargado con éxito');
};
</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">Cargando temporizador...</div>
      <div *ngIf="error" class="timer-error">Error al cargar el 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 cuenta regresiva';
  @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 es requerido');
      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 en plantillas
<app-countdown-timer
  timerId="YOUR-TIMER-ID"
  height="500"
  className="launch-timer">
</app-countdown-timer>

Information

Los componentes de framework proporcionan una mejor integración con el ciclo de vida de tu aplicación, gestión de estado, y pueden incluir estados de carga y manejo de errores.

Optimización del rendimiento

Carga diferida

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

Precargar temporizadores críticos

<!-- En la sección <head> -->
<link rel="preconnect" href="https://gettickr.app" />
<link rel="dns-prefetch" href="https://gettickr.app" />

Script de carga asíncrona

<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 cuenta regresiva';

      placeholder.appendChild(iframe);
    }

    // Cargar después de que la página esté completamente cargada
    if (document.readyState === 'complete') {
      loadTimer();
    } else {
      window.addEventListener('load', loadTimer);
    }
  })();
</script>

Mejores prácticas de rendimiento

Práctica	Implementación	Beneficio
Carga diferida	Añadir atributo `loading="lazy"`	Carga inicial de página más rápida
DNS Prefetch	`<link rel="dns-prefetch">`	Conexión más rápida
Preconnect	`<link rel="preconnect">`	Carga de recursos más rápida
JavaScript asíncrono	Cargar después del evento de carga de página	Carga no bloqueante
Intersection Observer	Cargar al desplazarse hacia la vista	Carga diferida
Minimizar cantidad de temporizadores	Máximo 1-3 temporizadores por página	Mejor rendimiento
Dimensiones apropiadas	Coincidir con el tamaño del diseño	Reducir renderizado innecesario
Eliminar atributos no utilizados	Eliminar HTML innecesario	DOM más pequeño

Mejores prácticas de seguridad

Content Security Policy (CSP)

<!-- Añadir a <head> o establecer como encabezado HTTP -->
<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; frame-src https://gettickr.app; script-src 'self';"
/>

Atributo sandbox (si es necesario)

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

Warning

Solo usa el atributo sandbox si es específicamente requerido por tu política de seguridad. Una configuración incorrecta puede romper la funcionalidad del temporizador.

Solo HTTPS

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

Information

Siempre usa HTTPS (https://) en las URLs de los temporizadores, nunca HTTP. Los navegadores modernos bloquean contenido mixto (iFrames HTTP en páginas HTTPS).

Solución de problemas

Problemas comunes

Problema	Causa posible	Solución
Temporizador no aparece	URL incorrecta	Verificar ID y URL del temporizador
iFrame negro/en blanco	Problema de red	Verificar errores en la consola del navegador
Content Security Policy	CSP bloqueando iframe	Añadir gettickr.app a frame-src
Advertencia de contenido mixto	HTTP en página HTTPS	Usar https:// en la URL del temporizador
Temporizador muy pequeño	Tamaño de contenedor muy pequeño	Ajustar ancho/alto del contenedor
Contenido superpuesto	Conflictos CSS	Usar aislamiento o z-index
Carga lenta	Sin carga diferida	Añadir atributo `loading="lazy"`
Errores JavaScript	Error de sintaxis en el código	Verificar consola del navegador, validar JS

Próximos pasos

Integración iFrame - Documentación básica de iFrame
Integración WordPress - Si también usas WordPress
Integración Shopify - Para sitios de comercio electrónico

Tip

La integración HTML personalizada ofrece máxima flexibilidad. ¡Comienza simple y mejora progresivamente según tus necesidades!

Sitios web HTML personalizados

Information

Resumen de inicio rápido

Implementación	Dificultad	Mejor para	Tiempo requerido
HTML básico	Fácil	Sitios estáticos	2 minutos
CSS responsive	Fácil	Sitios adaptables a móviles	5 minutos
JavaScript	Media	Carga dinámica	10 minutos
Generadores estáticos	Media	Sitios JAMstack	5 minutos
React/Vue	Media	SPAs, aplicaciones modernas	10 minutos
Avanzado	Difícil	Integraciones complejas	30+ minutos

Tip

¡Comienza con la integración HTML básica y mejora progresivamente según tus necesidades específicas y la arquitectura de tu sitio!

Integración HTML básica

El método de integración más simple utiliza un elemento iFrame HTML estándar.

Implementación mínima

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cuenta regresiva del evento</title>
  </head>
  <body>
    <h1>Cuenta regresiva del lanzamiento del producto</h1>

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

    <p>¡No te pierdas nuestro mayor lanzamiento del año!</p>
  </body>
</html>

Referencia de atributos HTML

Atributo	Requerido	Valor de ejemplo	Propósito
`src`	✅ Sí	`https://gettickr.app/r/#abc123`	URL del temporizador
`width`	✅ Sí	`800` o `100%`	Ancho del iFrame
`height`	✅ Sí	`400`	Altura del iFrame
`frameborder`	⬜ No	`0`	Eliminar borde (legacy)
`style`	⬜ No	`border: none;`	Estilos CSS
`title`	⬜ Sí	`"Temporizador de cuenta regresiva"`	Descripción de accesibilidad
`aria-label`	⬜ No	`"Tiempo restante: 3 horas"`	Descripción para lectores de pantalla
`loading`	⬜ No	`lazy`	Carga diferida
`allow`	⬜ No	`fullscreen`	Permisos de características
`sandbox`	⬜ No	`allow-scripts allow-same-origin`	Restricciones de seguridad
`referrerpolicy`	⬜ No	`no-referrer-when-downgrade`	Política de encabezado referrer

Estilos CSS y diseño

Temporizador centrado

<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>Cuenta regresiva del evento</h2>
  <iframe
    src="https://gettickr.app/r/#YOUR-TIMER-ID"
    width="100%"
    height="400"
    title="Temporizador del evento"
  >
  </iframe>
</div>

Diseño de cuadrícula con múltiples 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: Lanzamiento del producto</h3>
    <iframe
      src="https://gettickr.app/r/#TIMER-1"
      height="300"
      title="Temporizador del evento 1"
    ></iframe>
  </div>

  <div class="timer-card">
    <h3>Evento 2: Venta flash</h3>
    <iframe
      src="https://gettickr.app/r/#TIMER-2"
      height="300"
      title="Temporizador del 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 del evento 3"
    ></iframe>
  </div>
</div>

Temporizador en sección 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>🎉 Gran venta de inauguración</h1>
    <p class="subtitle">¡Hasta 70% de descuento - No te lo pierdas!</p>
    <iframe
      src="https://gettickr.app/r/#YOUR-TIMER-ID"
      width="100%"
      height="500"
      title="Cuenta regresiva de la venta"
    >
    </iframe>
  </div>
</section>

Generadores de sitios 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 cuenta regresiva' }}"
  >
  </iframe>

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

<!-- Uso en páginas/posts -->
{% include countdown-timer.html timer_id="YOUR-TIMER-ID" title="Cuenta regresiva
del evento" height="500" caption="¡No te lo pierdas!" %}

Hugo

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

<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 en archivos de contenido -->
{{< timer id="YOUR-TIMER-ID" height="500" heading="¡La venta termina pronto!"
>}}

Gatsby (React)

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

const CountdownTimer = ({
  timerId,
  width = '100%',
  height = '400',
  title = 'Temporizador de cuenta regresiva',
  className = '',
  style = {}
}) => {
  if (!timerId) {
    console.error('CountdownTimer: la prop timerId es requerida');
    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 en páginas
import CountdownTimer from '../components/CountdownTimer';

const EventPage = () => (
  <div>
    <h1>Lanzamiento del producto</h1>
    <CountdownTimer
      timerId="YOUR-TIMER-ID"
      height="500"
      title="Cuenta regresiva del lanzamiento"
    />
  </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 cuenta regresiva' }}"
  >
  </iframe>
</div>

<!-- Uso en plantillas -->
{% include "timer.njk", { timerId: "YOUR-TIMER-ID", heading: "Cuenta regresiva
del evento", height: "500" } %}

Tip

¡Crea componentes/includes reutilizables de temporizadores en tu generador de sitios estáticos para mantener la consistencia y simplificar la gestión de temporizadores en todo tu sitio!

Integración con frameworks

Componente React

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

const TickrTimer = ({
  timerId,
  width = '100%',
  height = '400',
  title = 'Temporizador de cuenta regresiva',
  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: la prop timerId es requerida');
    return <div>Error: ID de temporizador no proporcionado</div>;
  }

  return (
    <div className={`tickr-timer-wrapper ${className}`}>
      {!isLoaded && !hasError && (
        <div className="timer-loading">Cargando temporizador...</div>
      )}
      {hasError && (
        <div className="timer-error">Error al cargar el 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>Lanzamiento del producto</h1>
      <TickrTimer
        timerId="YOUR-TIMER-ID"
        height="500"
        className="launch-timer"
        onLoad={() => console.log('Temporizador cargado')}
      />
    </div>
  );
}

Componente Vue 3

<!-- CountdownTimer.vue -->
<template>
  <div class="countdown-timer-wrapper" :class="className">
    <div v-if="loading && !loaded" class="timer-loading">
      Cargando temporizador...
    </div>
    <div v-if="error" class="timer-error">
      Error al cargar el 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 cuenta regresiva'
  },
  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>Cuenta regresiva del 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 cargado con éxito');
};
</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">Cargando temporizador...</div>
      <div *ngIf="error" class="timer-error">Error al cargar el 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 cuenta regresiva';
  @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 es requerido');
      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 en plantillas
<app-countdown-timer
  timerId="YOUR-TIMER-ID"
  height="500"
  className="launch-timer">
</app-countdown-timer>

Information

Los componentes de framework proporcionan una mejor integración con el ciclo de vida de tu aplicación, gestión de estado, y pueden incluir estados de carga y manejo de errores.

Optimización del rendimiento

Carga diferida

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

Precargar temporizadores críticos

<!-- En la sección <head> -->
<link rel="preconnect" href="https://gettickr.app" />
<link rel="dns-prefetch" href="https://gettickr.app" />

Script de carga asíncrona

<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 cuenta regresiva';

      placeholder.appendChild(iframe);
    }

    // Cargar después de que la página esté completamente cargada
    if (document.readyState === 'complete') {
      loadTimer();
    } else {
      window.addEventListener('load', loadTimer);
    }
  })();
</script>

Mejores prácticas de rendimiento

Práctica	Implementación	Beneficio
Carga diferida	Añadir atributo `loading="lazy"`	Carga inicial de página más rápida
DNS Prefetch	`<link rel="dns-prefetch">`	Conexión más rápida
Preconnect	`<link rel="preconnect">`	Carga de recursos más rápida
JavaScript asíncrono	Cargar después del evento de carga de página	Carga no bloqueante
Intersection Observer	Cargar al desplazarse hacia la vista	Carga diferida
Minimizar cantidad de temporizadores	Máximo 1-3 temporizadores por página	Mejor rendimiento
Dimensiones apropiadas	Coincidir con el tamaño del diseño	Reducir renderizado innecesario
Eliminar atributos no utilizados	Eliminar HTML innecesario	DOM más pequeño

Mejores prácticas de seguridad

Content Security Policy (CSP)

<!-- Añadir a <head> o establecer como encabezado HTTP -->
<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; frame-src https://gettickr.app; script-src 'self';"
/>

Atributo sandbox (si es necesario)

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

Warning

Solo usa el atributo sandbox si es específicamente requerido por tu política de seguridad. Una configuración incorrecta puede romper la funcionalidad del temporizador.

Solo HTTPS

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

Information

Siempre usa HTTPS (https://) en las URLs de los temporizadores, nunca HTTP. Los navegadores modernos bloquean contenido mixto (iFrames HTTP en páginas HTTPS).

Solución de problemas

Problemas comunes

Problema	Causa posible	Solución
Temporizador no aparece	URL incorrecta	Verificar ID y URL del temporizador
iFrame negro/en blanco	Problema de red	Verificar errores en la consola del navegador
Content Security Policy	CSP bloqueando iframe	Añadir gettickr.app a frame-src
Advertencia de contenido mixto	HTTP en página HTTPS	Usar https:// en la URL del temporizador
Temporizador muy pequeño	Tamaño de contenedor muy pequeño	Ajustar ancho/alto del contenedor
Contenido superpuesto	Conflictos CSS	Usar aislamiento o z-index
Carga lenta	Sin carga diferida	Añadir atributo `loading="lazy"`
Errores JavaScript	Error de sintaxis en el código	Verificar consola del navegador, validar JS

Próximos pasos

Integración iFrame - Documentación básica de iFrame
Integración WordPress - Si también usas WordPress
Integración Shopify - Para sitios de comercio electrónico

Tip

La integración HTML personalizada ofrece máxima flexibilidad. ¡Comienza simple y mejora progresivamente según tus necesidades!