Notion’s ability to embed HTML pages makes it super powerful. You can embed regular stuff like PDF files, google docs, youtube pages, and even some web apps. but, in this post, I’ll share with you my most used widgets and how to embed them in your pages.
1.A Calculator Widget
I hate it when I have to switch between apps while working on something. I end up diverting from what I was already doing. So a basic scientific calculator widget on my finance pages saves me a lot of time and distraction.
How to embed it ?
you can use my calculator by embedding this link into your desired page.
The original code of this calculator is found here. All I changed is the styling but it’s basically the same.
If you don’t like this calculator you might search for another one on Codepen and create your own widget with it
Here’s what it looks like on my main finance page.
2.A Unit Converter Widget
This is particularly useful if you’re using Notion as a recipe book. If you find yourself always wondering how much is a 180 °C. Or, you’re like me accustomed to the metric system. and, ounces and ponds don’t make seance to you then this might be helpful
3. A Calendar Widget
I know Notion comes with its calendars and everything but I found a small calendar widget in my home screen to be really useful. As, it gives me a quick overview of which day is which.
4. Greetings Widget
This is both a fun and useful widget. It shows a greeting based on the time of day along with today’s date and the time now.
How to embed it?
Just embed this link in your page
Or, even better customize it by editing its code which is found here to add your own name
find that block of code and add your name to it
if (hrs < 12)
greet = 'Good Morning YOUR_NAME ';
else if (hrs >= 12 && hrs <= 17)
greet = 'Good Afternoon YOUR_NAME';
else if (hrs >= 17 && hrs <= 24)
greet = 'Good Evening YOUR_NAME ';And then Create your own widget. If you don’t know how, check out this quick tutorial
And, Here’s How the calendar and greetings widgets look like on my Home page
5.World Clock
This is a really nice addition if you’re always communicating. or, have to schedule meetings with people in other time zones. I also think it looks pretty in my trip planner pages.
How to embed it?
This widget among other pretty ones is available from ClockLink.com
Customize your widget from here. And, copy the link that’s between the quotations in src=””. And, embed that link on your page.
6. Countdown widget
I love using countdown widgets on my phone and having them on Notion is just pretty awesome.
How to embed it?
You’ll need to create your own widget for this one. you can follow this tutorial. And, use the code here. You will need to edit the code mentioned to add your own date.
Find this line of code.
const myDate = new Date('Sep 30, 2020 00:00:00');And, replace the date here with your own date.
7.Goals and Accomplishment widgets
These are my most favorite type of widgets. I use them to visualize my goals and accomplishments. These require a bit of HTML/CSS knowledge or you can just search Codepen end carefully edit the code you chose. I can’t really give you a widget to embed but here’s an example to explain the idea.
In my trips page I have this widget.
Other widgets
The weather widget I use on my homepage is available on weatherwidget.io. There’s also a quote of the day widget which you can get from here.
The widgets above are my favorites. but, of course, there is much more to Notion with the ability to embed HTML snippets and widgets there’s no limit to what you can embed!
UPDATE
I have created a special widget gallery page containing these 7 and many more. So check it out here.
