Las preguntas que surgen una vez pegado el código: altura, ancho, transparencia, plataformas.
¿Cómo cambio el tamaño del iframe del contador?
Un iframe no toma por sí solo la altura de su contenido: la fijas tú. El código incluye width="100%" y height="500": el ancho sigue tu columna, la altura es fija. Calcula de 300 a 380 px si ocultas el título, la descripción y la fecha, de 450 a 500 px con todo, y algo más en móvil, donde el texto salta de línea. El contador se centra en la altura disponible: demasiado alto, el iframe deja espacio vacío; demasiado bajo, corta la descripción.
Para una altura distinta en móvil, dale una clase al iframe:
<style>
.wiu-countdown { width: 100%; height: 480px; border: 0; }
@media (max-width: 600px) { .wiu-countdown { height: 560px; } }
</style>
<iframe class="wiu-countdown" src="https://es.watchisup.com/evento/tu-contador/embed" title="Countdown" loading="lazy"></iframe>
Altura automática del iframe (Pro)
Con la Integración pro, el código copiado de la ventana Insertar añade una línea de script bajo el iframe. El widget envía entonces la altura de su contenido y el iframe se ajusta solo: sin espacio vacío ni descripción cortada, en ordenador y en móvil, y la altura sigue cuando aparece la barra en vivo. Pega la línea una sola vez por página, aunque tengas varios widgets.
Funciona donde se pueda pegar un script: WordPress (bloque HTML personalizado), Squarespace, Webflow, Shopify, un sitio hecho a mano. Notion y Google Sites eliminan los scripts, y Wix encierra el código pegado en su propio marco: ahí el iframe mantiene la altura de su atributo height.
<iframe src="https://es.watchisup.com/evento/tu-contador/embed?live=1" width="100%" height="500" frameborder="0"
title="Countdown" loading="lazy"></iframe>
<script src="https://es.watchisup.com/embed.js" async></script>
¿Cómo centro el widget y limito su ancho?
En una página ancha, un contador estirado a todo el ancho se lee peor. Limita el ancho y céntralo:
<iframe src="https://es.watchisup.com/evento/tu-contador/embed" width="100%" height="420"
style="display:block; max-width:720px; margin:0 auto; border:0;"
title="Countdown" loading="lazy"></iframe>
¿Cómo hago transparente el fondo?
Con la Integración pro, añade bg=transparent a la dirección: el fondo de tu sitio aparece detrás de los dígitos. En el iframe, allowtransparency y background:transparent evitan un fondo blanco en algunos navegadores. Elige entonces un color de texto legible sobre tu fondo (parámetro text).
<iframe src="https://es.watchisup.com/evento/tu-contador/embed?bg=transparent&live=1&hide=description"
width="100%" height="420" frameborder="0" allowtransparency="true"
style="background:transparent; border:0;" title="Countdown" loading="lazy"></iframe>
¿Cómo lo inserto sin ralentizar la página?
Añade loading="lazy": el navegador solo carga el widget cuando se acerca a la pantalla, ideal para un contador al final de la página. Añade también un atributo title que describa el contador: es lo que leen los lectores de pantalla.
<iframe src="https://es.watchisup.com/evento/tu-contador/embed" width="100%" height="480" frameborder="0"
loading="lazy" title="Countdown to …"></iframe>
¿En qué plataforma pego el código?
En cualquier lugar donde se pueda pegar HTML o una dirección para insertar. El código completo (el iframe) va en un bloque HTML; las herramientas que piden solo una URL usan el enlace para insertar, el que termina en /embed.
- WordPress
- Bloque «HTML personalizado» del editor, o un widget HTML personalizado en la barra lateral.
- Notion
- Escribe /embed y pega el enlace para insertar, el que termina en /embed.
- Wix
- Agregar > Insertar código > Insertar HTML y pega el iframe.
- Squarespace
- Añade un bloque de código y pega el iframe.
- Webflow
- Añade un elemento Embed y pega el iframe.
- Shopify
- Sección «Liquid personalizado» del tema, pega el iframe.
- Google Sites
- Insertar > Insertar > Por URL y pega el enlace para insertar.
- Framer, Carrd, Jimdo…
- Bloque HTML o Embed: pega el iframe.
¿Cómo cambio la fecha sin volver a pegar el código?
Abre tu enlace de edición y cambia la fecha o el título: el widget se actualiza en todos los sitios que lo muestran. El código del iframe no cambia.
¿La cuenta regresiva es correcta en todas las zonas horarias?
Sí. La cuenta regresiva apunta a un instante exacto: llega a cero al mismo tiempo para todos los visitantes, estén donde estén, cambio de horario incluido. La fecha escrita bajo el título se muestra en la zona horaria del evento.