Create custom Notion widgets for free!

#programming

#notion

What is Notion

Notion is a flexible and versatile software that users can create workspaces. It is really useful for those that want to improve their producitivity, have a centralized information database or anything else really.

It works with databases and blocks (there is a small explanation about block on my last post).

One of the main uses for Notion is creating your own dashboard, with your own style and aesthetic, and info that is useful for you, and part of the dashboard aesthetics are the widgets!

What are Notion widgets

Widgets are embebed HTML blocks that serve some purpose. This purpose can be a useful one, such as being a pomodoro time tracking or a countdown for a specific date, but it can also be a styling o fun purpose, such as a tamagochi in your workspace or a daily quote.

Why this post matters

If you have ever looked at notion dashboards on pinterest, you already know that widgets are a big part of the aesthetics and usefulness of a dashboard, bringing important information or use-cases directly to your page, whilst keeping that clean or elegant look that you like! But, once you start looking for those widgets, you start to realize that they are not that easy to find, they are paid or they don’t look exactly like you wanted…

There are some products that you can use to add widgets more easily to your page, and if they are good enough for you, great! This post is not for you then.

But if you always feel like there is something missing on them, or that you would change a font or the color of a widget, then keep reading.

👀

If you became interested on the products I mentioned, I recommend Indify, but there is also WidgetBox and Potion

but now, let’s get into the real part…

How to have your own custom widgets for free

So, now we knows that widgets are html snippets that are shown inside your notion page as if they were a widget (like a smartphone widget), BUT we can’t just paste the html code inside the page (maybe that is something that notion can add in the future? it would make things quite easier…)

But if we can’t just throw some code there, where do we put it?

On GitHub! GitHub is a code hosting platform that also has a tool that allows you to make your code public on a webpage, which we can them use to embed on the notion page. And that is exactly what we will do!

Let’s make a practical example

First, you will need a GitHub account. So, access GitHub and signup there (and while you are there, you can follow me!)

Once you have your account, you will need to create a repository (that is like a folder where you will put your code) click on the “+” icon and select New Repository

then, give it a name and make it public

Now that you have a repository, we can start adding our custom notion widgets! Click on create new file

now, give this file a name (for this example, you can name it greeting.html) and paste the code below

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello, you!</title>
  </head>
  <body>
    <div>
      Hello, you!
    </div>
  </body>
</html>

the code above is for this widget that shows “Hello, you!” on the screen.

Now click on Commit Changes on the upper right corner and then on Commit Changes again

we now have the widget code on the repository, and the only thing left to do is make the widget public on a webpage and embed it on our notion page!

Now, on your repository page, got to settings > pages and on branch select main

then, click on Actions (fourth option from left to the right on the image above and access the workflow

and in there, once the deployment finishes, you will get the link to your page.

when you click it, you will get a 404, but that is normal! Just add the name of the file you created to the end of the url, and you should be able to see the “Hello, you!” on your webpage!

Now, just copy this link, paste it on your notion and select the “create embed” option

and you will have the widget embed!

Congratulations! Now you can have as many widgets as you want on your notion pages! Just folow the steps:

Create new file on your repo
Add the html code to it and name it
Wait for it to finish deploying
Access the URL and add the file’s name to the end of it
Copy it and paste on your notion page, and select “create embed”

What if I don't know how to develop a widget?

You can ask chatGPT to do it for you!! Just copy the initial prompt below and them describe as best as you can the widget you want from it!

markdown

I need your help creating a notion widget.
Notion widgets are HTML code snippets that are embed on my notion page. They should follow the template below, where the content between two curly braces are for you to fill:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{name of the widget}}</title>

    <style>
      {{widget style in CSS}}
    </style>
  </head>
  <body>
    {{widget content in HTML}}
    <script>
      {{widget script in JavaScript, if needed}}
    </script>
  </body>
</html>

Can I start describing the widget I want?

Tip: after describing your widget, end the prompt with “is there anything that I can make clearer or any doubts you have that I can answer?” This can help getting better results!

For example, I entered the prompt below for a pomodoro tracker

html

The widget I want is a pomodoro tracker. It should initially display two boxes, one with a 25min countdown and the other with a 5min countdown. Below those timers, there should be a play button.

Once I click play, the 25min timer should begin its countdown. On the last 3 seconds, it should make a bipping sound so that I know that the timer is about to end. Once it ends, it should automatically begin the 5min timer, and then it should follow the same rules as the 25min (playing sounds and automatically starting the other timer once it finishes).

For the styling, keep it clean. Only use black and white colors, add rounded corners on the boxes and use some monospace font

Is there anything I can make clearer or any doubts you have that I can answer?

And the result, you can check on the following link! (If you like it, feel free to embed it on you notion pages!)

Pomodoro Tracker (fecampossantos.github.io)

PS: chatGPT warned me that the widget does not have the sound functionality

PS2: There are a LOT of improvements that can be made regarding the style (chatGPT is not known for its styling creativitiy….) but I’ll leave that to you!

I also have some other widgets on this link, feel free to grab the code and use it!

https://github.com/fecampossantos/notion-widgets

Posted on July 19, 2023

Last edited on September 21, 2023