Générateur de Widget Compte à Rebours
Créez de beaux compteurs à rebours pour votre site web. Personnalisez les couleurs, la taille et le comportement à expiration.
Ce générateur de widget de compte à rebours produit une balise <script> unique qui affiche un compte à rebours en direct à l'endroit où vous la collez. Réglez Target Date & Time, les couleurs, la taille et les cases Days, Hours, Minutes et Seconds : le panneau Code d'intégration se réécrit au fil de la saisie. Seuls les réglages modifiés sont écrits : un compte à rebours laissé sur tous ses défauts tient en une ligne, la source du script plus data-date.
Personnaliser
Préréglages
Aperçu en direct
Code d'Intégration
Outils populaires
À propos de Générateur de Widget Compte à Rebours
La sortie est une balise script qui charge countdown.min.js depuis ce site et transporte vos réglages sous forme d'attributs data-. Quand la page l'exécute, le script insère le compte à rebours juste après la balise elle-même : la position de l'extrait dans votre HTML est donc la position du widget. Rien n'est envoyé depuis cette page ; le code est assemblé dans votre navigateur et l'aperçu situé au-dessus s'actualise chaque seconde, vous voyez donc le résultat réel avant de copier.
Chaque commande correspond à un attribut, et seules les valeurs différentes des défauts sont émises. Target Date & Time devient data-date, Title devient data-title, les trois champs de couleur deviennent data-bg, data-color et data-accent, la taille devient data-size, et les quatre cases d'unités deviennent data-show-days, data-show-hours, data-show-minutes et data-show-seconds une fois décochées. Le séparateur écrit data-separator ; Afficher les libellés et Afficher la marque écrivent data-labels="false" et data-branding="false" quand vous les désactivez. On Expiry choisit entre afficher votre message, rediriger vers une URL ou masquer le widget.
Deux comportements méritent d'être connus avant publication. Le champ de date ne porte aucun fuseau horaire, et le widget transmet la chaîne telle quelle au constructeur Date du navigateur, qui interprète une date-heure sans décalage comme une heure locale ; le compte à rebours se termine donc à cette heure de l'horloge dans le fuseau de chaque visiteur, et non à un instant unique pour tous. Par ailleurs, les libellés d'unités du widget sont des mots anglais figés — Days, Hours, Minutes, Seconds — : sur un site non anglophone, décochez Afficher les libellés et mettez votre propre formulation dans Title.
Les six préréglages ne modifient que les trois couleurs : Dark, c'est #1f2937 avec du blanc et un accent #60a5fa ; Light, c'est #f9fafb avec un texte #111827 et un accent #2563eb ; Neon, Fire, Ocean et Minimal suivent le même principe. Laisser Afficher la marque activé ajoute un petit lien vers cette page sous le compteur. Le widget exige JavaScript et l'accès à ce site pour charger le script : il ne s'affichera donc ni dans un e-mail ni dans un lecteur de flux.
Cas d'utilisation
Comment utiliser
Réglez Target Date & Time sur l'instant où le compteur doit atteindre zéro ; le champ est prérempli à minuit dans sept jours.
Saisissez un Title si vous voulez une ligne au-dessus des chiffres, puis réglez Background, Text Color et Accent Color, ou appuyez sur l'un des préréglages Dark, Light, Neon, Fire, Ocean et Minimal.
Choisissez la taille, un séparateur, et décochez parmi Days, Hours, Minutes et Seconds ce dont vous n'avez pas besoin, ainsi qu'Afficher les libellés et Afficher la marque.
Choisissez On Expiry : Show Message avec votre propre Expiry Message, Redirect URL avec une adresse complète, ou Hide Widget.
Contrôlez l'Aperçu en direct, qui s'actualise chaque seconde avec exactement les couleurs et les unités de vos réglages.
Appuyez sur Copier dans le panneau Code d'intégration et collez la balise script dans votre page, à l'endroit où le compte à rebours doit apparaître.
Astuces Pro
- Modifiez un réglage et il apparaît dans le code ; laissez-le et il n'y apparaît pas. Si votre extrait semble étonnamment court, c'est pour cette raison : tout attribut absent est à sa valeur par défaut, et l'ajouter à la main ne change rien.
- Target Date & Time ne porte aucun fuseau horaire. Le widget passe la chaîne au constructeur Date du navigateur, qui la lit comme une heure locale : une échéance à 23 h 59 se termine à 23 h 59 chez chaque visiteur. Précisez le fuseau dans Title si cela compte.
- Les libellés Days, Hours, Minutes et Seconds du widget sont de l'anglais figé. Sur un site dans une autre langue, décochez Afficher les libellés et portez le sens dans Title, sinon le compteur mélangera deux langues.
- Le compte à rebours apparaît exactement là où se trouve la balise script, car le script s'insère comme frère suivant. Collez la balise dans le conteneur voulu, jamais dans le head.
- Redirect URL ne se déclenche que pour une adresse commençant par http://, https:// ou une barre oblique. Un simple nom de domaine sans protocole est ignoré et le widget ne fait rien à l'échéance.
Dépannage
Rien n'apparaît sur ma page après avoir collé le code.
Trois causes habituelles : la plateforme a supprimé la balise script, JavaScript est désactivé, ou le navigateur n'a pas pu charger countdown.min.js depuis ce site. Vérifiez la présence de la balise dans le code source, puis ouvrez la console du navigateur et cherchez une requête bloquée ou en échec pour ce fichier.
Le compte à rebours se termine à la mauvaise heure pour les visiteurs étrangers.
C'est le fonctionnement prévu. La date ne porte pas de fuseau et le widget la lit comme une heure locale : elle se termine donc à la même heure d'horloge dans chaque fuseau. Si tout le monde doit la voir se terminer ensemble, indiquez le fuseau dans Title.
Les chiffres affichent Days et Hours alors que mon site n'est pas en anglais.
Les libellés d'unités du widget sont des mots anglais figés, non traduisibles depuis cette page. Décochez Afficher les libellés pour les retirer, puis mettez la formulation voulue dans Title, qui est votre propre texte.
Redirect URL ne fait rien quand le compteur atteint zéro.
Le widget ne suit qu'une adresse commençant par http://, https:// ou une barre oblique, et On Expiry doit être réglé sur Redirect URL. Retapez l'adresse avec son protocole et vérifiez que le code contient bien data-expiry et data-expiry-url.
Questions fréquemment posées
Réglez Target Date & Time, choisissez les couleurs et les unités à afficher, puis appuyez sur Copier dans le panneau Code d'intégration et collez la balise script d'une ligne dans le HTML de votre page, à l'endroit voulu. Rien à installer, aucun compte : le widget est un petit script hébergé par ce site, et vos réglages voyagent dans la balise.
Oui. Ni inscription, ni clé, ni offre payante, et la balise produite fonctionne sur tout site permettant de coller du HTML. Afficher la marque ajoute un petit lien vers cette page sous le compteur ; le décocher retire le lien et le widget fonctionne exactement pareil.
Juste après la balise script. Le script insère son propre conteneur comme frère suivant de la balise : la position de l'extrait dans le HTML est donc celle du widget. Placez la balise dans la section, la colonne ou le bandeau voulu, et jamais dans le head.
Le widget est du HTML et du JavaScript : il s'affiche dans le navigateur mobile de tout téléphone qui visite votre page, et le cadre replie ses unités sur un écran étroit. Ce n'est pas un widget d'écran d'accueil Android ou iOS : ceux-là relèvent du système d'exploitation et ne peuvent pas être créés depuis une page web.
Ce qu'indique On Expiry. Show Message remplace les chiffres par le texte du champ Expiry Message, qui vaut « Time's up! » au départ. Redirect URL envoie le visiteur à l'adresse indiquée, à condition qu'elle commence par http://, https:// ou une barre oblique. Hide Widget retire tout le cadre de la page.
Celui du visiteur. Le champ de date ne porte pas de fuseau et le widget transmet la chaîne au constructeur Date du navigateur, qui traite une date-heure sans décalage comme une heure locale. Une échéance fixée à 20 h se termine donc à 20 h à Paris et à 20 h à New York, à six heures d'écart.
Oui, via trois champs : Background, Text Color et Accent Color, chacun avec une pastille et un champ hexadécimal. L'accent colore les chiffres. Six préréglages règlent les trois d'un coup — Dark, Light, Neon, Fire, Ocean et Minimal — et rien n'empêche d'en partir puis d'ajuster un seul champ.
Non. Le générateur ne produit que la version script, car un compte à rebours doit se mettre à jour chaque seconde, ce qui exige du JavaScript. Si votre plateforme bloque les scripts externes, cherchez un bloc HTML personnalisé qui les autorise, ou hébergez le compte à rebours sur une page que vous contrôlez.
Parce que la date cible est réellement aussi lointaine : le nombre de jours n'est pas plafonné. Vérifiez Target Date & Time, une faute de frappe dans l'année est la cause habituelle. Si l'horizon est voulu, décochez Seconds et Minutes pour ne garder que les unités qui bougent visiblement.
Non. Les clients de messagerie et les lecteurs de flux suppriment les scripts, la balise n'y fait donc rien. Les comptes à rebours dans les e-mails sont d'ordinaire des images animées générées côté serveur à chaque ouverture ; ce widget est un script de navigateur et exige une vraie page et l'accès à ce site.