Créez vos propres widgets Notion

Des boutons, mais pas que !

La semaine dernière je vous présentais l’origine et la stack du produit numéro 2 : Notion Buttons.

Si vous l’avez rater, ça se passe ici.

Aujourd’hui, on va voir ensemble comment vous pouvez vous aussi créer vos propres boutons, 100% personnalisés (sans passer par mon produit).

Et même comment créer n’importe quel widget sur Notion. 🔥

Let’s build !

---

Le principe de base

Tout repose sur le widget “Embed” de Notion.

Ce widget a pour objectif d’intégrer à votre page Notion des PDFs, documents, une page web quelconque…

Mais il ne permet pas d’intégrer un bout de HTML / CSS / JS, qui nous permettrait d’ajouter à peu près n’importe quoi à la page.

Cependant, comme ce widget permet d’intégrer une page web, il nous suffit de créer une page simple avec notre HTML, CSS et JS.

Puis d’héberger cette page en ligne, et insérer l’URL de cette page dans le widget “Embed”.

Et le tour est joué.

Le cas du bouton

C’est exactement le processus utilisé dans le produit numéro 2 : Notions Buttons.

Jetons un œil au code utilisé sur la page en question :

<!-- HTML !-->
<a style="text-decoration: none;" href="https://product-builder.com" target="_blank">
  <button id="btn" class="my-button" role="button">Découvrez mon site</button>
</a>

<style>
.my-button {
  appearance: button;
  backface-visibility: hidden;
  background-color: #DCA798;
  border-radius: 5px;
  border-width: 0;
  box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
  font-size: 17px;
  height: auto;
  line-height: 1.15;
  display: block;
  margin-left: auto;
  margin-right: auto;
  outline: none;
  overflow: hidden;
  padding: 11px 33px;
  position: relative;
  text-align: center;
  text-transform: none;
  transform: translateZ(0);
  transition: all .2s,box-shadow .08s ease-in;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: auto;
}

.my-button:disabled {
  cursor: default;
}

.my-button:focus {
  box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .2) 0 6px 15px 0, rgba(0, 0, 0, .1) 0 2px 2px 0, rgba(50, 151, 211, .3) 0 0 0 4px;
}
</style>

Si vous copiez / collez ce code dans un fichier “bouton.html”, puis que vous l’ouvrez avec votre navigateur, vous verrez le résultat. 👀

Si vous avez suivi l’édition de la semaine dernière, vous savez que pour personnaliser le bouton, j’ai créé une interface sur Retool.

En fait, chaque champ à gauche va venir modifier une partie du code ci-dessus pour modifier le style de votre bouton.

Pour bien comprendre comment le fonctionne le HTML / CSS, vous invite à aller un faire un tour sur le site W3Schools (W3 mais rien à voir avec le Web 3 😉).

---

Comment mettre en ligne sa page HTML ?

Il existe de très nombreuses solutions, je vais vous présenter ici une solution simple et gratuite.

Préparation

1 - Créer un dossier

2 - Dans ce dossier, créer un fichier “index.html”. Vous pouvez laisser ce fichier vide.

3 - Pour chaque bouton / widget, créer un fichier nom_du_fichier.html (bouton.html par exemple).

4 - Dans ce fichier, coller le code HTML.

Mise en ligne

5 - Créer un compte sur Netlify

6 - Déployer votre projet manuellement, en faisant glisser votre dossier (contenant vos fichiers HTML).

7 - Votre site est déployé 🔥
Vous pouvez l’ouvrir en cliquant sur l’URL en bleue.

C’est une page blanche, c’est normal car nous avons laissé vide le fichier “index.html”.

Pour voir votre widget, ajoutez le nom de votre fichier à la suite de l’URL, séparé par un “/”.

Par exemple pour moi : https://fluffy-snickerdoodle-8da250.netlify.app/bouton.html

Et hop, votre page est en ligne.

Il vous suffit d’utiliser le lien de votre widget dans le composant “Embed” de Notion. ✅

Et pour modifier les pages ?

Pour mettre à jour vos pages HTML, éditez les sur votre ordinateur, vous pouvez aussi ajouter de nouveaux fichiers dans votre dossier.

Puis sur Netlify, allez dans l’onglet “Deploys” et importez à nouveau votre dossier.

---

Créez n’importe quel widget

On a vu ensemble le cas du bouton, mais comme au final on intègre du HTML, on peut imaginer plein d’autres widgets.

Pour vous simplifier la tâche, voici Elsight un outil qui permet d’ajouter des composants à son site, sans code.

Vous allez pouvoir utiliser ces composants dans vos fichiers HTML.

Exemple

On va tester le widget “Countdown Timer”, soit un compte à rebours.

Créons le composant sur Elfsight, et personnalisons le.

Il suffit ensuite de récupérer le code HTML en cliquant sur “Add to website“, et de coller le code dans un fichier “timer.html”.

On réimporte le site comme expliquer précédemment et le tour est joué. 🤘

Vous avez votre timer à ajouter à votre page Notion : https://fluffy-snickerdoodle-8da250.netlify.app/timer.html

---

Conclusion

Voilà, vous avez tout entre les mains pour customiser vos pages Notion !

Je reste disponible si vous avez des questions.

Et je suis toujours preneur de vos feedbacks, et de vos suggestions.

À la semaine prochaine !

Antoine