How to embed any widget in Notion

If you've used Notion and you wanted to add links from all over the internet before and you couldn't really do it, we know how you feel.

That's why we've made this guide, teaching you how to do embed anything on the internet, right inside your Notion page.

We're talking about all sorts of widgets, videos, images, GIFs, previews of links and so on.

Specifically for this guide, we're just going to stick to the widgets - how to add any widget in Notion.

Why embed widgets in Notion?

There are a lot of reasons on why you should embed widgets in Notion. The main reason is that they're pretty useful.

From weather widgets to clock widgets any many others, they have lots of utilities.

For instance, if you have a stocks/crypto related Notion page, you can show your users many graphs and tickers (or you can keep them for yourself as well).

Where can I find widgets for Notion?

We've built a library of widgets and apps that are 100% dedicated to Notion and that work properly. We call this the Notion App Store.

99% of the widgets are free, and the same applies to the apps as well. The best part about them is that we're teaching you how to embed them in Notion.

Oh, and it all works just like a community! Reviews, comments, and more.

How to add widgets in Notion (HTML)

The process is really easy, and to successfully add a widget in Notion, we're going to use a platform that's aside from Notion.

Other than that, the process shouldn't take any longer than just a few minutes.

Option 1: Notion custom widget maker (free)

Within our Notion App Store, you can find one of the most useful tools for Notion embeds, and that is the Notion Custom URL Widget Maker.

The widget maker helps you embed any app within Notion. You may have noticed how some apps that provide HTML embeddable code can't be added in Notion, right?

Well, with the Custom URL Widget Maker, you can now embed in Notion literally anything on the internet. Here's how to do that:

1. Get a widget's code

First of all, you have to get the code of the app that you want to embed.

There are many apps that you can embed in Notion. For this embed, we've picked a nice-looking picture of a car from Pinterest.

2. Turn the widget into a link

Now you have to go to the Notion widget maker, and here you have to name the widget and paste the embed code.

The limit of characters within the "HTML Code" box is of 1500 characters. That should be enough!

What you've done at the previous step is basically turn the code of your embed into a link (URL) that can be pasted an embedded in Notion.

Now, simply copy the link shown in the card with your freshly-made widget.

3. Add your widget in Notion

The fun part is here. You just have to open the Notion page where you want to embed the widget and paste the link.

Upon pasting the link, you'll see these three options: Dismiss, Create bookmark, and Create embed.

Out of all, you want to select the last one - Create embed. Once you've clicked on that button, you should wait a few seconds, and then the embed will load.

There you go with embedding anything in Notion! Not so hard, is it?

Option 2: Code blocks for Simple.ink websites (free)

You can build a Notion website for free, and hence, embedding any widget within your website is free as well.

1. Create a website

First of all, you need to get yourself a Notion-built website. The process is really easy, and it basically means that you have to copy & paste the link of your Notion page and add it in Simple.ink.

We've explained this on different pages of our website, but the video above explains it best. Making a Notion website is quick and free!

2. Copy a widget's HTML code

Up next, you want to copy the HTML code of a widget. For all sorts of fun widgets for your Notion page, you can have a look at our Notion AppStore.

Over there, we have lots of cool widgets and Notion Apps that can improve your workspace's experience.

3. Create a Code block and paste the widget

Up next, you want to go to your Notion page and type '/code'.

If you want to read a fully-detailed tutorial on how to add Code blocks in Notion, make sure to read our Notion Code Block Tutorial.

That's really simple! All you have to do is go to the Notion page that hosts your website, and you have to type "/code", and then select the "Code" block.

Now, inside the code block, you need to do the following:

1. Type "#EMBED" and hit ENTER
2. Paste your widget's code (previously copied)
3. Type "#EMBED" again

That's it! Now, if you go to the public version of your website, you will notice the working widget.

Here's what it should look like:

So cool, right? If you want to see how to embed an Instagram post just like in this example, have a look at our Notion x Instagram integration tutorial.

Option 3: Using HtmlSaver (paid)

1. Widget HTML saver

If you already have a widget, make sure to copy its embeddable code. If you haven't found a widget already, when you find the right one, be sure to copy its embeddable code.

Once you've got the code, you have to go to this site called HtmlSave, because as its name states, we're looking to save the HTML code of the widget.

Before we begin explaining what we're going to do here, you have to know that you need to make an account on HtmlSave's website and that if you want the free plan, you'll have to disable your AdBlocker, in case you have one of those.

On the home page of HTML Save, you'll have to paste the your favourite widget's embeddable code.

Once you're done, just confirm that you're not a robot (if you're not a robot), and then hit "Save".

2. Copy the widget's link

After you've saved the HTML embeddable code of your widget, you'll see that the page doesn't look much different than at the first step.

Though, HtmlSave just generated a unique code for your widget: it should take no longer than a few seconds for the website to do that.

At the top of the box where you've previously pasted the widget's code, you'll see this phrase: "Your Link 🎉: link".

Be sure to copy that link, because inside of it, there's our Notion widget.

3. Embed the widget in Notion

Now that we've got the widget in our clipboard, we have to go to Notion and make sure to post it there.

In order to properly add your widget in Notion, you first have to create an "Embed" block.

There are two ways of adding widgets in Notion:

• Option 1: Directly pasting the widget's link and hitting "embed block"
• Option 2: Creating an embeddable block and pasting the link there

‍

Option 1:

The fist way to do this sounds pretty easy, but don't worry, so is option 2.

All you have to do is just paste your link in Notion, and then you just have to be sure that you select "Create embed", hit save, and your widget will then show up.

Made a mistake while editing in Notion? Read our guide on how you can undo in Notion.

‍Option 2:

If you want the second option, here's what you have to do:

Open your document and type "/embed" and select the "Embed" block. Another way of doing that is just typing slash ("/") and scrolling all the way to the block that we need. Then, your screen should look something like this.

Once you've got that embeddable block, be sure to paste your widget's link.

Now that you've pasted your widget's link, you've just got your awesome real-time Notion widget.

One really good thing about these widget blocks is that you can freely change their sizes by dragging the bars in the corners of each side of the block.

Want to add your widgets side-by-side? Then have a look at our guide where we teach you how to add vertical dividers in Notion.

Do you need to code to add widgets in Notion?

No coding required! The only coding-related activity is just copying and pasting some auto-generated code. That's all!

We'll go into the full story on what you'll have to do with this coding copy and pasting in just a second.

Can you add widgets to a Notion page?

Notion allows you to add any widget. The important part is making them work, with the help of HtmlSave.

Was this guide helpful? Have a look at the guides on how to use Notion that are provided by us. With each new day, we do our best to teach you guys how to get the most out of your favourite no-code tool.