Comment ajouter un temps de lecture dynamique (et multilingue) sur votre blog Webflow ?

Introduction

Dans un monde où le temps et l'attention sont de précieuses ressources, donner une indication de temps à vos lecteurs est devenu un standard du web. Vous l’avez vu sur les plus grands blogs d'actualités, le fameux "5 min de lecture" permet de rassurer l'utilisateur et d'améliorer le taux d'engagement.

Je vous partage un script permettant d’afficher un temps de lecture du contenu (reading time content) sur votre blog.
Ce script à été spécialement conçu pour Webflow mais il fonctionne également avec d'autres CMS.

‍

Caractéristiques du script

🔀 Flexibilité Totale (Custom Attributes) : Plus besoin de manipuler des classes CSS complexes ou de modifier le JavaScript. Tout se configure directement dans le panneau Settings de Webflow via les attributs nl-reading-time.

🌍 Prêt pour l'international (i18n) : Le script gère nativement le singulier et le pluriel. Vous définissez vous-même les mots (ex: "minute" vs "minutes", "minuto" vs "minutos") directement dans l'interface Webflow.

⚡ Performance Optimisée : Le script est extrêmement léger (quelques lignes de JS pur) et n'alourdit pas le temps de chargement de votre page.

⚙️ Paramétrable par Article : Vous pouvez ajuster la vitesse de lecture (WPM) article par article ou globalement, offrant une précision accrue selon la complexité de vos contenus.

🛡️ Robuste et Sécurisé : Intègre des valeurs de repli (fallbacks) pour éviter l'affichage d'erreurs (comme NaN) si un attribut est oublié dans le Designer.

🎨 Indépendant du Design : Le script ne touche pas à votre mise en page. Il se contente d'injecter du texte dans l'élément que vous avez choisi, vous laissant une liberté totale sur le style (CSS).

‍

Combien de mots par minute lisons-nous ?

Avant de nous lancer dans la configuration, rappelons-nous que nous ne lisons pas tous à la même vitesse. La moyenne se situe entre 200 et 300 mots lus par minute pour un adulte en lecture silencieuse. Pour ma part (sur le blog où vous vous trouvez), j’utilise 250 mots par minute. Cette valeur s’appelle le WPM pour “word per minute”, nous en aurons besoin pour la suite.

source WPM

‍

Installation du script

Intégration du script

Rendez vous dans les paramètres de votre page, copiez ce code dans le before </body> et cliquez sur “save”.

<!--{ NL-Reading-time }-->
<script src="https://cdn.jsdelivr.net/gh/nicolas-leitao/webflow-scripts/nl-reading-time.js" defer></script>

‍

Choix de la source 

Afin que le script s'exécute convenablement, vous devez définir la source de donnée, il comptera les mots contenus dans cet élément. Dans cet exemple, je le fais avec un article de blog (un rich text).

1. Sélectionnez l’élément désiré
2. Allez dans settings
3. Puis ajoutez l’attribut suivant : 

nl-reading-time=”source”

‍

⚠️ Si vous avez des témoignages ou des encadrés hors-sujet dans votre article que vous ne voulez pas compter, assurez-vous de placer l'attribut uniquement sur le bloc de texte principal et non sur la section entière.

Configuration de l’affichage

Maintenant que le script sait quoi lire, il faut lui dire où afficher le résultat. C'est ici que vous allez personnaliser l'apparence et la langue de votre indicateur de temps.

‍

L'élément de destination

1. Sélectionnez l'élément qui accueillera le temps de lecture (par exemple, un Text Block placé sous le titre de votre article ou à côté de la date).
2. Allez dans “settings” (comme on vient de faire)
3. Appliquez l'attribut principal :

nl-reading-time=”display”

‍

‍

Optionnel configuration du parent

Au cas où vous auriez besoin d’aide pour configurer le parent de votre Text block (mon wrapper-reading-time), voici la configuration que j’utilise :

Personnalisation et Internationalisation (i18n)

C'est là que notre script devient vraiment intéressant. Vous pouvez définir les mots utilisés directement dans Webflow, sans toucher au code. Ajoutez ces attributs sur le même élement (votre text block de destination) :

‍

Réglage nombre de mots lus par minute

On y vient enfin, ici vous pouvez régler votre WPM, le script utilisera cette valeur pour calculer le temps de lecture.

nl-reading-time-wpm=”250” 

‍

Personnalisation : Adapté pour toutes les langues

J'ai conçu ce script pour qu'il soit totalement international. Vous n'avez pas besoin de modifier le code pour changer de langue ; tout se passe dans les réglages de votre élément dans Webflow.

Il vous suffit d'ajouter ces deux attributs pour définir les mots qui suivront le chiffre calculé :

• Pour le singulier (1 minute) :
  
  • Name : nl-reading-time-singular
  • Value : minute (ou "min", "minuto", "minuti")
• Pour le pluriel (2 minutes et plus) :
  
  • Name : nl-reading-time-plural
  • Value : minutes (ou "minutos", "minuten")

‍

Et voilà, c’est installé.

‍

🏁 Résumé de la configuration

Sur votre texte d'article (Rich Text) :

1 attribut : 

• nl-reading-time=”source”

Sur votre indicateur de temps (Text Block) :

4 attributes : 

• nl-reading-time=”display”
• nl-reading-time-wpm=”250” 
• nl-reading-time-singular=”minute”
• nl-reading-time-plural=”minutes”

‍

‍

🌍 Compatibilité Totale avec Webflow Localization

‍

Si votre site est disponible en plusieurs langues, vous n'avez rien à modifier dans le code. Le script est conçu pour être piloté par les attributs, qui sont eux-mêmes traduisibles.

Comment configurer ça avec Webflow Localization ?

• Dans le Designer, passez sur votre version linguistique (ex: Espagnol).
• Sélectionnez l'élément de destination (display).
• Dans le panneau des Custom Attributes, modifiez simplement les valeurs :
  
  • nl-reading-time-singular : remplacez "minute" par "minuto".
  • nl-reading-time-plural : remplacez "minutes" par "minutos".

‍

Le script détectera automatiquement la langue de la page affichée et utilisera les bons termes.

‍

Les avantages pour l'utilisateur international :

‍

• ⚙️Maintenance simplifiée : Un seul script global pour tout le projet.
• 🇫🇷SEO Local : L'indicateur de temps est affiché dans la langue du visiteur, ce qui améliore l'expérience utilisateur (UX) locale.
• 🤌Flexibilité : Vous pouvez même ajuster la vitesse de lecture (wpm) par langue si vous estimez que l'on lit plus ou moins vite dans certaines langues (ex: allemand vs anglais).

Le mot de la fin

Et voilà ! Vous avez maintenant un compteur de temps de lecture dynamique, léger et multilingue. Que votre blog soit en français, en anglais ou en italien, ce script s'adapte sans effort. C'est l'outil idéal pour les projets Webflow d'envergure internationale.

‍

💡 Cette méthode respecte les bonnes pratiques de Webflow en utilisant les Custom Attributes, ce qui rend votre projet propre et facile à maintenir sur le long terme.

‍

En espérant que ce tuto vous aide dans votre projet !

Sur ce, je vous souhaite une excellente journée après cette session de build !

‍