Bloc Compte à rebours
Un minuteur en direct pour les lancements, soldes et échéances — rendu côté serveur sous forme de GIF animé, la seule technique qui continue réellement de défiler dans tous les grands clients de messagerie, Outlook inclus.
Comment ça fonctionne
Aucun client de messagerie n'exécute les animations CSS ou JavaScript de manière assez fiable pour animer une horloge à partir de zéro, donc le bloc compte à rebours ne s'y risque pas ; il intègre un simple <img> pointant vers un GIF animé rendu côté serveur. À chaque récupération, MailInApp calcule le temps restant jusqu'à l'échéance configurée et encode une image d'horloge numérique fraîche, de style « JJ:HH:MM:SS », entièrement à partir de zéro (un encodeur GIF89a maison, pas une bibliothèque encapsulée). Il dessine une seconde par image pendant soixante images, puis se fige sur la dernière, si bien que l'image défile visiblement pendant une minute complète une fois ouverte, puis se stabilise. Comme l'image est régénérée à partir de la véritable échéance au moment de la récupération plutôt que rendue une seule fois à l'envoi, elle reste exacte quel que soit le moment ou le nombre de fois où un destinataire ouvre l'email. L'endpoint envoie aussi des en-têtes no-cache, afin que les proxys d'images comme celui de Gmail récupèrent à nouveau à chaque ouverture plutôt que de réutiliser une image mise en cache périmée.
L'URL de l'image elle-même est signée par HMAC (l'horodatage de l'échéance et la couleur sont intégrés dans la signature), afin qu'elle ne puisse pas être utilisée comme un simple générateur de GIF de compte à rebours par quiconque n'est pas MailInApp. L'endpoint est public, comme les endpoints d'interactions et de suivi des ouvertures, mais il ne sert que ce qu'on lui a demandé de signer.
Il n'y a pas de divergence entre l'email et la vue en direct comme pour le carrousel ou l'accordéon — les deux contextes intègrent le même endpoint d'image. L'email utilise une URL absolue (un email n'a pas d'origine de page à partir de laquelle résoudre un chemin relatif), tandis que la vue en direct en utilise une relative à l'origine.
Il n'y a pas non plus de « niveau de repli » séparé au-delà de l'image elle-même. Un client qui ne peut pas animer les GIF affiche quand même la première image — un instantané significatif et exact du temps restant, pas un simple espace réservé. Le texte alternatif du bloc et la partie texte brut de l'email portent tous deux le même temps restant en mots (par ex. « L'offre se termine dans 2j 4h »), si bien que l'échéance reste lisible même avec les images désactivées.
Une fois l'échéance passée, le bloc arrête de rendre le GIF et bascule vers un texte d'état terminé — plus de requête d'image, plus de « 00:00:00:00 » figé qui traîne.
Champs configurables :
- Libellé — texte affiché au-dessus de l'image de décompte, par ex. « L'offre se termine dans ».
- Se termine à — l'échéance, choisie comme une date et une heure.
- Couleur — la couleur des chiffres/du texte, utilisée à la fois dans le GIF rendu et le texte d'état terminé.
- Taille de police (px) — la taille de police du libellé pendant le décompte.
- Taille de police une fois terminé (px) — la taille de police du message « Cette offre est terminée » affiché après l'échéance.
Un compte à rebours est du contenu pur, comme un bloc image ou texte — il n'y a rien à toucher ni à soumettre, donc il ne génère jamais d'événement d'interaction et n'apparaît jamais dans le tableau de bord des réponses, l'export CSV, ou un webhook de projet.
Exemples
Subject
Our biggest sale of the year starts now
Un email de vente flash avec une échéance de 24 heures est l'usage canonique : le compte à rebours qui défile visiblement est ce qui rend l'urgence lisible d'un coup d'œil. Il reste exact que le destinataire l'ouvre la minute où il arrive ou deux jours plus tard, une fois la vente déjà terminée, auquel cas il affiche correctement l'état terminé plutôt qu'un mensonge figé. Un lancement de produit à stock limité peut associer un compte à rebours à un bloc produit pour que l'horloge et le décompte de stock communiquent l'urgence ensemble. Voir Ecommerce et lancements de produits pour le modèle complet. Un rappel d'inscription à un événement peut décompter jusqu'à l'échéance d'inscription (pas l'événement lui-même ; c'est le rôle du bloc ajouter au calendrier) pour pousser les indécis à agir avant la fermeture de la fenêtre.
À quoi ressemble l'alternative statique
<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>
Il n'y a pas de « balisage de repli » distinct au-delà de ceci : chaque client rend la même balise <img>. Ce qui diffère, c'est seulement si ce client anime les GIF (la plupart le font) ou se fige sur la première image (une poignée de clients historiques) — les deux cas affichent quand même un temps restant exact.