Comment créer un compte à rebours en HTML

Lancement de produit, ouverture des soldes ou encore ventes flash : de nombreux évènements sont annoncés dans une newsletter ou sur une landing page avec un compte à rebours. Plusieurs méthodes permettent de faire un compte à rebours avec HTML. Un développeur expérimenté peut utiliser JavaScript pour créer et contrôler l'élément, et lui associer du code HTML et CSS pour la mise en page et le style. Une méthode plus simple existe : utiliser un générateur de comptes à rebours personnalisables. L'outil fournit le code, à intégrer dans le fichier HTML de la page web ou de l'e-mail marketing où afficher le décompte.

Dans quels cas utiliser un compte à rebours pour son site web ?

Utiliser un compte à rebours pour son site web est pertinent à de multiples occasions :

• Pour décompter les jours avant le lancement d'un site web en construction, ou avant un lancement de produit.
• Pour indiquer le temps restant jusqu'à la fin d'une vente flash ou de tout autre type d'offre promotionnelle limitée.
• Pour afficher le temps à attendre avant le début des soldes ou du Black Friday.
• Pour informer un prospect de la durée de validité de son panier d'achat.

Utiliser un compte à rebours permet non seulement de rendre une page dynamique et ludique, mais aussi de créer un sentiment d'urgence ou de hâte : l'urgence de participer à un évènement à durée limitée, ou la hâte qu'un évènement débute. L'attention des visiteurs du site web est portée sur le caractère imminent du début ou de la fin de l'évènement. Le compte à rebours permet ainsi de faire retenir plus facilement une date, ou un délai, et incite les visiteurs du site web à agir au bon moment.

Prérequis avant de créer un compte à rebours en HTML

Avant de se lancer dans la création de l'élément avec HTML, il faut savoir que :

• Le langage HTML, seul, ne permet pas de créer et d'animer un élément dynamique de type compte à rebours. C'est le rôle du langage JavaScript de programmer ce type de widget et de gérer son comportement. HTML pour sa part, associé à CSS, sert à déterminer l'emplacement de l'élément et la manière dont il s'affiche. Le titre et la taille du compte à rebours, par exemple, sont créés avec HTML.
• Maîtriser parfaitement les langages de programmation n'est pas obligatoire pour intégrer un widget de compte à rebours sur une page web ou dans un e-mail marketing. Des outils, de plus ou moins bonne qualité, existent en effet pour faciliter le travail du développeur. Ces outils génèrent automatiquement un morceau de code prêt à l'emploi, également appelé « snippet ». Il suffit de le coller dans le fichier HTML de destination.
• Avoir des notions en HTML est important pour personnaliser le compte à rebours selon ses exigences. Changer la couleur du texte HTML, par exemple, permet de respecter le code couleurs du site web. À noter que certains outils proposent des palettes pour sélectionner la couleur de son choix, sans avoir besoin de coder. D'autres exigent de renseigner le code hexadécimal ou la valeur RGBA de la couleur. Les modalités et options de personnalisation sont variables d'un outil à l'autre.
• Si le site web est créé à l'aide d'un CMS, il est possible que le CMS propose, parmi ses plugins, un générateur de comptes à rebours. De même, certaines solutions d'e-mailing mettent à disposition de tels plugins. Le cas échéant, l'utilisateur n'a même pas besoin de copier-coller du code HTML, le widget est directement intégré sur la page web ou dans la newsletter.

À noter que certaines boîtes mail ne sont pas compatibles avec l'élément HTML compte à rebours. Le compteur tourne correctement en arrière-plan, mais ne défile pas de manière visible à l'ouverture de la newsletter. L'effet escompté, dans ce cas, n'est pas atteint. Une alternative consiste à ajouter une image animée pour attirer l'attention sur l'écoulement du temps : un GIF de compte à rebours, par exemple.

5 étapes pour créer le compte à rebours en HTML

1. Choisir un outil pour générer le code HTML du compte à rebours. Il existe de nombreuses solutions en ligne, gratuites ou payantes : Sendtric, Watch Is Up ou TickCounter, par exemple. Chaque outil propose ses propres options pour personnaliser l'affichage du compteur. Pour bien choisir, il est important de tester la solution en amont, en générant un aperçu.
2. Déterminer l'apparence du compte à rebours. Le compteur peut afficher les jours, les minutes, les heures et les secondes, ou seulement certaines de ces unités de temps. À cette étape, il faut également définir la couleur des chiffres et la couleur de fond, ainsi que l'apparence de l'arrière-plan.
3. Fixer la date de début ou de fin de l'évènement et sélectionner un fuseau horaire. Il est également possible de paramétrer un message qui s'affiche lorsque le compteur arrive à zéro.
4. Générer le snippet et copier-coller le code. Les outils de création de comptes à rebours génèrent le code HTML sous différents formats : adresse URL à partager sur les réseaux sociaux, Iframe et lien hypertexte, notamment. L'Iframe est le seul élément HTML qui permet d'intégrer le compte à rebours dans le corps de la page web ou de l'e-mail. Les autres options redirigent vers la plateforme qui a servi à créer le compte à rebours.
5. Rédiger un titre et créer un bouton HTML CTA. Le titre décrit l'évènement, et le bouton permet d'agir : s'inscrire à l'évènement à venir, se rendre sur la page web des ventes flash ou encore payer sa commande en attente dans le panier.

Exemples de compte à rebours

Le compte à rebours pour annoncer l'ouverture d'un magasin

La marque de vêtements Uniqlo, après plusieurs mois de travaux, rouvre sa boutique dans le quartier Opéra à Paris. Pour en faire un évènement attendu, une page web spécialement dédiée est créée sur le site web. Le compte à rebours, ici, affiche le délai jusqu'à l'ouverture imminente du magasin, pour susciter la hâte. Les internautes peuvent cliquer sur le bouton CTA pour enregistrer la date dans leur calendrier, et pour partager l'évènement.

Le compte à rebours pour alerter sur la fin imminente d'une vente flash

L'enseigne La Redoute, dans le cadre d'une vente flash, affiche en haut de page un décompte des jours, heures et minutes restant à s'écouler avant la fin d'une offre promotionnelle. Le compte à rebours, en blanc sur fond rouge, attire l'œil. En conséquence, les internautes sont incités à consulter le détail de la vente sans tarder.

Le compte à rebours pour indiquer le délai de validité d'un panier d'achat

La marque de prêt-à-porter Sézane utilise ici le compte à rebours à titre d'information. À l'écoulement du temps, la disponibilité des pièces n'est plus garantie. Le prospect, en conséquence, est pressé de prendre sa décision d'achat. Le chronomètre est discret, mais l'affichage des secondes augmente l'empressement.

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez le CMS de HubSpot.