Le bloc HTML de Notion : créer des widgets interactifs

Vous trouvez vos pages Notion un peu trop statiques ? Vous aimeriez y ajouter un compte à rebours, un simulateur, un quiz ou encore un calculateur, sans passer par des services externes ?

Avec le bloc HTML de Notion, c’est possible ! Cette fonctionnalité permet d’intégrer de véritables mini-applications interactives directement dans vos pages. Dans cet article, découvrez à quoi sert le bloc HTML, comment l’utiliser et quelles sont ses limites avant de vous lancer.

Qu’est-ce que le bloc HTML de Notion ? 💻

Introduit avec Notion 3.6, le bloc HTML permet d’insérer un mini-élément interactif autonome directement dans une page Notion.

Concrètement, il fonctionne comme une petite page web embarquée qui peut contenir du :

• 🎨 CSS pour la mise en forme

• 📝 HTML pour la structure

• ⚙️ JavaScript pour les interactions

Le résultat s’affiche directement dans votre page, comme un bloc natif. L’objectif est de rendre vos pages beaucoup plus interactives sans avoir à intégrer des widgets provenant de services externes.

Pourquoi utiliser un bloc HTML dans Notion ?

Le bloc HTML ouvre de nombreuses possibilités. Vous pouvez par exemple créer :

• un minuteur ou un compteur Pomodoro

• un calculateur de prix

• un quiz interactif

• un simulateur personnalisé

• un tableau de dessin

• une page de vente avec un bouton de paiement

• un audit ou une analyse visuelle interactive

👉 Ainsi, tout ce qui nécessitait auparavant un site externe peut désormais être intégré directement dans votre espace Notion, au même titre que les tableaux de bord.

Comment créer un bloc HTML ? 🛠️

1. Le générer avec l’IA de Notion 🤖

C’est la solution la plus simple. Il suffit :

1. D’insérer un bloc HTML

2. Décrire ce que vous souhaitez créer

3. L’IA génère automatiquement le code

Vous pouvez même mentionner une page Notion avec @ (par exemple votre charte graphique) afin que l’IA respecte votre identité visuelle.

2. Importer votre propre fichier HTML 📂

Si vous savez coder, ou si vous utilisez ChatGPT pour générer du code, vous pouvez importer directement un fichier .html complet dans le bloc. Le résultat est immédiatement affiché dans votre page Notion.

🚨 À noter que lorsque vous demandez ensuite des modifications à l’IA, celle-ci régénère entièrement le fichier HTML. Si votre widget possède un état, comme un compteur, celui-ci repartira donc de zéro.

Le bloc HTML est-il disponible sur tous les forfaits ? 💰

Oui, avec une nuance. Le bloc HTML est disponible sur tous les forfaits, y compris le forfait gratuit. En revanche, la génération automatique nécessite un forfait incluant l’IA de Notion 🤖. Pour vérifier votre situation, consultez notre article sur l’accès à l’IA de Notion.

👉 Vous pouvez donc intégrer votre propre code gratuitement, mais pas demander à l’IA de le créer sans un forfait compatible.

Les limites du bloc HTML ⚠️

Même si cette nouveauté est prometteuse, quelques contraintes sont à connaître. Les blocs fonctionnent uniquement en local : le code s’exécute dans le navigateur de chaque utilisateur.

Qu’est-ce que cela implique ?

• Aucune synchronisation en temps réel entre plusieurs personnes

• Impossible de créer des applications collaboratives

• Le bloc HTML est donc surtout pensé pour un usage individuel

Un environnement sécurisé

Pour des raisons de sécurité, le bloc HTML est “sandboxé”. Il ne remplace donc pas une véritable application web. Cela signifie notamment qu’il :

• 🗄️ N’a pas accès aux bases de données Notion

• 🌐 Ne peut pas appeler librement des API externes

• 💾 Ne conserve pas d’état persistant entre les sessions

Que devient un bloc HTML quand vous partagez la page ? 🔗

Le bloc HTML n’a pas de réglage de partage qui lui soit propre : il hérite des autorisations de la page qui l’accueille. Toute personne ayant accès à la page voit le widget et peut l’utiliser. Placé dans un espace d’équipe de dix personnes, il est donc accessible à ces dix personnes.

Deux conséquences concrètes :

• Un widget qui contient une logique sensible, comme une grille tarifaire ou des hypothèses internes, doit vivre sur une page dont les accès sont maîtrisés. Nos explications sur le partage d’une page Notion vous aident à vérifier qui voit quoi.

• Chaque lecteur exécute le code de son côté : deux personnes qui utilisent le même calculateur ne voient pas les saisies l’une de l’autre, et rien n’est conservé après la fermeture de la page.

Bonne nouvelle en revanche pour la réutilisation : le bloc se manipule comme n’importe quel autre bloc. Vous pouvez le déplacer, le glisser dans une colonne, le copier vers une autre page ou l’enregistrer dans un modèle pour le réutiliser autant de fois que nécessaire.

Les bonnes pratiques à respecter ✅

Pour obtenir un résultat agréable à utiliser :

• Créez un widget avec un objectif clair

• Privilégiez une interface simple et lisible

• Vérifiez que le rendu fonctionne aussi bien sur mobile que sur ordinateur

• Gardez une identité visuelle cohérente avec le reste de votre espace, en suivant nos conseils pour faire une belle page Notion

• Évitez de surcharger vos pages

Le bloc HTML est l’une des nouveautés les plus intéressantes de Notion pour personnaliser vos pages. Même s’il ne remplace pas une véritable application web, il permet de créer rapidement des widgets interactifs qui rendent votre espace plus vivant et plus pratique au quotidien.

Si vous souhaitez découvrir toutes les possibilités offertes par cette nouveauté et apprendre à créer des blocs HTML utiles dans vos espaces Notion, la formation Boost vous accompagne pas à pas avec des démonstrations, et des cas pratiques.