3 steps to add an embed in Notion


Whenever I want to add a tracking budget, I use Notion.

How to embed in Notion

Notion is one of my favorite apps when it comes to tracking. I am using it to track the client’s details and create invoices and I also use it for the budget. But, it lacks something that I like to use when it comes to budget: a calculator. So how to embed into Notion a calculator?

    1. Create the calculator.

    In the immense ocean of calculator codes from the internet that was on HTML, CSS, and JavaScript only, I got inspired and created my own.

    I added the dark-light theme to it and get it on the roll. You can check the repo here and the result here. The end result looks like this:

    Calculator that mimics iOS calculator.
    2. New Repo on GitHub 

    I created a new repo on GitHub following the instructions here and added the content to it via VS Code using Git commands. I wrote an article about the basics of Git here. I am going to show how I did this in a future article. 

    3. Add to Notion.

    To add to Notion, which is why I am writing this, I did the following:

    I copied the link from the URL bar, I mean this link  ➞ https://luc-constantin.github.io/notion-calculator 

    Once the link is copied, you need to select the “Create embedded” button and paste the link above mentioned. The embed will load after a couple of seconds.

    Embed in Notion
    Embed in Notion

    After the embed loads, you should see a functional calculator, like the one below:

    Calculator embed in Notion


    That’s all for this one. If you see this useful you can find me on Twitter, LinkedIn, or GitHub where I hang out the most on Social Media and create daily content.

    ,