✅Cómo Crear un Contador Regresivo en Gutenberg con Cupón de Descuento

Ampliamos la sección de snippets para Gutenberg con una nueva idea que surgió a raíz de un comentario en el blog. Un lector me pidió un contador regresivo que empezara automáticamente al cargar la página y que, al pasar un minuto, revelara un contenido oculto.

En este ejemplo, el contenido revelado es un cupón de descuento, pero puedes adaptarlo fácilmente para mostrar cualquier cosa: un botón, un enlace, un mensaje, un formulario o incluso contenido exclusivo solo visible después del tiempo establecido.

En este artículo te voy a mostrar cómo crear este contador usando únicamente un bloque HTML de Gutenberg, sin plugins ni complicaciones. Al terminar, tendrás una funcionalidad dinámica que puedes insertar en cualquier página o entrada de WordPress con un diseño moderno y personalizable.

Este tipo de funcionalidad puede ayudarte a:

• Crear una experiencia más dinámica en tu web.
• Aumentar la retención del usuario.
• Motivar la conversión con urgencia o expectativa.

Y lo mejor: no necesitas instalar ningún plugin adicional ni tocar el functions.php.

¿Qué hace este snippet?

Al cargar la página, aparece un mensaje como este:

¡Estás a punto de conseguir un cupón exclusivo!
Solo tienes que esperar 1 minuto…

Debajo verás un contador que baja desde 01:00 hasta 00:00.
Una vez transcurrido ese minuto, el contador desaparece y se muestra este cupón:

CuponDescuento 20%

Con un diseño atractivo y animación suave para mejorar la experiencia del usuario.

Cómo usar este contador en tu web

1. Abre el editor de bloques de la entrada o página donde quieres mostrar el contador.
2. Añade un bloque HTML personalizado.
3. Pega dentro todo este código:

<div id="contador-cupon" style="max-width: 500px; margin: 40px auto; padding: 30px; border: 2px solid #009975; border-radius: 16px; text-align: center; font-family: Arial, sans-serif; background: #f9fafb; box-shadow: 0 4px 12px rgba(0,0,0,0.05);">
  <h2 style="color: #111518; margin-bottom: 10px;">¡Estás a punto de conseguir un cupón exclusivo!</h2>
  <p style="color: #687279; font-size: 16px; margin-bottom: 20px;">Solo tienes que esperar 1 minuto y desbloquearás tu recompensa. 🎁</p>
  
  <div id="contador-box" style="font-size: 36px; font-weight: bold; color: #13b0a0; margin-bottom: 20px;">
    <span id="tiempo-restante">01:00</span>
  </div>
  
  <div id="cupon" style="display:none; opacity: 0; transition: opacity 1s ease-in-out;">
    <p style="font-size: 20px; color: #111518; margin-bottom: 10px;">¡Felicidades! Aquí tienes tu cupón de descuento:</p>
    <div style="background-color: #009975; color: white; padding: 15px 25px; border-radius: 12px; font-size: 24px; font-weight: bold; display: inline-block;">
      CuponDescuento 20%
    </div>
    <p style="color: #687279; font-size: 14px; margin-top: 10px;">Cópialo y úsalo antes de que expire.</p>
  </div>
</div>

<script>
  (function(){
    let duracion = 60; // segundos
    const tiempoRestante = document.getElementById('tiempo-restante');
    const contadorBox = document.getElementById('contador-box');
    const cupon = document.getElementById('cupon');

    const intervalo = setInterval(() => {
      const minutos = String(Math.floor(duracion / 60)).padStart(2, '0');
      const segundos = String(duracion % 60).padStart(2, '0');
      tiempoRestante.textContent = `${minutos}:${segundos}`;

      if (duracion <= 0) {
        clearInterval(intervalo);
        contadorBox.style.display = 'none';
        cupon.style.display = 'block';
        setTimeout(() => {
          cupon.style.opacity = 1;
        }, 100); // activa la transición
      }

      duracion--;
    }, 1000);
  })();
</script>Lenguaje del código: HTML, XML (xml)

Cómo cambiar el tiempo del contador

Si quieres que el contador dure más o menos tiempo, solo tienes que cambiar el valor de la variable duracion en segundos.

En esta línea:

let duracion = 60; // segundos

• Para 2 minutos, escribe 120.
• Para 30 segundos, escribe 30.
• Para 5 minutos, escribe 300.

Ejemplo para 2 minutos:

let duracion = 120; // 2 minutos = 120 segundos

Recuerda que el número que pongas ahí representa los segundos totales del contador.

Conclusión

Con un simple bloque HTML puedes añadir funcionalidades dinámicas como esta sin complicaciones. Este tipo de contador puede aumentar el interés del usuario, incentivar la permanencia en la página y ayudarte a destacar promociones.

¿Ya lo estás usando en tu web? Cuéntame tu experiencia o personalizaciones.