Comment intégrer un compte à rebours dans votre site web
Si vous utilisez un logiciel de gestion de contenu ou de blog tel que Blogger, WordPress, Drupal ou similaire, vous devez vous assurer de modifier votre contenu en mode HTML lorsque vous collez le code d'intégration.
Intégrer un compte à rebours de CountingDownTo.com ressemble beaucoup à l'intégration d'une vidéo d'un site web comme YouTube.com.
- Ouvrez votre compte à rebours. Pour en créer un nouveau, cliquez sur Comptes à rebours pour sites web dans le menu en haut de la page. Pour retrouver un compte à rebours créé plus tôt, cliquez sur l'icône du compte (l'icône en forme de personne) en haut à droite, puis sur Mes comptes à rebours.
- Cliquez sur Intégrer sous le compte à rebours.
- Copiez le code qui s'affiche sous le bouton. S'il y a un bouton Copy à côté du code, vous pouvez cliquer dessus.
- Collez le code dans votre site web ou votre blog, à l'endroit où le compte à rebours doit apparaître.
Notion et Google Sites ont besoin d'un lien au lieu du code. L'éditeur affiche ce lien sous le code. Canva a besoin du lien de partage de votre compte à rebours : dans l'éditeur d'origine, cliquez d'abord sur Partager pour l'obtenir. Le nouvel éditeur l'affiche sous le lien pour Notion et Google Sites.
Si vous avez suivi les instructions de cette page mais que vous n'arrivez toujours pas à intégrer votre compte à rebours, veuillez nous contacter pour obtenir de l'aide.
Quelles plateformes peuvent intégrer un compte à rebours en direct ?
La plupart des sites qui permettent de coller du HTML personnalisé ou une URL iframe afficheront votre compte à rebours en direct et en fonctionnement. Quelques outils de création de pages et de design bloquent les iframes entièrement. Voici ce que nous avons vérifié nous-mêmes. Les lignes Canvas et Schoology s'appuient sur nos journaux, qui montrent des comptes à rebours chargés sur de nombreux sites de cours de ces plateformes, et pour Canvas sur son propre guide :
| Plateforme | Compte à rebours en direct ? | Remarques |
|---|---|---|
| WordPress (auto-hébergé) | Oui | Ajoutez un bloc HTML personnalisé dans l'éditeur de blocs et collez le code d'intégration. |
| WordPress.com | Selon l'abonnement | Les forfaits gratuits suppriment les iframes. Les forfaits payants nécessitent l'activation des « fonctionnalités d'hébergement » avant que le HTML personnalisé fonctionne. Plus d'infos. |
| Squarespace | Oui (forfait Core ou supérieur) | Ajoutez un bloc Code et collez le code d'intégration. Nécessite un forfait Core ou supérieur, ou un ancien forfait Business ou Commerce. |
| Wix | Oui | Utilisez Ajouter des éléments → Embed Code → Popular Embeds → Embed HTML. Réglez la largeur et la hauteur de l'iframe sur celles de votre compte à rebours pour qu'il ne soit pas coupé et n'affiche pas de barres de défilement. |
| Google Sites | Oui |
Utilisez Insérer → Intégrer. Collez le code d'intégration dans l'onglet Code d'intégration, ou collez l'adresse indiquée dans
src="..."
de votre code d'intégration dans l'onglet Par URL. Si l'adresse se termine par .js, retirez le .js.
|
| Shopify | Oui (avec réserve) | Utilisez une section Custom Liquid du thème. L'éditeur de description de produit ne conserve pas le code d'intégration avec tous les thèmes : utilisez aussi une section Custom Liquid sur les pages produit. |
| Notion | Oui |
Tapez /embed
et collez l'adresse indiquée dans src="..."
de votre code d'intégration, pas le lien de partage. Si l'adresse se termine par .js, retirez le .js.
|
| Canva | Oui, en ligne | Ajoutez l'application Embed et collez le lien de partage de votre compte à rebours. Les images, PDF et vidéos téléchargés ne peuvent pas afficher un compte à rebours qui défile. |
| Canvas | Oui | Dans le Rich Content Editor, choisissez Insert → Embed, collez le code d'intégration, cliquez sur Submit, puis enregistrez la page. Ces étapes viennent du guide Canvas pour les enseignants. |
| Schoology | Oui (étapes non testées) | Les comptes à rebours s'affichent sur des sites Schoology, mais nous n'avons pas testé les étapes nous-mêmes. Collez le code d'intégration dans la vue HTML de l'éditeur. |
| Blogger, Drupal, Weebly, Joomla! | Oui | Collez le code d'intégration en HTML personnalisé/brut — voir les instructions spécifiques à la plateforme ci-dessous. |
| Facebook, WhatsApp, YouTube | Non | Ces plateformes n'autorisent pas les intégrations iframe tierces. Partagez plutôt un lien vers votre page de compte à rebours publiée. |
| Clients de messagerie | Non (utiliser un GIF) | Les clients de messagerie bloquent les iframes. Utilisez plutôt notre compte à rebours GIF par e-mail. |
Intégrer un compte à rebours dans WordPress
WordPress auto-hébergé : Dans l'éditeur de blocs, ajoutez un bloc HTML personnalisé (+ → recherchez « HTML personnalisé ») et collez le code d'intégration que nous vous avons fourni. Si le compte à rebours n'apparaît pas dans l'aperçu du bloc, vérifiez la page publiée.
WordPress.com : Les sites WordPress.com gratuits ne prennent pas en charge les iframes (plus d'infos). Sur les forfaits payants, vous devez activer les fonctionnalités d'hébergement avant que le bloc HTML personnalisé ne rende les iframes.
Utilisateurs de l'éditeur classique : Si vous utilisez encore l'ancien éditeur Visuel/Texte, sélectionnez Texte (pas Visuel) avant de coller.
Intégrer un compte à rebours dans Squarespace
Squarespace nécessite un forfait Core ou supérieur, ou un ancien forfait Business ou Commerce pour intégrer du code personnalisé. Modifiez votre page, cliquez sur + pour ajouter un bloc, recherchez Code et collez le code d'intégration dans le bloc Code. Enregistrez et prévisualisez. Le compte à rebours devrait fonctionner en direct sur votre page publiée.
Intégrer un compte à rebours dans Wix
Dans l'éditeur Wix, cliquez sur Ajouter des éléments → Embed Code → Popular Embeds → Embed HTML. Cliquez sur Enter Code, collez le code d'intégration et cliquez sur Apply.
Important — taille de l'iframe :
Si le compte à rebours est rogné ou affiche des barres de défilement, ouvrez les paramètres de l'élément d'intégration et définissez la largeur et la hauteur pour qu'elles correspondent aux dimensions de votre code d'intégration (généralement la même largeur et hauteur que la balise <iframe>). Wix ne redimensionne pas toujours automatiquement les iframes intégrées.
Regardez une courte vidéo montrant comment ajouter un compte à rebours à Wix.
Intégrer un compte à rebours dans Google Sites
Lors de la modification de votre site, cliquez sur Insérer
→ Intégrer. Dans l'onglet Code d'intégration, collez le code d'intégration que nous avons fourni. Ou, dans l'onglet Par URL, collez le lien d'intégration de votre compte à rebours : l'adresse indiquée dans
src="..."
de votre code d'intégration. Si l'adresse se termine par .js, retirez le .js.
Ajustez ensuite la taille du cadre d'intégration sur la page pour que le compte à rebours complet soit visible.
Intégrer un compte à rebours dans Shopify
Ajoutez le code d'intégration dans une section Custom Liquid de votre thème (Boutique en ligne → Thèmes → Personnaliser → Ajouter une section). Le compte à rebours s'affichera en direct sur les pages où vous le placez.
Descriptions de produit : l'éditeur de description de produit ne conserve pas le code d'intégration avec tous les thèmes. Ajoutez plutôt une section Custom Liquid au modèle de page produit.
Intégrer un compte à rebours dans Notion
Sur n'importe quelle page Notion, tapez /embed
et appuyez sur Entrée. Collez le lien d'intégration de votre compte à rebours et validez. Notion affiche uniquement le compte à rebours, en direct.
Votre lien d'intégration est l'adresse indiquée dans src="..."
de votre code d'intégration, par exemple
https://countingdownto.com/w4/abc123
ou https://w2.countingdownto.com/1234567. Si votre code est une balise script, retirez le
.js
à la fin. Ne collez pas le lien de partage ni tout le code d'intégration. Faites glisser les bords du bloc pour le redimensionner.
Intégrer un compte à rebours dans Canva
Canva peut afficher un compte à rebours en direct dans les designs et les sites Canva consultés en ligne. Dans l'éditeur Canva, ouvrez Applications, choisissez Embed et collez le lien de partage de votre compte à rebours.
Si Canva affiche une image fixe au lieu d'un compte à rebours créé avec le nouvel éditeur, collez plutôt son lien d'intégration : l'adresse qui se trouve dans
src="..."
dans votre code d'intégration. Pour les comptes à rebours créés avec l'ancien éditeur, utilisez le lien de partage ; leurs liens d'intégration (w2.countingdownto.com) ne fonctionnent pas dans Canva. Une image, un PDF ou une vidéo téléchargés ne peuvent pas afficher un compte à rebours qui défile.
Intégrer un compte à rebours dans Blogger
Dans l'éditeur d'articles, passez de la Vue Rédaction à la Vue HTML avant de coller le code d'intégration. Le compte à rebours n'apparaîtra pas pendant que vous modifiez votre article. Il n'apparaîtra que lorsque vous publierez ou prévisualiserez votre article.
Intégrer un compte à rebours dans Drupal
Choisissez HTML complet dans la liste Format de texte sous le champ du corps, puis collez le code d'intégration. Le compte à rebours n'apparaîtra pas pendant que vous modifiez votre page. Il n'apparaîtra que lorsque vous enregistrerez ou prévisualiserez votre page.
Intégrer un compte à rebours dans Weebly
Faites glisser l'élément Code intégré sur votre page, cliquez dessus et collez le code d'intégration. Publiez votre site pour voir le compte à rebours.
Intégrer un compte à rebours dans Joomla!
Cliquez sur Activer/Désactiver l'éditeur sous l'éditeur d'article pour modifier directement le HTML, puis collez le code d'intégration et enregistrez.
L'éditeur TinyMCE par défaut de Joomla peut supprimer les balises iframe lors de l'enregistrement. Si le compte à rebours n'apparaît pas, collez le code d'intégration dans un module Personnalisé avec l'éditeur désactivé, ou demandez à l'administrateur de votre site d'autoriser les iframes dans les paramètres du plugin TinyMCE.
Plateformes qui ne prennent pas en charge les intégrations iframe
Les plateformes suivantes ne peuvent pas afficher un compte à rebours iframe en direct, quel que soit le code d'intégration utilisé :
- Facebook — partagez plutôt un lien vers votre page de compte à rebours publiée.
- WhatsApp — partagez un lien ; WhatsApp ne rend pas le HTML intégré.
- YouTube — les pages de chaîne YouTube et les descriptions de vidéos ne prennent pas en charge les iframes tierces.
- Clients de messagerie : Gmail, Outlook, Mailchimp et d'autres applications de messagerie bloquent les iframes pour des raisons de sécurité. Utilisez plutôt notre compte à rebours par e-mail. Il crée une image animée que la plupart des applications de messagerie affichent.
Intégration de comptes à rebours par e-mail
Les applications de messagerie bloquent les iframes. Les comptes à rebours par e-mail sont donc des images GIF animées. Créez-en un sur la page des comptes à rebours par e-mail et cliquez sur Ajouter à mon e-mail pour obtenir le code. Dans les outils d'e-mail marketing comme Mailchimp, Constant Contact, AWeber et Kit (ConvertKit), collez le code dans un bloc HTML ou un bloc de code. Pour envoyer le compte à rebours depuis Gmail ou un autre compte de messagerie personnel, utilisez Envoyez-moi ce compte à rebours par e-mail sur la même page et transférez l'e-mail que vous recevez.
Vous utilisez Kajabi ? Suivez notre guide du minuteur de compte à rebours pour Kajabi.
L'image montre le temps restant au moment où elle est chargée. Certaines applications de messagerie chargent les images à l'avance, elle peut donc afficher un temps antérieur. Indiquez aussi la date dans le texte de votre e-mail.