L’Event Progress Countdown montre la proximité d’un événement avec une barre qui se remplit à mesure que la date approche, au lieu de s’appuyer uniquement sur les chiffres. Il est conçu pour les webinaires, les lancements et les sessions en direct, et comprend un bouton d’inscription et un lien d’ajout au calendrier. Il existe deux versions aux réglages identiques — choisissez la forme qui convient à l’endroit voulu.
Les deux versions
- Event Progress Countdown — une seule colonne centrée : le texte en haut, puis la barre et le minuteur, puis les boutons. Idéal comme panneau dans une page, ou en prise de contrôle plein écran.
- Event Progress Countdown (Side-by-Side) — deux colonnes : le texte et les boutons d’un côté, le minuteur et la barre de l’autre. Idéal pour les larges sections principales.
Tout ce qui suit s’applique aux deux, sauf mention contraire.
Régler l’heure de l’événement
Le compte à rebours lui-même se règle dans la section Timer, sous Countdown logic, exactement comme dans les autres modèles de compte à rebours. Pour un vrai événement, utilisez une date et une heure fixes pour que tout le monde voie la même échéance. La barre de progression lit ce même compte à rebours : vous ne définissez la date qu’une fois.
Comment la barre sait où commencer
Un compte à rebours n’a besoin que d’une date de fin, mais une barre a aussi besoin d’un début — sinon impossible de savoir ce que signifie « à mi-chemin ». C’est le rôle de Progress Window (days).
Il répond à la question : combien de temps avant l’événement la barre doit-elle commencer à se remplir ? Avec la valeur par défaut de 14, la barre est vide deux semaines avant l’événement, à moitié pleine une semaine avant, et atteint la fin exactement au début de l’événement. Réglez-la selon la durée de votre campagne — 30 pour une campagne d’un mois, 7 pour une dernière semaine.
Avant l’ouverture de la fenêtre, la barre reste simplement vide ; rien ne casse si vous placez l’événement plus loin.
Remplir ou vider
Bar Direction détermine le sens du mouvement. fill se remplit vers l’événement et se lit « c’est presque là ». drain se vide à mesure que le temps s’écoule et se lit « le temps presse ». Les deux utilisent le même compte à rebours ; il s’agit seulement de l’histoire que vous voulez raconter.
Des messages qui changent à l’approche de l’événement
C’est ce qui fait tout l’intérêt de la barre. Sous Progress Messages, vous pouvez définir jusqu’à quatre étapes, chacune avec son propre texte et sa propre couleur de barre. Au fil du temps, le message est remplacé : le visiteur voit toujours le plus urgent qui s’applique :
- Étape 1 — 336 heures (14 jours) — « Réservez la date »
- Étape 2 — 168 heures (7 jours) — « Plus qu’une semaine »
- Étape 3 — 24 heures — « Dernière chance pour s’inscrire »
- Étape 4 — 1 heure — « Ça commence bientôt »
Chaque étape est un nombre d’heures avant l’événement. L’étape affichée est celle au plus petit nombre sous lequel le temps restant est passé : vous pouvez donc les saisir dans n’importe quel ordre. Chaque étape définit aussi la couleur de la barre, d’où les valeurs par défaut vert, bleu, ambre puis corail.
Un seul message est visible à la fois — contrairement à une barre de montant du panier, où tous les paliers sont affichés ensemble. C’est voulu : le visiteur ne peut rien faire pour accélérer un compte à rebours, donc l’intérêt réside dans le changement de message, pas dans la vue de toute l’échelle.
Désactivez l’ensemble avec Use Changing Messages si vous préférez une barre simple.
Afficher la barre sans les chiffres
Réglez Show Numeric Timer sur No et les cases du compte à rebours disparaissent, ne laissant que la barre et son message. Le compte à rebours continue de tourner en arrière-plan et pilote toujours la barre. C’est une bonne option quand un décompte précis à la seconde paraît trop agressif pour l’audience.
Styliser la barre
- Bar Style — extrémités arrondies ou carrées, et une barre plus fine ou plus épaisse.
- Bar Animation — stripes pour des rayures diagonales en mouvement, shimmer pour un reflet qui balaie la barre, pulse pour un éclaircissement doux, ou aucune.
- Bar Position (version à une colonne uniquement) — au-dessus du minuteur, en dessous du minuteur, au-dessus du titre, ou sous les boutons.
Dans la version côte à côte, la barre se place toujours avec le minuteur dans sa propre colonne, centrée verticalement par rapport au texte : il n’y a donc pas de réglage de position.
Icône, texte et boutons
- Event Icon — un calendrier, une caméra, un micro, un billet, etc., affiché à côté du texte. Désactivez-la si vous préférez.
- Eyebrow, Title, Subtext — votre texte d’accroche, plus des lignes courtes facultatives au-dessus et en dessous du minuteur.
- Bouton principal — votre lien d’inscription, avec une icône facultative à l’intérieur.
- Second bouton — configuré comme « Ajouter au calendrier ». Faites-le pointer vers votre lien Google Agenda, votre lien Outlook ou un fichier
.ics. - Bouton ‘No thanks’ — un lien de refus facultatif, affiché sur sa propre ligne sous les deux boutons.
Quand l’événement commence
Définissez le message affiché à zéro dans la section Timer. Avec When Timer Ends sur Yes, il remplace tout le contenu : le visiteur voit une seule ligne claire, comme « Cette session a commencé ». Réglez-le sur No et seul le minuteur est remplacé.
Apparence
Le préréglage (dark, light ou brand), la taille, le rayon des coins, l’ombre, une image d’arrière-plan facultative avec un calque assombrissant, des formes décoratives facultatives et l’animation des boutons fonctionnent exactement comme dans les autres modèles de compte à rebours.
Le fermer, et une remarque importante pour les tests
La section Close contrôle le bouton X et s’il s’affiche toujours ou seulement au survol. Le fermer empêche aussi l’action de réapparaître pendant un certain temps.
Lisez ceci avant de tester : une fois fermé, il cesse d’apparaître pour vous aussi pendant le nombre de sessions défini sur l’action. On peut facilement croire que le modèle est cassé alors qu’il fonctionne exactement comme configuré. Donc :
- Terminez vos tests et votre QA d’abord, et activez le masquage ensuite.
- Pour le revoir, effacez les cookies et les données du site pour votre site, ou utilisez une fenêtre de navigation privée.
- Le nombre de sessions se règle sur l’action sous Placement / Trigger, pas dans le modèle.
Remarque sur l’aperçu de l’éditeur
Le compte à rebours ne tourne pas dans le panneau de l’éditeur : la barre y reste donc à sa position de départ. Le mode plein écran s’affiche aussi comme un bloc ordinaire dans l’éditeur pour ne pas couvrir la barre d’outils d’édition. Utilisez l’aperçu en direct pour voir les deux correctement. C’est normal.
Notes techniques
- La barre est pilotée par le même compte à rebours que celui défini dans la section Timer : les fuseaux horaires et la logique de date sont donc gérés pour vous. Il n’y a pas de seconde date à synchroniser.
- La barre se met à jour chaque seconde, en même temps que le compte à rebours.
- Si vous masquez une unité en vidant son libellé, la barre fonctionne toujours — elle lit le temps restant à partir des unités affichées.
- Qui voit le compte à rebours, où et à quelle fréquence se règle sur l’action, pas dans le modèle.
Pour aller plus loin
- Modèles de popups pour site web — les 16 modèles, et comment choisir le bon format.