Guides How to Embed Notion Pages in Any Website

Here, you will find information about NotionHero Embeds and how to embed any Notion page on any websites or webpages easily. If you want to embed your Notion page on your website, you probably already realized that Notion doesn't allow this.

For those with coding savoir-faire, embedding your Notion page onto a website can be achieved through a savvy utilization of Notion's API, and some Javascript. However, these technical requirements can make the process an arduous and time-consuming endeavor. For a more effortless approach, you can use NotionHero and easily create as many embeddable notion pages as you want completely for free.

But how does NotionHero work?!

If you wonder how NotionHero Embeds are working, in a nutshell NotionHero creates a wrapper page around your Notion page. NotionHero works like a "proxy":

  • You create a public URL for your Notion page.
  • Add it to NotionHero.
  • NotionHero downloads and renders your page.
  • You get a tiny snippet of HTML code that you can include in your webpage to embed your Notion page literally anywhere: Wordpress, Ghost, Wix, SquareSpace or any webpages or website.

Example of a Notion Page Embed

Yes, that is a Notion Page that can be embedded into any website, and it took me literally 30 seconds to create it. It remains fully functional and you can freely navigate inside the Embed. Go ahead and click around ☝️

How to use NotionHero for Embedding Notion Pages

Here is how you can create Notion Embeds in 30 seconds. Start your stopwatch:

  • Sign up for NotionHero here.
  • Go to the Dashboard -> Embeds -> Add New or click here to access the add page directly.
  • Prepare a public link for your notion page.
    • Create new Notion page with a table or database
  • Enter URL into the form, and click Save.
  • Copy iframe code and paste it into your page.

This is how NotionHero UI for embedding notion pages looks like

Step 1: Enter a Notion Page URL

Enter notion page url you would like to embed

Step 2: Optional tweaks

Customize your Notion Embed with Dark Mode, hiding and showing Cov

Step 3: Your Embed is ready!

Your iframe code will look something like the following ( this url does not work ):

<iframe width="100%" height="100%" src="https://e.notionhero.io/e1/p/3e5960c-241ebc5b1ebd86k3c3t3h6208ed5b0"></iframe>

Copy and paste this code into your page. To adapt to your design, you can adjust height and width with `50%` or `50px` values.

With NotionHero Embeds you can achieve a lot:

  • Embeding Notion Page in website builders like Wordpress, Ghost, Wix, SquareSpace, Webflow, Weebly, Drupal.
  • You can include Notion Page in your Shopify store.
  • Add the Notion page to your paywalled website without revealing the actual link.
  • Include Notion Pages in other Notion Pages.
  • And lastly, you can include multiple Notion Pages into one single page. Sweet.

NotionHero is a free tool that you can use to embed notion pages into any website for free, unlike other competitors and alternatives

Create your first Notion Embed now

Summary

NotionHero Embeds offers a quick and simple nocode way of embedding Notion pages in websites or other Notion pages. In just 30 seconds, convert your public Notion Page into a small HTML iframe code ready to be included in the website or website builder.

If you have any further questions about NotionHero or NotionHero Embeds feel free to click the chat icon in the bottom right or email us at hello@notionhero.io