Comment afficher le temps de lecture d'un article dans Webflow avec Finsweet ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment afficher automatiquement le temps de lecture d'un article dans Webflow avec Finsweet Attributes Read Time.

1. Ajoutez le script dans le head

<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-readtime@1/readtime.js" defer>script>

2. Marquez votre contenu source

Sur votre élément Rich Text (ou tout élément contenant le texte à analyser), ajoutez fs-readtime-element="content". Finsweet compte le nombre de mots de cet élément pour calculer le temps de lecture.

3. Ajoutez l'élément d'affichage

Créez un Text Block à l'endroit où vous voulez afficher le temps de lecture (ex: dans le header de votre article, à côté de la date). Ajoutez fs-readtime-element="result". Finsweet injecte automatiquement le chiffre calculé.

4. Personnalisez le calcul et le format

La vitesse de lecture par défaut est 200 mots/minute. Pour ajuster : fs-readtime-wordsperminute="250" sur l'élément source. Pour ajouter un suffixe automatique ("min de lecture") : fs-readtime-suffix=" min de lecture". Le résultat sera "5 min de lecture" directement.

Conclusion

Le temps de lecture améliore l'engagement sur les articles longs. Cas d'usage :

• Articles de blog avec indication "X min de lecture"
• Pages de documentation avec estimation de temps
• Newsletters ou guides PDF avec durée de lecture estimée