Modèles de compte à rebours (carte, barre et barre d’événement)

Les modèles de compte à rebours placent un minuteur en direct devant vos visiteurs pour créer de l’urgence autour d’une échéance — une vente qui se termine, un prix qui augmente, ou un événement qui commence. Il y en a trois. Ils partagent le même moteur de minuteur et presque tous les mêmes réglages : si vous en connaissez un, vous les connaissez tous ; choisissez la forme qui convient à l’endroit où vous voulez l’afficher.

Les trois modèles

• Countdown Timer Card — une carte avec le titre, le minuteur et le bouton. Utilisez-la intégrée à une page, associez-la au fond modal de l’action pour en faire un popup, ou passez-la en prise de contrôle plein écran. Elle peut être empilée (tout centré) ou côte à côte (le texte d’un côté, le minuteur de l’autre).
• Countdown Timer Bar — une bande pleine largeur épinglée en haut ou en bas de l’écran, comme une barre d’annonce avec un minuteur en direct. Elle peut aussi être intégrée à la page.
• Event Countdown Bar — la même bande, configurée pour les webinaires, les lancements et les événements en direct. Elle ajoute une icône d’événement, des icônes sur les boutons, et un second lien « Ajouter au calendrier ».

Tout ce qui suit s’applique aux trois, sauf mention contraire.

Régler le compte à rebours

Ouvrez la section Timer et utilisez Countdown logic. Vous avez deux façons de décompter :

• Une date et une heure fixes — tout le monde voit la même échéance. À utiliser pour un vrai événement ou une vente qui se termine réellement à un moment précis.
• Un compte à rebours par visiteur — chaque visiteur a sa propre fenêtre (par exemple une heure à partir de sa première vue), stockée dans son navigateur. À utiliser pour les offres permanentes. Vous pouvez aussi le laisser redémarrer après une période choisie.

Par défaut, les modèles sont réglés sur un compte à rebours d’une heure par visiteur : un minuteur tourne donc dès que vous déposez le modèle. Remplacez-le par votre vraie échéance avant la mise en ligne.

Choisir les unités à afficher

Le minuteur affiche les jours, heures, minutes et secondes. Pour masquer une unité, videz son libellé dans la section Timer — vider « Days Label » supprime toute la case des jours, pas seulement la légende. C’est ainsi que l’on n’affiche, par exemple, que les heures et les minutes.

Vous pouvez aussi remplacer les libellés par votre propre formulation, et définir le Separator Between Boxes (le caractère : ) ou le vider pour ne mettre aucun séparateur.

Styliser le minuteur

Chaque partie du minuteur a son propre réglage de style : la case derrière chaque nombre, le nombre lui-même, la légende en dessous, le séparateur, et le conteneur qui entoure le tout. Par défaut, vous obtenez des cases blanches avec des chiffres sombres et un séparateur coloré.

À savoir : le style des cases s’applique aussi aux séparateurs ; si vous donnez un fond aux cases, il apparaîtra aussi derrière le séparateur, sauf si le style du séparateur le remplace. Les valeurs par défaut fournies gèrent déjà ce cas.

Le texte autour du minuteur

En plus du surtitre, du titre et du sous-texte, vous pouvez activer une courte ligne au-dessus et en dessous du minuteur — par exemple « L’offre se termine dans » au-dessus et « Places limitées » en dessous. Les deux sont désactivées par défaut ; activez-les dans la section Timer et définissez votre propre texte. Elles accompagnent le minuteur où que vous le placiez.

Quand le minuteur atteint zéro

Dans la section Timer, vous pouvez définir un message à afficher à la fin du compte à rebours. When Timer Ends détermine ce qu’il advient du reste du contenu :

• Yes (par défaut) — le message remplace tout : le visiteur voit un seul message clair, comme « Cette offre est terminée ».
• No — seul le minuteur est remplacé ; le titre et les boutons restent.

Où il apparaît

Carte : inline la place dans la page à l’endroit où l’action est placée — combinez-la avec le réglage de fond modal de l’action si vous voulez un popup classique. fullscreen transforme tout l’écran en arrière-plan, en couleur unie ou avec votre propre image, avec le contenu centré.

Barres : top ou bottom épingle la bande sur ce bord de l’écran pour qu’elle reste visible pendant le défilement ; inline la laisse dans le flux de la page.

Apparence

• Preset — couleurs dark, light ou brand.
• Size — compact, default ou spacious.
• Corner Radius et Shadow — du carré et plat jusqu’à l’arrondi et marqué. Sur une barre épinglée, les coins restent carrés pour qu’elle s’aligne sur le bord.
• Background Image — désactivée par défaut. Activez-la, choisissez une image, et utilisez Background Overlay pour l’assombrir afin que votre texte reste lisible.
• Decorative Shapes — des cercles, coins ou anneaux discrets facultatifs à l’arrière-plan. Ils reprennent automatiquement la couleur du préréglage.
• Logo — désactivé par défaut ; activez-le et choisissez votre image.
• Button Animation — une pulsation douce, un léger halo, ou aucune.
• Timer Urgency Pulse — une pulsation discrète et récurrente sur le minuteur lui-même.

Boutons

Les trois ont un appel à l’action principal avec votre propre texte et votre propre lien, plus un bouton « No thanks » facultatif qui se contente de fermer le modèle.

L’Event Countdown Bar ajoute un second lien à côté du bouton principal, configuré par défaut comme « Ajouter au calendrier ». Faites-le pointer vers votre lien Google Agenda, votre lien Outlook ou un fichier .ics . Il vous permet aussi de placer une icône dans chaque bouton, et une icône d’événement à côté du texte — un calendrier, une caméra, un micro, un billet, etc.

Le fermer, et une remarque importante pour les tests

La section Close contrôle le bouton X : s’il s’affiche, son apparence, et s’il est toujours visible ou seulement au survol. Le bouton de fermeture empêche aussi l’action de s’afficher à nouveau pendant un certain temps.

Lisez ceci avant de tester : une fois l’action fermée, elle 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.
• S’il a déjà cessé d’apparaître et que vous devez le revoir, effacez les cookies et les données du site pour votre site, ou ouvrez-le dans une fenêtre de navigation privée.
• Le nombre de sessions pendant lesquelles il reste masqué se règle sur l’action elle-même, sous Placement / Trigger, pas dans le modèle.

Remarque sur l’aperçu de l’éditeur

Deux choses ne se produisent que sur votre vrai site, pas dans le panneau de l’éditeur :

• Le minuteur ne décompte que dans l’aperçu en direct et sur votre site. Dans l’éditeur, il s’affiche comme un ensemble statique de cases.
• Les barres plein écran et épinglées ne flottent pas dans l’éditeur. Elles s’affichent volontairement comme un bloc ordinaire pour ne pas couvrir la barre d’outils d’édition. Utilisez l’aperçu en direct pour les voir correctement.

C’est un comportement normal, pas un défaut.

Notes techniques

• Qui voit le compte à rebours, où et à quelle fréquence se règle sur l’action, pas dans le modèle. Le modèle ne contrôle que son apparence et son comportement.
• Les trois modèles utilisent le moteur de compte à rebours intégré à Personyze : les fuseaux horaires et la logique de cookie par visiteur sont donc gérés pour vous.
• Le minuteur reste sur une seule ligne à toutes les tailles, y compris sur téléphone, où les cases rétrécissent au lieu de passer à la ligne.
• Sur les écrans étroits, les barres empilent automatiquement leur contenu en colonne.

Pour aller plus loin

• Modèles de popups pour site web — les 16 modèles, et comment choisir le bon format.
• Marketing de la ludification — les mécanismes des modèles interactifs et leur place.