Bloque de cuenta regresiva
Un temporizador de plazo en vivo para lanzamientos, ofertas y fechas de cierre — renderizado del lado del servidor como un GIF animado, la única técnica que realmente sigue contando en todos los clientes de correo principales, Outlook incluido.
Cómo funciona
Ningún cliente de correo ejecuta animaciones CSS o JavaScript de forma lo bastante confiable como para animar un reloj desde cero, así que el bloque de cuenta regresiva no lo intenta; en su lugar, incrusta un <img> simple que apunta a un GIF animado renderizado en el servidor. En cada solicitud, MailInApp calcula el tiempo restante hasta el plazo configurado y codifica desde cero una imagen fresca de reloj digital estilo "DD:HH:MM:SS" (un codificador GIF89a construido desde cero, no una biblioteca envuelta). Dibuja un segundo por cuadro durante sesenta cuadros, y luego se congela en el último cuadro, así que la imagen cuenta visiblemente durante un minuto completo una vez abierta, y luego se detiene. Como la imagen se regenera a partir del plazo real en el momento de la solicitud en lugar de renderizarse una vez de antemano en el momento del envío, es precisa sin importar cuándo o cuántas veces un destinatario abra el correo. El endpoint también envía encabezados no-cache, así que los proxies de imágenes como el de Gmail vuelven a solicitarla en cada apertura en lugar de reutilizar un cuadro obsoleto en caché.
La URL de la imagen en sí está firmada con HMAC (la marca de tiempo del plazo y el color están incorporados en la firma), así que nadie que no sea MailInApp puede usarla como un renderizador de cuenta regresiva en GIF independiente y gratuito. El endpoint es público, como los endpoints de interacciones y seguimiento de aperturas, pero solo sirve lo que se le ha pedido firmar.
No hay divergencia entre correo y vista en vivo como sí ocurre con el carrusel o el acordeón — ambos contextos incrustan el mismo endpoint de imagen idéntico. El correo usa una URL absoluta (un correo no tiene un origen de página contra el cual resolver una ruta relativa), mientras que la vista en vivo usa una relativa al origen.
Tampoco hay un "nivel de alternativa" separado más allá de la imagen misma. Un cliente que no puede animar GIF igual muestra el primer cuadro — una instantánea significativa y precisa del tiempo restante, no un marcador de posición. El texto alternativo del bloque y la parte de texto plano del correo llevan ambos el mismo tiempo restante en palabras (por ejemplo, "La oferta termina en 2d 4h"), así que el plazo se sigue leyendo incluso con las imágenes completamente desactivadas.
Una vez que el plazo pasa, el bloque deja de renderizar el GIF y cambia a texto de estado finalizado simple en su lugar — sin más solicitudes de imagen, sin un "00:00:00:00" obsoleto dando vueltas.
Campos configurables:
- Etiqueta — texto mostrado encima de la imagen que cuenta, por ejemplo "La oferta termina en".
- Termina en — el plazo, elegido como fecha y hora.
- Color — el color de los dígitos/texto, usado tanto en el GIF renderizado como en el texto de estado finalizado.
- Tamaño de fuente (px) — el tamaño de fuente de la etiqueta mientras cuenta.
- Tamaño de fuente al finalizar (px) — el tamaño de fuente del mensaje "Esta oferta ha terminado" mostrado después de que pasa el plazo.
Una cuenta regresiva es contenido puro, como un bloque de imagen o texto — no hay nada que tocar ni enviar, así que nunca genera un evento de interacción y nunca aparece en el panel de respuestas, la exportación CSV, ni un webhook de proyecto.
Ejemplos
Subject
Our biggest sale of the year starts now
Un correo de oferta relámpago con un plazo de 24 horas es el uso canónico: la cuenta regresiva contando visiblemente hacia atrás es lo que hace legible la urgencia de un vistazo. Se mantiene precisa tanto si el destinatario lo abre en el minuto en que llega como si lo hace dos días después, cuando la oferta ya terminó, momento en el cual muestra correctamente el estado finalizado en lugar de una mentira congelada. Un lanzamiento de producto con inventario limitado puede combinar una cuenta regresiva con un bloque de producto para que tanto el reloj como el conteo de existencias comuniquen urgencia juntos. Mira Comercio electrónico y lanzamientos de producto para el patrón completo. Un recordatorio de registro a un evento puede contar regresivamente hasta el plazo de registro (no el evento en sí; para eso está agregar al calendario) para empujar a los indecisos a actuar antes de que se cierre la ventana.
Cómo se ve la alternativa estática
<div style="margin:12px 0">
<p style="margin:0 0 6px;font-size:16px;font-weight:700;color:#111827">Offer ends in</p>
<img
src="https://mailinapp.com/api/countdown?t=1753401600000&c=111827&s=9f2a...&"
width="207" height="34"
alt="Offer ends in 2d 4h"
style="display:block;max-width:100%;height:auto"
>
</div>
No hay un "marcado de alternativa" separado más allá de esto: todo cliente renderiza la misma etiqueta <img>. Lo que difiere es solo si ese cliente anima GIF (la mayoría lo hace) o se congela en el primer cuadro (un puñado de clientes heredados) — en ambos casos se sigue mostrando un tiempo restante preciso.