Integración mediante iFrame

Information

Los iFrames son el método universal para integrar temporizadores de gettickr.app en cualquier sitio web. Esta guía te muestra todo lo que necesitas saber para implementar temporizadores usando código iFrame.

Los iFrames son la tecnología fundamental detrás de la integración de temporizadores de gettickr.app en sitios web. Entender cómo trabajar con iFrames te da la flexibilidad para integrar temporizadores en cualquier plataforma web o página con código personalizado.

¿Qué es un iFrame?

Un iFrame (marco en línea) es un elemento HTML que integra otra página HTML dentro de tu página actual. Cuando usas un iFrame para integrar un temporizador, estás creando una ventana en tu página web que muestra tu temporizador desde gettickr.app.

Aspecto	Descripción
Tecnología	Elemento HTML estándar (`<iframe>`)
Soporte de navegadores	Todos los navegadores modernos (Chrome, Firefox, Safari, Edge)
Compatibilidad	Funciona en todas las plataformas web
Complejidad	Simple - solo pega código HTML
Flexibilidad	Control total sobre tamaño, posición y estilo

Tip

Los iFrames son la misma tecnología utilizada para integrar vídeos de YouTube, Google Maps y otro contenido externo en sitios web. Si tu plataforma admite esos, admite temporizadores de gettickr.app.

Estructura básica del código iFrame

El código iFrame básico para integrar un temporizador sigue una estructura HTML simple:

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

Atributos del iFrame explicados

Atributo	Propósito	Valor de ejemplo	Requerido
`src`	URL del temporizador a mostrar	`https://gettickr.app/r/#abc123`	✅ Sí
`width`	Ancho del iFrame	`800` (píxeles) o `100%` (responsive)	✅ Sí
`height`	Alto del iFrame	`400` (píxeles)	✅ Sí
`frameborder`	Borde alrededor del iFrame	`0` (sin borde)	⬜ Opcional
`allowfullscreen`	Habilitar pantalla completa	No necesita valor	⬜ Opcional
`loading`	Cuándo cargar el iFrame	`lazy` (cargar cuando es visible)	⬜ Opcional
`title`	Descripción de accesibilidad	`"Temporizador de cuenta atrás"`	⬜ Recomendado

Tip

Siempre incluye un atributo title para accesibilidad. Ayuda a los lectores de pantalla a describir el contenido a usuarios con discapacidad visual.

Crear tu código iFrame

Sigue estos pasos para crear código iFrame para tu temporizador:

Paso 1: Obtén la URL de tu temporizador

Crea y personaliza tu temporizador en el Editor
En la sección Renderer, encuentra la URL de visualización de tu temporizador
Copia la URL completa (se ve como https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR)

Paso 2: Elige tus dimensiones

Decide el ancho y alto basándote en el diseño de tu temporizador y dónde aparecerá:

Ubicación del temporizador	Ancho recomendado	Alto recomendado	Relación de aspecto
Ancho completo	`100%`	`400-600px`	~16:9 o 16:6
Sección hero	`1200px` o `100%`	`600px`	2:1
Barra lateral	`300-400px`	`200-300px`	~4:3
Ancho de contenido	`800px`	`400px`	2:1
Widget pequeño	`400px`	`200px`	2:1

Information

Ajusta las dimensiones del iFrame a las dimensiones de diseño que estableciste al crear tu temporizador en el editor para obtener la mejor apariencia.

Paso 3: Construye tu código

Reemplaza TU-ID-DE-TEMPORIZADOR con el ID real de tu temporizador de la URL:

<iframe
  src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
  width="800"
  height="400"
  frameborder="0"
  title="Temporizador de cuenta atrás"
  allowfullscreen
>
</iframe>

Paso 4: Añade a tu sitio web

Copia el código iFrame completo y pégalo en tu sitio web:

Editor HTML/Código: Pega directamente en tu HTML
Constructor de sitios web: Usa bloque "HTML personalizado" o "Código de integración"
CMS: Añade a bloque HTML, widget HTML personalizado o editor de texto (modo HTML)

Warning

Asegúrate de pegar el código en modo HTML, no en modo visual/texto enriquecido. Si pegas en modo visual, el código aparecerá como texto en lugar de renderizar el temporizador.

Consideraciones de seguridad

Los navegadores modernos implementan características de seguridad para iFrames para proteger a los usuarios:

Característica de seguridad	Qué hace	Compatibilidad con gettickr.app
Requisito HTTPS	Muchos sitios solo permiten iFrames HTTPS	✅ gettickr.app usa HTTPS
X-Frame-Options	Controla quién puede integrar el contenido	✅ Permite integración
Encabezados CSP	Restricciones de política de seguridad de contenido	✅ En lista blanca
Atributo Sandbox	Restringe capacidades del iFrame	⬜ No necesario para temporizadores

Information

Los temporizadores de gettickr.app están diseñados para funcionar de forma segura en iFrames sin requerir configuraciones de seguridad especiales. La configuración de seguridad predeterminada del navegador funciona perfectamente.

Atributo sandbox opcional

Si tu política de seguridad del sitio web lo requiere, puedes añadir restricciones sandbox:

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

Warning

Solo añade el atributo sandbox si es específicamente requerido por tu política de seguridad. Puede restringir la funcionalidad del temporizador si no está configurado correctamente.

Optimización del rendimiento

Carga diferida (Lazy Loading)

Aplaza la carga de iFrames hasta que estén cerca del viewport:

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

Beneficios:

Carga inicial de página más rápida
Ancho de banda reducido para usuarios que no se desplazan hasta el temporizador
Mejor rendimiento en dispositivos móviles

Tip

Usa loading="lazy" para temporizadores que aparecen debajo del pliegue (no inmediatamente visibles cuando se carga la página).

Mejores prácticas de rendimiento

Práctica	Por qué	Cómo
Un temporizador por página	Minimizar uso de recursos	Usar uno, no múltiples
Tamaño apropiado	No cargar iFrames enormes innecesariamente	Ajustar a dimensiones de diseño
Carga diferida	Cargar solo cuando sea necesario	Añadir `loading="lazy"`
Evitar iFrames anidados	La complejidad perjudica el rendimiento	Solo un nivel

Estilos responsive avanzados

Relación de aspecto responsive

Para mantener proporciones correctas en todos los tamaños de pantalla:

<div
  style="position: relative; width: 100%; padding-bottom: 50%; max-width: 1200px; margin: 0 auto;"
>
  <iframe
    src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    title="Temporizador de cuenta atrás"
  >
  </iframe>
</div>

Cómo funciona:

El contenedor exterior usa padding-bottom para crear espacio proporcional
padding-bottom: 50% crea una relación 2:1 (ancho:alto)
El iFrame se posiciona absolutamente para llenar el contenedor
El resultado es un temporizador que escala perfectamente

Cálculo de padding-bottom

Relación de aspecto deseada	Fórmula	Valor padding-bottom
16:9 (pantalla ancha)	(9 ÷ 16) × 100	`56.25%`
4:3 (tradicional)	(3 ÷ 4) × 100	`75%`
2:1 (temporizador ancho)	(1 ÷ 2) × 100	`50%`
1:1 (cuadrado)	(1 ÷ 1) × 100	`100%`
3:1 (muy ancho)	(1 ÷ 3) × 100	`33.33%`

Tamaños específicos por breakpoint

Usa media queries para diferentes dimensiones en móvil/tablet/escritorio:

<style>
  .timer-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }

  .timer-container iframe {
    width: 100%;
    height: 600px;
    border: none;
  }

  /* Tablet */
  @media (max-width: 1024px) {
    .timer-container iframe {
      height: 450px;
    }
  }

  /* Móvil */
  @media (max-width: 768px) {
    .timer-container iframe {
      height: 300px;
    }
  }
</style>

<div class="timer-container">
  <iframe
    src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
    title="Temporizador de cuenta atrás"
  >
  </iframe>
</div>

Ejemplos de integración

Temporizador centrado simple

<div style="max-width: 800px; margin: 40px auto; padding: 0 20px;">
  <iframe
    src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
    width="100%"
    height="400"
    style="border: none; display: block;"
    title="Temporizador de cuenta atrás"
  >
  </iframe>
</div>

Temporizador con título y descripción

<section style="text-align: center; padding: 60px 20px; background: #f8f9fa;">
  <h2 style="margin: 0 0 10px 0; font-size: 36px;">
    ¡La oferta termina pronto!
  </h2>
  <p style="margin: 0 0 30px 0; font-size: 18px; color: #666;">
    Aprovecha nuestros descuentos antes de que acabe el tiempo
  </p>
  <div style="max-width: 1000px; margin: 0 auto;">
    <iframe
      src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
      width="100%"
      height="500"
      style="border: none;"
      title="Temporizador de oferta"
    >
    </iframe>
  </div>
</section>

Temporizador en barra lateral

<aside
  style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"
>
  <h3 style="margin-top: 0; font-size: 20px;">Cuenta atrás del evento</h3>
  <iframe
    src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
    width="100%"
    height="250"
    style="border: none;"
    title="Temporizador del evento"
  >
  </iframe>
  <p style="margin-bottom: 0; font-size: 14px; color: #666;">
    ¡No te lo pierdas!
  </p>
</aside>

Temporizador de ancho completo con fondo

<div
  style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 80px 20px;"
>
  <div style="max-width: 1400px; margin: 0 auto;">
    <iframe
      src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
      width="100%"
      height="600"
      style="border: none; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.3);"
      title="Temporizador principal"
    >
    </iframe>
  </div>
</div>

Solución de problemas

El temporizador no aparece

Problema	Solución
Espacio en blanco donde debería estar el temporizador	Verificar que la URL del temporizador es correcta
No hay iFrame visible en absoluto	Verificar modo HTML (no editor visual)
Mensaje de error en el iFrame	El temporizador puede haber sido eliminado o la URL es incorrecta
Pantalla negra	Las dimensiones del iFrame pueden ser incorrectas

Tip

Abre la URL del temporizador directamente en un navegador para verificar que funciona antes de solucionar problemas de la integración del iFrame.

Problemas de tamaño

Problema	Solución
El temporizador aparece muy pequeño	Aumentar valores de ancho y alto
El temporizador aparece cortado	Verificar que las dimensiones del iFrame coincidan con el diseño del temporizador
El temporizador se sale del contenedor	Añadir `max-width: 100%` al iFrame
Barras de desplazamiento no deseadas	Establecer `scrolling="no"` o `overflow: hidden`
Relación de aspecto incorrecta en móvil	Implementar contenedor de relación de aspecto responsive

Problemas específicos de plataforma

Plataforma	Problema común	Solución
WordPress	El editor visual elimina código	Usar editor de código o bloque HTML
Wix	iFrame no permitido en texto	Usar elemento HTML iFrame del menú Añadir
Squarespace	Soporte limitado de iFrame	Usar bloque de código, no bloque de texto
Shopify	iFrame en plantillas liquid	Usar sintaxis Liquid adecuada para HTML
Webflow	Elemento embed necesario	Usar elemento Embed, no HTML Embed

Warning

Algunas plataformas web filtran o restringen código iFrame por seguridad. Si tu iFrame no funciona, consulta la documentación de tu plataforma sobre integración de contenido externo.

Errores de consola del navegador

Verifica la consola de desarrollador del navegador (F12) para mensajes de error:

X-Frame-Options denied

Solución: Contacta con tu proveedor de hosting web. Tu sitio puede estar bloqueando iFrames.

Mixed Content: blocked loading insecure content

Solución: Asegúrate de que la URL del temporizador usa https:// no http://

CSP: frame-src violation

Solución: Actualiza tu política de seguridad de contenido para permitir gettickr.app

Accesibilidad

Mejores prácticas de accesibilidad

Práctica	Implementación	Beneficio
Atributo title	`title="Temporizador de cuenta atrás"`	Descripción del lector de pantalla
Texto descriptivo	Añadir encabezado antes del temporizador	Contexto para todos los usuarios
Alto contraste	Diseñar temporizador con colores accesibles	Legibilidad para baja visión
Tamaño de texto	Usar fuentes grandes en el diseño del temporizador	Fácil de leer
Texto alternativo	Proporcionar contexto textual alrededor	Usuarios sin JavaScript

Ejemplo accesible completo

<section aria-labelledby="timer-heading">
  <h2 id="timer-heading">La venta termina en</h2>
  <p>
    Aprovecha nuestros descuentos especiales antes de que termine el
    temporizador
  </p>
  <iframe
    src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
    width="100%"
    height="400"
    style="border: none; max-width: 1000px; margin: 0 auto; display: block;"
    title="Cuenta atrás hasta el final de la venta"
    aria-describedby="timer-description"
  >
  </iframe>
  <p id="timer-description" class="sr-only">
    Un temporizador visual mostrando el tiempo restante hasta el final de
    nuestra venta especial
  </p>
</section>

Próximos pasos

Integración con WordPress - Guía específica de plataforma para WordPress
Integración con Shopify - Configuración de temporizador para e-commerce
Integración HTML personalizada - Técnicas de implementación avanzadas
Personalizar diseño del temporizador - Haz que tu temporizador coincida con la estética de tu sitio web

Tip

Para instrucciones específicas de plataforma más allá del código iFrame básico, consulta las guías de integración dedicadas para tu plataforma web.

Integración mediante iFrame

Information

¿Qué es un iFrame?

Aspecto	Descripción
Tecnología	Elemento HTML estándar (`<iframe>`)
Soporte de navegadores	Todos los navegadores modernos (Chrome, Firefox, Safari, Edge)
Compatibilidad	Funciona en todas las plataformas web
Complejidad	Simple - solo pega código HTML
Flexibilidad	Control total sobre tamaño, posición y estilo

Tip

Estructura básica del código iFrame

El código iFrame básico para integrar un temporizador sigue una estructura HTML simple:

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

Atributos del iFrame explicados

Atributo	Propósito	Valor de ejemplo	Requerido
`src`	URL del temporizador a mostrar	`https://gettickr.app/r/#abc123`	✅ Sí
`width`	Ancho del iFrame	`800` (píxeles) o `100%` (responsive)	✅ Sí
`height`	Alto del iFrame	`400` (píxeles)	✅ Sí
`frameborder`	Borde alrededor del iFrame	`0` (sin borde)	⬜ Opcional
`allowfullscreen`	Habilitar pantalla completa	No necesita valor	⬜ Opcional
`loading`	Cuándo cargar el iFrame	`lazy` (cargar cuando es visible)	⬜ Opcional
`title`	Descripción de accesibilidad	`"Temporizador de cuenta atrás"`	⬜ Recomendado

Tip

Siempre incluye un atributo title para accesibilidad. Ayuda a los lectores de pantalla a describir el contenido a usuarios con discapacidad visual.

Crear tu código iFrame

Sigue estos pasos para crear código iFrame para tu temporizador:

Paso 1: Obtén la URL de tu temporizador

Crea y personaliza tu temporizador en el Editor
En la sección Renderer, encuentra la URL de visualización de tu temporizador
Copia la URL completa (se ve como https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR)

Paso 2: Elige tus dimensiones

Decide el ancho y alto basándote en el diseño de tu temporizador y dónde aparecerá:

Ubicación del temporizador	Ancho recomendado	Alto recomendado	Relación de aspecto
Ancho completo	`100%`	`400-600px`	~16:9 o 16:6
Sección hero	`1200px` o `100%`	`600px`	2:1
Barra lateral	`300-400px`	`200-300px`	~4:3
Ancho de contenido	`800px`	`400px`	2:1
Widget pequeño	`400px`	`200px`	2:1

Information

Ajusta las dimensiones del iFrame a las dimensiones de diseño que estableciste al crear tu temporizador en el editor para obtener la mejor apariencia.

Paso 3: Construye tu código

Reemplaza TU-ID-DE-TEMPORIZADOR con el ID real de tu temporizador de la URL:

<iframe
  src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
  width="800"
  height="400"
  frameborder="0"
  title="Temporizador de cuenta atrás"
  allowfullscreen
>
</iframe>

Paso 4: Añade a tu sitio web

Copia el código iFrame completo y pégalo en tu sitio web:

Editor HTML/Código: Pega directamente en tu HTML
Constructor de sitios web: Usa bloque "HTML personalizado" o "Código de integración"
CMS: Añade a bloque HTML, widget HTML personalizado o editor de texto (modo HTML)

Warning

Asegúrate de pegar el código en modo HTML, no en modo visual/texto enriquecido. Si pegas en modo visual, el código aparecerá como texto en lugar de renderizar el temporizador.

Consideraciones de seguridad

Los navegadores modernos implementan características de seguridad para iFrames para proteger a los usuarios:

Característica de seguridad	Qué hace	Compatibilidad con gettickr.app
Requisito HTTPS	Muchos sitios solo permiten iFrames HTTPS	✅ gettickr.app usa HTTPS
X-Frame-Options	Controla quién puede integrar el contenido	✅ Permite integración
Encabezados CSP	Restricciones de política de seguridad de contenido	✅ En lista blanca
Atributo Sandbox	Restringe capacidades del iFrame	⬜ No necesario para temporizadores

Information

Atributo sandbox opcional

Si tu política de seguridad del sitio web lo requiere, puedes añadir restricciones sandbox:

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

Warning

Solo añade el atributo sandbox si es específicamente requerido por tu política de seguridad. Puede restringir la funcionalidad del temporizador si no está configurado correctamente.

Optimización del rendimiento

Carga diferida (Lazy Loading)

Aplaza la carga de iFrames hasta que estén cerca del viewport:

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

Beneficios:

Carga inicial de página más rápida
Ancho de banda reducido para usuarios que no se desplazan hasta el temporizador
Mejor rendimiento en dispositivos móviles

Tip

Usa loading="lazy" para temporizadores que aparecen debajo del pliegue (no inmediatamente visibles cuando se carga la página).

Mejores prácticas de rendimiento

Práctica	Por qué	Cómo
Un temporizador por página	Minimizar uso de recursos	Usar uno, no múltiples
Tamaño apropiado	No cargar iFrames enormes innecesariamente	Ajustar a dimensiones de diseño
Carga diferida	Cargar solo cuando sea necesario	Añadir `loading="lazy"`
Evitar iFrames anidados	La complejidad perjudica el rendimiento	Solo un nivel

Estilos responsive avanzados

Relación de aspecto responsive

Para mantener proporciones correctas en todos los tamaños de pantalla:

<div
  style="position: relative; width: 100%; padding-bottom: 50%; max-width: 1200px; margin: 0 auto;"
>
  <iframe
    src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    title="Temporizador de cuenta atrás"
  >
  </iframe>
</div>

Cómo funciona:

El contenedor exterior usa padding-bottom para crear espacio proporcional
padding-bottom: 50% crea una relación 2:1 (ancho:alto)
El iFrame se posiciona absolutamente para llenar el contenedor
El resultado es un temporizador que escala perfectamente

Cálculo de padding-bottom

Relación de aspecto deseada	Fórmula	Valor padding-bottom
16:9 (pantalla ancha)	(9 ÷ 16) × 100	`56.25%`
4:3 (tradicional)	(3 ÷ 4) × 100	`75%`
2:1 (temporizador ancho)	(1 ÷ 2) × 100	`50%`
1:1 (cuadrado)	(1 ÷ 1) × 100	`100%`
3:1 (muy ancho)	(1 ÷ 3) × 100	`33.33%`

Tamaños específicos por breakpoint

Usa media queries para diferentes dimensiones en móvil/tablet/escritorio:

<style>
  .timer-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }

  .timer-container iframe {
    width: 100%;
    height: 600px;
    border: none;
  }

  /* Tablet */
  @media (max-width: 1024px) {
    .timer-container iframe {
      height: 450px;
    }
  }

  /* Móvil */
  @media (max-width: 768px) {
    .timer-container iframe {
      height: 300px;
    }
  }
</style>

<div class="timer-container">
  <iframe
    src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
    title="Temporizador de cuenta atrás"
  >
  </iframe>
</div>

Ejemplos de integración

Temporizador centrado simple

<div style="max-width: 800px; margin: 40px auto; padding: 0 20px;">
  <iframe
    src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
    width="100%"
    height="400"
    style="border: none; display: block;"
    title="Temporizador de cuenta atrás"
  >
  </iframe>
</div>

Temporizador con título y descripción

<section style="text-align: center; padding: 60px 20px; background: #f8f9fa;">
  <h2 style="margin: 0 0 10px 0; font-size: 36px;">
    ¡La oferta termina pronto!
  </h2>
  <p style="margin: 0 0 30px 0; font-size: 18px; color: #666;">
    Aprovecha nuestros descuentos antes de que acabe el tiempo
  </p>
  <div style="max-width: 1000px; margin: 0 auto;">
    <iframe
      src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
      width="100%"
      height="500"
      style="border: none;"
      title="Temporizador de oferta"
    >
    </iframe>
  </div>
</section>

Temporizador en barra lateral

<aside
  style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"
>
  <h3 style="margin-top: 0; font-size: 20px;">Cuenta atrás del evento</h3>
  <iframe
    src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
    width="100%"
    height="250"
    style="border: none;"
    title="Temporizador del evento"
  >
  </iframe>
  <p style="margin-bottom: 0; font-size: 14px; color: #666;">
    ¡No te lo pierdas!
  </p>
</aside>

Temporizador de ancho completo con fondo

<div
  style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 80px 20px;"
>
  <div style="max-width: 1400px; margin: 0 auto;">
    <iframe
      src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
      width="100%"
      height="600"
      style="border: none; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.3);"
      title="Temporizador principal"
    >
    </iframe>
  </div>
</div>

Solución de problemas

El temporizador no aparece

Problema	Solución
Espacio en blanco donde debería estar el temporizador	Verificar que la URL del temporizador es correcta
No hay iFrame visible en absoluto	Verificar modo HTML (no editor visual)
Mensaje de error en el iFrame	El temporizador puede haber sido eliminado o la URL es incorrecta
Pantalla negra	Las dimensiones del iFrame pueden ser incorrectas

Tip

Abre la URL del temporizador directamente en un navegador para verificar que funciona antes de solucionar problemas de la integración del iFrame.

Problemas de tamaño

Problema	Solución
El temporizador aparece muy pequeño	Aumentar valores de ancho y alto
El temporizador aparece cortado	Verificar que las dimensiones del iFrame coincidan con el diseño del temporizador
El temporizador se sale del contenedor	Añadir `max-width: 100%` al iFrame
Barras de desplazamiento no deseadas	Establecer `scrolling="no"` o `overflow: hidden`
Relación de aspecto incorrecta en móvil	Implementar contenedor de relación de aspecto responsive

Problemas específicos de plataforma

Plataforma	Problema común	Solución
WordPress	El editor visual elimina código	Usar editor de código o bloque HTML
Wix	iFrame no permitido en texto	Usar elemento HTML iFrame del menú Añadir
Squarespace	Soporte limitado de iFrame	Usar bloque de código, no bloque de texto
Shopify	iFrame en plantillas liquid	Usar sintaxis Liquid adecuada para HTML
Webflow	Elemento embed necesario	Usar elemento Embed, no HTML Embed

Warning

Algunas plataformas web filtran o restringen código iFrame por seguridad. Si tu iFrame no funciona, consulta la documentación de tu plataforma sobre integración de contenido externo.

Errores de consola del navegador

Verifica la consola de desarrollador del navegador (F12) para mensajes de error:

X-Frame-Options denied

Solución: Contacta con tu proveedor de hosting web. Tu sitio puede estar bloqueando iFrames.

Mixed Content: blocked loading insecure content

Solución: Asegúrate de que la URL del temporizador usa https:// no http://

CSP: frame-src violation

Solución: Actualiza tu política de seguridad de contenido para permitir gettickr.app

Accesibilidad

Mejores prácticas de accesibilidad

Práctica	Implementación	Beneficio
Atributo title	`title="Temporizador de cuenta atrás"`	Descripción del lector de pantalla
Texto descriptivo	Añadir encabezado antes del temporizador	Contexto para todos los usuarios
Alto contraste	Diseñar temporizador con colores accesibles	Legibilidad para baja visión
Tamaño de texto	Usar fuentes grandes en el diseño del temporizador	Fácil de leer
Texto alternativo	Proporcionar contexto textual alrededor	Usuarios sin JavaScript

Ejemplo accesible completo

<section aria-labelledby="timer-heading">
  <h2 id="timer-heading">La venta termina en</h2>
  <p>
    Aprovecha nuestros descuentos especiales antes de que termine el
    temporizador
  </p>
  <iframe
    src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
    width="100%"
    height="400"
    style="border: none; max-width: 1000px; margin: 0 auto; display: block;"
    title="Cuenta atrás hasta el final de la venta"
    aria-describedby="timer-description"
  >
  </iframe>
  <p id="timer-description" class="sr-only">
    Un temporizador visual mostrando el tiempo restante hasta el final de
    nuestra venta especial
  </p>
</section>

Próximos pasos

Integración con WordPress - Guía específica de plataforma para WordPress
Integración con Shopify - Configuración de temporizador para e-commerce
Integración HTML personalizada - Técnicas de implementación avanzadas
Personalizar diseño del temporizador - Haz que tu temporizador coincida con la estética de tu sitio web

Tip

Para instrucciones específicas de plataforma más allá del código iFrame básico, consulta las guías de integración dedicadas para tu plataforma web.