Blocco Conto alla rovescia
Un timer dal vivo per lanci, saldi e scadenze — renderizzato lato server come GIF animata, l'unica tecnica che continua davvero a scorrere in ogni client di posta principale, Outlook incluso.
Come funziona
Nessun client di posta esegue animazioni CSS o JavaScript in modo abbastanza affidabile da animare un orologio da zero, quindi il blocco conto alla rovescia non ci prova nemmeno; incorpora invece un semplice <img> che punta a una GIF animata renderizzata lato server. A ogni recupero, MailInApp calcola il tempo restante fino alla scadenza configurata e codifica da zero un'immagine fresca in stile orologio digitale "DD:HH:MM:SS" (un encoder GIF89a costruito da zero, non una libreria incapsulata). Disegna un secondo per fotogramma per sessanta fotogrammi, poi si blocca sull'ultimo fotogramma, così l'immagine scorre visibilmente per un minuto intero una volta aperta, per poi fermarsi. Poiché l'immagine viene rigenerata a partire dalla scadenza reale al momento del recupero anziché renderizzata una sola volta al momento dell'invio, resta accurata indipendentemente da quando o quante volte un destinatario apre l'email. L'endpoint invia anche header no-cache, così i proxy immagine come quello di Gmail la recuperano di nuovo a ogni apertura invece di riutilizzare un fotogramma obsoleto in cache.
L'URL dell'immagine stesso è firmato con HMAC (il timestamp della scadenza e il colore sono incorporati nella firma), così non può essere usato come renderizzatore autonomo e gratuito di conti alla rovescia GIF da chiunque non sia MailInApp. L'endpoint è pubblico, come gli endpoint delle interazioni e del tracciamento delle aperture, ma serve solo ciò per cui è stato firmato su richiesta.
Non c'è divergenza tra email e vista live come invece accade per Carosello o Fisarmonica — entrambi i contesti incorporano lo stesso identico endpoint immagine. La posta usa un URL assoluto (un'email non ha un'origine di pagina rispetto a cui risolvere un percorso relativo), mentre la vista live ne usa uno relativo all'origine.
Non esiste nemmeno un "livello di fallback" separato oltre all'immagine stessa. Un client che non può animare le GIF mostra comunque il primo fotogramma — uno snapshot significativo e accurato del tempo rimanente, non un segnaposto. Il testo alternativo del blocco e la parte in testo semplice dell'email riportano entrambi lo stesso tempo rimanente a parole (ad es. "L'offerta termina tra 2g 4h"), così la scadenza resta leggibile anche con le immagini completamente disattivate.
Una volta trascorsa la scadenza, il blocco smette di renderizzare la GIF e passa invece a un testo semplice di stato concluso — nessuna nuova richiesta immagine, nessun "00:00:00:00" obsoleto che resta appeso.
Campi configurabili:
- Etichetta — testo mostrato sopra l'immagine che scorre, ad es. "L'offerta termina tra".
- Scade il — la scadenza, scelta come data e ora.
- Colore — il colore delle cifre/del testo, usato sia nella GIF renderizzata sia nel testo di stato concluso.
- Dimensione font (px) — la dimensione del font dell'etichetta durante il conto alla rovescia.
- Dimensione font a fine conto (px) — la dimensione del font del messaggio "Questa offerta è terminata" mostrato dopo il passaggio della scadenza.
Un conto alla rovescia è contenuto puro, come un blocco immagine o testo — non c'è nulla da toccare o inviare, quindi non genera mai un evento di interazione e non compare mai nella dashboard delle risposte, nell'esportazione CSV o in un webhook di progetto.
Esempi
Subject
Our biggest sale of the year starts now
Un'email di vendita flash con una scadenza di 24 ore è il caso d'uso canonico: il conto alla rovescia che scorre visibilmente è ciò che rende l'urgenza leggibile a colpo d'occhio. Resta accurato sia che il destinatario la apra nel minuto in cui arriva, sia due giorni dopo, quando la vendita è già terminata — momento in cui mostra correttamente lo stato concluso invece di una bugia congelata. Un lancio prodotto a inventario limitato può abbinare un conto alla rovescia a un blocco Prodotto così che sia l'orologio sia il conteggio delle scorte comunichino insieme l'urgenza. Vedi Ecommerce e lanci prodotto per il pattern completo. Un promemoria di registrazione a un evento può contare alla rovescia fino alla scadenza di registrazione (non l'evento stesso; è quello a cui serve Aggiungi al calendario) per spingere gli indecisi ad agire prima che la finestra si chiuda.
Come appare il fallback statico
<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>
Non esiste un "markup di fallback" separato oltre a questo: ogni client renderizza lo stesso tag <img>. Ciò che cambia è solo se quel client anima le GIF (la maggior parte lo fa) oppure si blocca sul primo fotogramma (una manciata di client legacy) — in entrambi i casi viene comunque mostrato un tempo rimanente accurato.