Les questions qu'on se pose une fois le code collé : hauteur, largeur, transparence, plateformes.
Comment redimensionner l'iframe du compteur ?
Une iframe ne prend pas d'elle-même la hauteur de son contenu : c'est vous qui la fixez. Le code fourni utilise width="100%" et height="500" : la largeur suit votre colonne, la hauteur est fixe. Comptez 300 à 380 px quand le titre, la description et la date sont masqués, 450 à 500 px avec tout, et un peu plus sur mobile où le texte passe à la ligne. Le compteur se centre dans la hauteur disponible : trop haute, l'iframe laisse du vide ; trop basse, elle coupe la description.
Pour une hauteur différente sur mobile, donnez une classe à l'iframe :
<style>
.wiu-countdown { width: 100%; height: 480px; border: 0; }
@media (max-width: 600px) { .wiu-countdown { height: 560px; } }
</style>
<iframe class="wiu-countdown" src="https://www.watchisup.fr/evenement/votre-compteur/embed" title="Countdown" loading="lazy"></iframe>
Hauteur automatique de l'iframe (Pro)
Avec l'Intégration pro, le code copié depuis la fenêtre Intégrer ajoute une ligne de script sous l'iframe. Le widget envoie alors la hauteur de son contenu et l'iframe s'y ajuste toute seule : plus de vide ni de description coupée, sur ordinateur comme sur mobile, et la hauteur suit quand la barre en direct apparaît. Collez la ligne une seule fois par page, même avec plusieurs widgets.
Ça fonctionne partout où l'on peut coller un script : WordPress (bloc HTML personnalisé), Squarespace, Webflow, Shopify, un site fait main. Notion et Google Sites retirent les scripts, et Wix enferme le code collé dans son propre cadre : là, l'iframe garde la hauteur de son attribut height.
<iframe src="https://www.watchisup.fr/evenement/votre-compteur/embed?live=1" width="100%" height="500" frameborder="0"
title="Countdown" loading="lazy"></iframe>
<script src="https://www.watchisup.fr/embed.js" async></script>
Comment centrer le widget et limiter sa largeur ?
Sur une page large, un compteur étiré sur toute la largeur perd en lisibilité. Limitez la largeur et centrez :
<iframe src="https://www.watchisup.fr/evenement/votre-compteur/embed" width="100%" height="420"
style="display:block; max-width:720px; margin:0 auto; border:0;"
title="Countdown" loading="lazy"></iframe>
Comment rendre le fond transparent ?
Avec l'Intégration pro, ajoutez bg=transparent à l'adresse : le fond de votre site apparaît derrière les chiffres. Côté iframe, allowtransparency et background:transparent évitent un fond blanc dans certains navigateurs. Choisissez alors une couleur de texte lisible sur votre fond (paramètre text).
<iframe src="https://www.watchisup.fr/evenement/votre-compteur/embed?bg=transparent&live=1&hide=description"
width="100%" height="420" frameborder="0" allowtransparency="true"
style="background:transparent; border:0;" title="Countdown" loading="lazy"></iframe>
Comment l'intégrer sans ralentir la page ?
Ajoutez loading="lazy" : le navigateur ne charge le widget qu'à l'approche de l'écran, idéal pour un compteur en bas de page. Ajoutez aussi un attribut title qui décrit le compteur : c'est ce que lisent les lecteurs d'écran.
<iframe src="https://www.watchisup.fr/evenement/votre-compteur/embed" width="100%" height="480" frameborder="0"
loading="lazy" title="Countdown to …"></iframe>
Sur quelle plateforme coller le code ?
Partout où l'on peut coller du HTML ou une adresse à intégrer. Le code complet (l'iframe) va dans un bloc HTML ; les outils qui demandent une simple URL prennent le lien d'intégration, celui qui se termine par /embed.
- WordPress
- Bloc « HTML personnalisé » de l'éditeur, ou widget HTML personnalisé dans une barre latérale.
- Notion
- Tapez /embed et collez le lien d'intégration, celui qui se termine par /embed.
- Wix
- Ajouter > Intégrer du code > Code HTML, puis collez l'iframe.
- Squarespace
- Ajoutez un bloc Code et collez l'iframe.
- Webflow
- Ajoutez un élément Embed et collez l'iframe.
- Shopify
- Section « Liquid personnalisé » du thème, collez l'iframe.
- Google Sites
- Insérer > Intégrer > Par URL, collez le lien d'intégration.
- Framer, Carrd, Jimdo…
- Bloc HTML ou Embed : collez l'iframe.
Comment changer la date sans recoller le code ?
Ouvrez votre lien de modification et changez la date ou le titre : le widget est à jour sur tous les sites qui l'affichent. Le code de l'iframe, lui, ne change pas.
Le compte à rebours est-il juste dans tous les fuseaux horaires ?
Oui. Le décompte vise un instant précis : il arrive à zéro au même moment pour tous les visiteurs, où qu'ils soient, passage à l'heure d'été compris. La date écrite sous le titre est affichée dans le fuseau de l'événement.