Trois widgets, une phrase pour les régler
Le générateur ci-dessus marche comme les autres outils de Clooock : une phrase, quelques mots dans des cadres. Touchez un mot pour le changer, l’aperçu se met à jour aussitôt. Ce que vous voyez dans l’aperçu, c’est le vrai widget, la page même que chargeront vos visiteurs.
- Horloge : l’heure de l’une des 168 villes proposées, ou l’heure locale de chaque visiteur. En chiffres sur 24 h ou sur 12 h, ou en cadran à aiguilles, avec ou sans les secondes.
- Compte à rebours : jours, heures, minutes et secondes jusqu’à une date et une heure, avec un titre au-dessus et un message qui remplace les chiffres à zéro.
- Minuteur : une durée qui démarre d’un toucher (ou toute seule), se met en pause, se remet à zéro et sonne à la fin, au choix parmi cinq sons.
Comment fonctionne le code d’intégration
Code pour votre site copie un petit bloc HTML : un iframe qui charge le widget depuis clooock.com, et juste en dessous un lien texte vers Clooock. L’iframe se charge en différé (lazy loading), il ne ralentit donc pas le haut de votre page. Le lien est un lien normal et visible, avec notre nom comme texte. Il aide d’autres personnes à trouver l’outil ; si vous préférez ne pas l’afficher, supprimez la ligne qui commence par <a : le widget marche exactement pareil.
Lien pour Notion copie seulement l’adresse du widget. Notion, OBS et la plupart des créateurs de sites acceptent une simple adresse dans leurs outils d’intégration, et tous les réglages sont écrits dedans : l’adresse suffit.
Tous les réglages vivent dans cette adresse. Si vous aimez mettre les mains dedans, voici ce que veut dire chaque partie :
| Partie | Ce qu’elle règle | Exemple |
|---|---|---|
| tz | Fuseau de l’horloge ou de la date du compte à rebours (nom IANA). Sans tz, c’est l’heure de chaque visiteur. | tz=America/Montreal |
| t | Nom au-dessus de l’horloge, ou titre du compte à rebours | t=Bureau de Lyon |
| h, s, v | Horloge : format 12 ou 24 h, sans secondes (s=0), aiguilles (v=a) | h=12&s=0 |
| to, u, m | Compte à rebours : date et heure visées, unités, message à zéro | to=2027-06-12T18:00&u=dhm |
| d, a, snd | Minuteur : durée en secondes, départ automatique (a=1), son | d=900&a=1&snd=chime |
| c, f | Couleurs du fond et du texte en code hexadécimal, c=none pour aucun fond | c=0A7E8C&f=FFFFFF |
| l | Langue des libellés : en, fr, es, de, it ou pt | l=fr |
Le paramètre c accepte n’importe quelle couleur, pas seulement les six de la phrase : remplacez le code après c= par celui de la couleur de votre marque, et gardez le texte blanc (f=FFFFFF) ou foncé (f=111111) pour qu’il reste lisible.
Choisir la bonne taille
Le widget remplit le cadre que vous lui donnez. Les chiffres grandissent ou rapetissent avec lui, d’un petit coin de 200 × 100 pixels à toute la largeur d’une page. Sur les tout petits cadres, les libellés s’effacent et seuls les chiffres restent. Le code fixe une largeur de 100 % et une hauteur adaptée à chaque widget, à changer dans l’attribut height :
| Widget | Hauteur dans le code | Bien pour |
|---|---|---|
| Horloge en chiffres | 180 px | Un en-tête, une barre latérale, une page contact |
| Horloge à aiguilles | 280 px | Une barre latérale, un emplacement carré |
| Compte à rebours | 200 px, 230 px avec un titre | Une page d’événement, de lancement, un bandeau |
| Minuteur | 220 px | Une recette, une page de cours, une séance de sport |
Où le coller
Toute page qui accepte du HTML peut afficher le widget. Chaque plateforme nomme l’outil un peu différemment, alors nous avons écrit un guide court pour les plus courantes : WordPress, Wix, Squarespace, Shopify, Google Sites et Notion. Les streamers peuvent aussi le charger dans OBS comme source navigateur, avec un fond transparent : voir le guide OBS.
Fuseaux horaires et changement d’heure
L’horloge et le compte à rebours s’appuient sur les règles de fuseaux intégrées au navigateur du visiteur, la même base que celle des téléphones et des ordinateurs. Quand Paris ou Montréal passe à l’heure d’été, le widget suit sans rien changer de votre côté. Pour un compte à rebours, vous choisissez à qui appartient la date : à votre fuseau, pour qu’il arrive à zéro au même instant partout (un lancement, un direct), ou à l’heure de chaque visiteur, pour que chacun ait son propre minuit (le Nouvel An).
Léger et discret
La page du widget n’a ni publicité, ni cookie, ni mesure d’audience, et elle ne lit rien de la page qui l’entoure. Elle pèse environ 60 Ko avec ses deux polices, bien moins une fois celles-ci en cache. Les sons sont fabriqués sur place : aucun fichier audio à télécharger. Pour les outils complets, avec plus d’options, voyez l’horloge mondiale, le compte à rebours vers une date et le minuteur en ligne.