As someone who loves building things, I know how satisfying it is to create a beautiful resource, to-do list, or knowledge base in Notion. The problem is, Notion doesn't make it easy to display that great work directly on your own website.
You've probably noticed that their native embed options are limited. That’s why I designed Poper to be a simple, powerful bridge. It lets you take content from almost anywhere—including Notion—and integrate it perfectly into your site. This guide will walk you through exactly how to do it.
Embed Notion Page Into Website: A Step-by-Step Guide
Step 1: Get Your Notion Page Ready for Sharing
First things first, we need to make your Notion page accessible to the outside world. To do this, open the page in Notion and find the "Share" button in the top-right corner. Click it and toggle on the "Share to web" option.
This makes the page public, which is essential for any embedding tool to be able to see and display it. Don't worry, this just gives people a link to view it; they won't be able to edit your original document.
Step 2: Generate the Embed Code for Notion
Because Notion doesn't provide a clean HTML embed code, we need a little help from a third-party tool. Services like EmbedNotion or Apption are great for this. They specialize in turning public Notion pages into simple, embeddable code.
Go to one of these services, paste your public Notion page URL, and follow their instructions to generate an HTML embed code. Copy this code to your clipboard; we’re about to use it in Poper.
Step 3: Create a New Campaign in Poper
Now, let's head over to your Poper account. If you don't have one, it only takes a minute to sign up. Once you're in, add your website domain if you haven't already.
Click the "Create Campaign" button to get started. I recommend choosing a blank template, as we’ll be building our embed from scratch using the code we just copied.
Step 4: Add Your Notion Code Using the HTML Element
This will open the Poper campaign editor. On the left sidebar, look for the option to add new elements and select the "HTML" element. This is a handy feature I included for custom integrations just like this one.
A box will appear on your canvas. Click on it, and paste the embed code you got from the Notion tool in Step 2. You should immediately see a preview of your Notion page appear right inside the Poper editor, which is great for confirming everything is working correctly.
Step 5: Convert Your Campaign from a Popup to an Embed
By default, new campaigns start as popups. Since we want this Notion page to sit inside your website content, we need to change the campaign type. Look for the setting at the top of the editor—it will likely say "Popup."
Click on it and switch the type to "Embed." This simple change tells Poper not to float the content over your page, but to create a container that you can place anywhere you want.
Step 6: Set Your Display Conditions and Get the Code
Click "Next" to move to the Display Conditions page. This is where Poper’s power really shines. Even for an embed, you can choose to show it only on specific pages or to certain audiences. For now, you can leave it to show everywhere.
Continue to the next step, and Poper will provide you with a unique embed code for this specific campaign. Copy this snippet—it's the final piece of the puzzle.
Step 7: Install the Poper Snippet on Your Website
Now, go to your website’s editor. If this is your first time using Poper, make sure you've already installed the main Poper script in your site’s header. You only have to do this once, and you can find the code in the "Code" section of your Poper dashboard.
Next, paste the campaign-specific embed code you just copied into the HTML of your site, right where you want the Notion page to appear. This could be in a blog post, on a product page, or in your site's footer.
Step 8: Save and Publish Your Work
Finally, save the changes on your website and make sure your campaign is turned on and published within Poper. Now, visit your webpage, and you’ll see your Notion content displayed perfectly, looking like a native part of your site.
You’ve successfully bypassed Notion's limits and created a seamless experience for your visitors. It’s a fantastic way to keep your content updated in Notion while your website handles the presentation.
Conclusion
While Notion doesn't offer a direct, one-click way to embed a Notion page into your website, the ecosystem of third-party tools makes it easy to accomplish.
The most common and effective method is to make your Notion page public and use a widget generator like Indify to create a clean <iframe> embed code. This is perfect for most static embedding needs.
For those who want to turn their Notion content into a full-fledged website, a Notion-to-Website builder like Potion or Super is the ideal choice.
For marketers and business owners who need advanced control over who sees the embed and how it's displayed (e.g., in a popup, or targeted to specific users), using Poper as a smart container for your Notion embed code provides unparalleled flexibility.
By choosing the right method, you can seamlessly share your dynamic Notion content and keep your website visitors informed and engaged.
Frequently Asked Questions (FAQ)
Will my embedded Notion page update automatically?
Yes. When you make changes to the content on your original, public Notion page, those changes will automatically reflect in the embedded version on your website after a short delay for syncing.
Is it free to embed a Notion page?
Yes, the entire process can be done for free. Making a Notion page public is a free feature, and many widget generator tools like Indify offer generous free plans.
Can visitors edit my embedded Notion page?
No. When you publish a Notion page to the web, you can (and should) disable the "Allow editing" toggle. The embedded view will be read-only.
My embedded Notion page is cut off or has scrollbars. How can I fix this?
This is controlled by the height and width attributes in the <iframe> embed code. You can manually edit these values in your website's HTML. For example, increase the height="800px" to height="1200px", or set width="100%" to make it responsive to your page's container.
Can I embed a private Notion page?
No, it's not possible to embed a private Notion page. The page must be "Published to web" for any embedding tool to be able to access and display its content.
