Update
A video tutorial is now available!
If you’re using Notion then you probably know that you can’t embed HTML widgets directly into it. I have done some research and I found 2 tools that let you do so.
- htmlsave which is great but only gives you one widget for free and you have to subscribe to add more
- The potion shop is also great and has no limits on the number of widgets but adds an ad link to your widgets that just bugged me!
In this tutorial, I’ll show you how you can have as many HTML snippets on your Notion page or template as you want and without any extra ads.
step 1 : Make a GitHub repo
First of all, You’ll need a GitHub account if you don’t have one already then just create a new one.
Once you have your account, go to your profile and click the plus button in the top right corner and choose “New repository”
Give your repository a meaningful name and click “Create repository”. You don’t need to change anything else.
Step 2: Create your first widget
Now click on “creating a new file” to start adding your first widget/snippet.
I’m using weatherwedgit.io to get the HTML code for a nice-looking weather widget. Customize your widget as you like and then copy the HTML code and paste it into the new file you’ve just created in Github. and name the page “index.html”
and then click “Commit changes” at the end of the page
Step 3: Publish your widget
On your repository page click “settings”
Go all the way down till you find “GitHub Pages”. and choose “master branch”
After that, click “choose a theme” and select anyone. it won’t matter.
You’ll notice now that your HTML file is published at the given link
If you copied everything right then you should see the widget when you click the link.
Step 4: Adding it to Notion and creating more widgets
Copy that link and embed it as a URL into your Notion page and Voila!
Now, let’s add another widget. The widget on the left is a custom-made one that changes the greeting according to the time of day and shows the date. I’ll show you how you can add it. or, of course, you can use any other HTML snippet you want.
let’s go back to our repository and click “Create new file”
I’ll call this file “greetings.html”. whatever you wanna call it remember the name because we’re gonna use it later.
Copy and paste the following code into your newly created file
<html>
<head>
<title>Greeting Message</title>
<style>
#lbl {
font-family: monospace;
font-size: xx-large;
color: #626262;
padding: 5px;
border: 1px solid #ececec;
text-align: center;
line-height: 1.5;
height:85%
}
#date{
font-size:large;
}
body{
background-color: aliceblue;
}
</style>
</head>
<body>
<div id="lbl"></div>
</body>
<script>
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
var today = new Date();
var hrs = today.getHours();
var dayOfWeek = weekday[today.getDay()];
var date = dayOfWeek+" " + today.getDate() + "/" +(today.getMonth()+1) +'/'+today.getFullYear() ;
var greet;
if (hrs < 12)
greet = 'Good Morning ';
else if (hrs >= 12 && hrs <= 17)
greet = 'Good Afternoon ';
else if (hrs >= 17 && hrs <= 24)
greet = 'Good Evening ';
document.getElementById('lbl').innerHTML =
greet+=`<div id="date"> It's ${date}</div>`;
</script>
</html>you can personalize it more by adding your name for example. you can do so by editing that line of code
greet+=`<div id="date"> It's ${date}</div>`;to be like this
greet+= "Your name here " +`<div id="date"> It's ${date}</div>`;After you’re done, click “Commit new file”.
Your new widget link will be “your repository URL”/”your file name”. your repository URL is the one you used the first time. you can get it from the Settings under GitHub pages. Mine looks like this https://ally293.github.io/notion/greetings.html
Like you did with the first widget embed that link and you’re done!
Add as many snippets as you want. “GitHub pages” is totally free without any distracting links!”
Want some ideas for Notion widgets?
check out my 100% free Notion Widgets Gallery.