Notion

The best 12 Notion embeds | How to embed anything to Notion

Reading time

Let me ask you a question: how did you get started with Notion? I'm willing to bet it was probably something simple, like maintaining your to-do list or creating a company wiki. 

Notion then quickly overflows to other aspects of your life and becomes your go-to tool for literally everything! Notion was designed to be your all-in-one tool.

And although Notion can do so much, it’s still missing small features to be “complete” for your unique use case. This can create an awkward situation where you have your life consolidated in Notion, and you still need to refer to other apps, again and again, which breaks your flow.

Plus, you don’t want to open a million of tabs and context switch to view information from other places. 

What's the solution to this? Embedding those apps into your Notion system. This way, you can bring all your favorite tools from all over the web right to Notion!

In this article, you will learn everything you need to know about embedding things to Notion and explore the best 10 widgets that can make your Notion so much better. 

What can you embed in Notion?

To set the stage, let’s talk about what embedding is. When you embed something, you bring a piece of external web content to Notion. 

Most people don’t really know how power embeds can be. And because of this, entire businesses like Chillipepper have sprung up. It’s a form that you can embed into Notion. But, with some very basic understanding of embeds, you don’t really need that tool.

Later in this article, you learn how to create your own embeds!

Now, in terms of what you can embed, it’s a very long list. Notion was designed from the ground up to be modular and versatile, so it allows for a wide range of possibilities. 

Generally, there are two types of Notion embeds: “official” and everything else.

First, let’s check out some Notion officially embeds.

1. Videos (Loom & Youtube)

Who wants to click through a link to watch content in a separate tab?

You can paste a link to a Youtube video or a Loom with a walk-through to a Notion page and click on “embed video” in the popup that opens. 

 

2. Google Maps

If you are a business with a public Notion page or if you run events, embedding Google Maps is super useful. 

Here is how we did it on the page for our company offisite

How to embed Google Maps in Notion.

To embed maps, use the /slash command and pick Google Maps. Then copy a link from google.com/maps there. 

3. Miro

Miro is a collaborative whiteboard application. It features an infinite canvas that allows you to unleash your creativity. If you do your group sessions in Miro, you definitely want them embedded in Notion.

Like before, use the slash command and type in ‘Miro.’ Then enter a public link to your Miro board. 

Once it’s successfully embedded, you can resize and edit the board as you want. 

4. Figma

Designers live in Figma. And good luck trying to get them out of it. 

Figma is a go-to for product and design, so if you are in tech, you can’t avoid it. 

Using Figma link previews will allow you to bring your updated designs into your Notion. 

Like you’ve done just earlier, paste a link to a specific frame to Notion.

Embed from Figma to Notion.

You may be asked to authenticate with Figma. Then you’ll see the image. 

That’s it! 

5. Jira

Jira is the go-to tool to track issues and bugs for software development. So again, it’s probably inescapable for startups. However, you can try using Notion for project management entirely.

If you use Jira, embedding it into Notion can be a great way to consolidate all your tasks in one place.

The new Jira integration allows you to embed single issues and entire boards! 

Let’s embed an issue, first. Just paste the Jira issue link to Notion. There are two views: block and inline. 

And now, it gets even better. You can create a 2-way-synced database! Or embed a Jira board. To do this, copy the link to the Jira board and paste it in Notion. 

If you want to transition entirely from Jira to Notion, the sync won’t work because you will need a paid Jira subscription. Instead, you can transfer Jira tickets to Notion using this automation. 

6. Embed Google Calendar

Using the Notion calendar view for any length of time will quickly reveal its weak points and limitations. 

When using it, it's easy to think back to the good old Google Calendar browser tab. But that might not be a good option want to share a calendar on a public page for your business.

Well, the good news is that Google Calendar can be embedded in Notion too! 

In this post, we’ve laid out 4 ways you can use Google Calendar with Notion, including how to import events, enable 2-way sync, and automations.

7. Google Docs and Sheets (Different)

If you tried embedding Google Doc or Sheets to Notion, you know that it will only let you see the preview. You can’t interact with it and edit docs, which is limiting and restrictive.

Here is how pasting a Google Doc link to a Notion embed block will look:

How to embed Google Sheets and Docs to Notion.

Here he is the another way, which you are about to learn:

How to embed Google Sheets and Docs to Notion.

Which one is better? With the second method, you can work on the document and view it entirely. 

All you need to do is create a special <iframe> code and paste it in a Notion embed block. Before doing this, make sure that the Doc or Sheet you’re embedding is public, and make sure to copy the link that gives editing-level access, or it won’t work.

In this 3-minute video by Nick Bisesi, he goes through both of these ways and how to implement both of these methods.

8. Pomodoro timer

Assuming you are into productivity, you’ve heard about the Pomodoro technique. 

Developed by Francesco Cirillo, if the idea is that you are focused for only ~25 min period of time (remember Ted talks’ avg. legth). Hence, you should commit  to 25-minute work sessions, and take 5-minute breaks in between.

Although there are countless Pomodoro timer apps and websites out there, YES, you can also embed one directly to Notion. 

Just copy this link, paste it into your Notion page of choice, and from the dropdown menu select ‘Create embed.’

Embed Pomodoro timer to Notion.

You can resize it based on your Notion page layout. Plus, this timer is themed around Studio Ghibli, which is always a great thing.

9. Investment tracker

If you have many investments, you might often get the urge to check how they are doing every now and again. Instead of breaking up your workflow and going to another application, bringing your portfolio to Notion itself can be useful. With this template by Renan Greca, you can do exactly that.

Ivestment tracker for Notion.

So, how do you implement this? It’s easy. Once you open the link, click the ‘Duplicate Template’ button. This will copy it over to your Notion account. From then on, Renan has created a neat little tutorial to get you settled in and start tracking your investments in terms of liquid value, yearly growth, returns, and more.

10. Spotify playlist

Spotify playlists literally made this app #1 music app in the world. In fact, I am writing this very article while listening to my “flow” playlist (save it). 

 

I don’t know about you, but music can often help me 10X my productivity. Whether it’s chillstep by Lakey Inspired or a cinematic piece by Hans Zimmer, listening to music while working can often bring new life to the task I’m doing. If you’re the same, I know for a fact that you’d love to embed your Spotify playlist to your Notion sheet.

This short 5-min video by Simple Ink covers the steps in detail. Besides just embedding your favorite playlist, he also shows you how to change its color to fit in with your Notion theme.

11. Counter

Goals are so much more powerful when made visible. You can embed a counter using a free tool called Indify

You can +1 or -1 by clicking on the arrows. 

Here is how I keep my content goals visible: 

Embed a counter to Notion.

12. Life Progress Bar

Indify, can also get some fire under your but reminding you that the time is ticking. Well, and that we are all mortal if you add the “life” counter. 

Indify Life Progress Bar in Notion.

What Else Can Be Embedded In Notion?

Notion itself has claimed that “pretty much any online content can be embedded on a page.” Let your imagination run wild: media players (both audio and video), data charts, products, dashboards, and so much more. Some more apps that can be embedded into Notion that I didn’t mention before are Loom, Tango, and Screenful, to name a few.

Check out Apption or Simple.ink to view a catalog of other Notion embeds. These websites provide additional tutorials with embed codes. 

You can also search Embed.ly’s database too, which includes over 700 content providers. If you come across any errors, Notion has also created a support page dedicated to embeds and apps.

Embed custom button and web forms

When building the Notion Automation Hub (the go-to resource for pre-built Notion automations), our designer wanted to make the template look amazing. 

To his surprise, there was no way to add a link to a page that would look the way he envisioned it. So we had to embed a button. 

To get full control of the embed, we’ve created a dedicated web page that has only one element: a button. 

https://www.bardeen.ai/support/button

You can style yours however you want. 

Because we didn’t want to create a new page for each destination URL when you click the button, we had done some simple code magic.

This JavaScript code snippet will grab the destination link from the embed URL and direct there when clicked. 

https://www.bardeen.ai/support/button?redirect=https://www.bardeen.ai/playbooks/upload-zoom-recording-to-drive

<button class="tryitbtn" onclick="myFunction()">Try it!</button>

<script>
function myFunction() {
    var currentURL = window.location.href;
    var playbookLink = currentURL.split('?redirect=').pop();
    console.log(playbookLink);
    window.open(playbookLink, "_blank").focus();
  }
</script>

The code will extract the URL after ‘?redirect=’ and will launch it when clicked (onclick) in a new tab (_black). 

You can use our button, or create your custom button with the code snippet above.

We did the same to embed Webflow forms and fancy buttons to Notion. 

Embed Custom button and web forms to Notion.

FAQs

There you go! We just went through ten apps that can be embedded in Notion. Here are some common questions you might be curious about.

Will Notion embeds work offline?

Most of us enjoy stable and high-speed Internet connections 365/24/7. However, in the case of a network outage or if you're on a plane, that might not be the case. Fortunately, with offline functionality, Notion has you covered.

In the context of this article, let's talk about if embeds work offline. As @NotionHQ indicates in this tweet, if an embed is preloaded and cached locally, it will work when you're offline, such as an image. On the other hand, if it's dynamic and needs server-side support, like a live map, it won't work.

Overall, you can use Notion offline, albeit with a few limitations. Most of the changes you make while offline will be synced to the cloud when you’re back online.

Can you embed a Notion page into another website?

Being able to embed a Notion page into another website can open up a vast range of possibilities. With basic coding knowledge, you can publish any Notion sheet or template using a web builder like WordPress, Wix, or Squarespace. Alas, this feature isn't supported natively. 

However, you can use a website named Embed Notion to do it instead. Before you begin, you need to make sure that the page you want to embed is public. To do that, simply toggle the ‘Share to web’ option at the top right of the page.

Embed a Notion page into another website.

Done? Now follow these steps:

  • Click ‘Copy’ to save the page’s unique URL to your clipboard
  • Open http://embednotion.com
  • Paste the URL below ‘Your Notion Link’ and click ‘Create embed for free’
  • A block of HTML and CSS code with the <iframe> tag will be generated for you. Copy it with the ‘Copy Code’ button
  • Now, you can inject that code into any website you want

That’s it! 

The downside is that this will cost you $5.99 per month, if you want to remove the watermark and enable auto-update. But other than that, you can use it for free. It’s a big BUT, however.

Endnotes

By now, you know well enough that Notion is a powerful tool. It’s not just limited to organizing your life, but also improving it in the areas that matter to you and bringing value to others. In addition to native features, bringing all the other tools on the web can enhance your user experience even further, giving you an even bigger productivity boost.

We hope you found at least a few of these embeds useful and started using them. Are there any more apps that you want us to add to this list? Let us know on our Twitter page!

About the author:
Renat Gabitov
Product & Marketing
Building the future of automation.
Little Rocket Ship

Launch your productivity boost today.

By clicking “Accept All Cookies”, you agree to the storing of cookies. View our Privacy Policy for more information.
Bardeen - One-click automations for your repetitive tasks | Product Hunt
Bardeen - One-click automations for your repetitive tasks | Product Hunt