How to embed any number of HTML widgets/snippets into Notion app for free

embed Notion HTML widget

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 which 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 in your Notion page or template as you want and without any extra ads.

step 1 : Making 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 : Creating 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 in 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 : Publishing your widget

In 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 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!”