Visión general de la integración en sitios web
Information
Integra tus temporizadores en cualquier sitio mediante una URL de
visualización (Renderer) estable. Las formas más simples son el iframe
estándar y un bloque HTML personalizado. Dispones de guías específicas para
WordPress, Shopify, Wix/Squarespace y una integración HTML avanzada.
Opciones de integración
Elige el método que mejor se adapte a tu stack y CMS:
- iFrame estándar
- Bloque HTML personalizado
- CMS: WordPress, Shopify, Wix/Squarespace
- Integración HTML avanzada (componentes UI, estilos a medida)
| Método | Dificultad | Puesta en marcha | Ideal para |
|---|---|---|---|
| iFrame | Muy baja | Pegar una URL en una etiqueta | Sitios clásicos, blogs |
| Bloque HTML personalizado | Baja | Añadir un bloque “HTML/Código” | CMS con editores visuales |
| WordPress | Baja | Bloque “HTML personalizado”/shortcode | Blogs, páginas de marketing |
| Shopify | Media | Sección/bloque personalizado en tema | Tiendas e‑commerce |
| Wix/Squarespace | Baja | Bloque Embed/Code | Sitios escaparate, portfolios |
| HTML avanzada | Media+ | Plantilla + CSS a medida | Control fino de diseño/branding |
Tip
Empieza con el iframe. Si necesitas un diseño más elaborado, pasa a la
integración HTML personalizada para estilizar el contenedor alrededor del
Renderer.
Obtener la URL del Renderer
Cada temporizador tiene una URL de visualización. Para recuperarla:
- Abre tu temporizador en el editor
- Si eres Premium, guárdalo para disponer de una URL estable
- Copia la URL del Renderer desde la interfaz
- Úsala en un iframe o como “Browser Source” en streaming
Premium Feature
Los temporizadores guardados mantienen una URL estable. Integra una
vez y modifica el temporizador sin cambiar el embed. En Free, cada edición
puede generar una nueva URL.
Integración mediante iFrame
Ejemplo de iframe estándar:
Buenas prácticas:
- Define ancho/alto adecuados a tu diseño
- Elimina la bordura para un render limpio
- Usa
loading="lazy"si el contexto lo permite - Encapsula el iframe en un contenedor responsive si lo necesitas
Warning
Algunas plataformas aplican restricciones a iframes (sandbox, CSP).
Si se bloquea, usa un bloque HTML dedicado o revisa la política de seguridad
del CMS.
Integración en WordPress
Dos opciones sencillas:
- Bloque “HTML personalizado”: pega el iframe
- Shortcode personalizado: si tu tema lo permite
Pasos recomendados:
- Abre el editor (Gutenberg)
- Añade un bloque “HTML personalizado”
- Pega el iframe del Renderer
- Ajusta el estilo desde el CSS del tema si hace falta
Information
Para estilos avanzados, crea una clase de contenedor alrededor del
iframe y añade reglas CSS vía “Personalizar” > “CSS adicional”.
Integración en Shopify
Según tu tema, añade una sección/bloque personalizado:
- En “Theme” > “Customize”, añade una sección
- Inserta un bloque HTML (o “Code”)
- Pega el iframe del Renderer
- Prueba en escritorio y móvil
- Ajusta el CSS del tema para el responsive
Tip
Coloca el temporizador en páginas de alto impacto (p. ej., oferta,
landing de lanzamiento) y armoniza los colores con tu marca.
Integración en Wix/Squarespace
Usa un bloque “Embed”/“Code”:
- Añade un bloque “Embed” (Wix) o “Code” (Squarespace)
- Pega el iframe del Renderer
- Ajusta dimensiones y márgenes
- Publica y verifica el render
Information
Algunas plantillas aplican márgenes internos. Añade un contenedor y
gestiona el espaciado para un encuadre limpio.
Integración HTML avanzada
Si buscas control fino (layout, branding alrededor del temporizador), coloca el Renderer en un contenedor dedicado y estiliza ese contenedor:
Tip
Estiliza el contenedor (alrededor del Renderer), no el contenido
interno del temporizador, para evitar conflictos y conservar la fluidez de las
actualizaciones.
URLs y actualizaciones: Free vs Premium
| Aspecto | Free | Premium |
|---|---|---|
| Guardado | No | Sí (Dashboard) |
| URL de visualización | Puede cambiar tras edición | Estable, no cambia |
| Actualizaciones en sitio | Suele requerir nueva URL | Automáticas sin cambiar el enlace |
| Control remoto | No | Sí (stream y sitio, instantáneo) |
Information
Con Premium, modifica el temporizador (duración/diseño/objetivo) y
deja el embed tal cual: la visualización se actualiza automáticamente.
Rendimiento y SEO
- Rendimiento: el iframe carga una vista dedicada optimizada para mostrar
- Lazy loading: actívalo si el temporizador no está “above the fold”
- SEO: los temporizadores son visuales; añade texto contextual alrededor para describir el evento/la promoción
Tip
Acompaña el temporizador de un título y un párrafo descriptivo para
mejorar la semántica y la conversión.
Resolución de problemas
- El iframe no se muestra:
- Verifica la URL del Renderer y la política CSP del sitio
- Prueba sin bloqueadores de scripts/trackers
- El temporizador no se actualiza:
- Asegúrate de que el editor esté abierto (o que el temporizador esté guardado en Premium)
- Revisa que utilizas la URL correcta
- Problemas de maquetación:
- Añade un contenedor y estilos CSS propios (dimensiones, márgenes, overflow)
Buenas prácticas
- Responsive: encapsula el iframe en un contenedor de ancho fluido
- Contraste: asegura legibilidad en todos los fondos
- Pruebas multi‑dispositivo: verifica escritorio, tablet y móvil
- Estabilidad: para sitios con alta audiencia, prioriza temporizadores Premium (URL estable)