How to Embed a Notion Page in Your Website: Complete Guide
Table of Contents
Introduction
Notion creates beautiful content, and embedding Notion pages in your website shares that content externally. Whether you're adding documentation to a product site, embedding a changelog, or displaying a portfolio, this guide covers every method.
Making Your Page Public
Before embedding, your page must be publicly accessible.
Step 1: Share Your Page
Step 2: Verify Access
The Iframe Method
Basic Iframe Embed
<iframe
src="https://your-page.notion.site/Page-Name-abc123"
style="width: 100%; height: 600px; border: none;"
></iframe>
Responsive Iframe
<div style="position: relative; width: 100%; padding-bottom: 56.25%;
<iframe
src="https://your-page.notion.site/Page-Name-abc123"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
></iframe>
</div>
Iframe Limitations
Using Notion Embed (Recommended)
Notion Embed solves these limitations:
Benefits
How It Works
Pricing
Platform-Specific Guides
WordPress
Method 1: HTML Block
Method 2: Notion Embed Plugin
Webflow
Squarespace
Wix
React/Next.js
// Using iframe
function NotionEmbed() {
return (
<iframe
src="https://your-page.notion.site/Page-abc123"
style={{ width: '100%', height: '600px', border: 'none' }}
/>
);
}// Better: Using Notion Embed
function NotionEmbed() {
return (
<iframe
src="https://notionembed.com/embed/your-embed-id"
style={{ width: '100%', height: '100%', border: 'none' }}
/>
);
}
HTML Static Sites
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
.notion-container {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="notion-container
<iframe
src="https://notionembed.com/embed/your-id"
style="width: 100%; min-height: 800px; border: none;"
></iframe>
</div>
</body>
</html>
Customization
With Native Iframe
Limited options:
With Notion Embed
Full customization:
/<em> Custom styling available </em>/
.notion-embed {
font-family: 'Your Font', sans-serif;
--notion-color-text: #333;
--notion-color-bg: #fff;
}
Options include:
Common Use Cases
Documentation Sites
Product Site
├── Home
├── Features
├── Docs (Notion embed) ←
└── Blog
Changelogs
Keep users updated:
Portfolios
Display work samples:
Internal Tools
Embed for team access:
SEO Considerations
Iframe SEO Issues
Solutions
FAQ
Can I embed a private Notion page?
No, pages must be public for iframe embedding. Notion Embed Enterprise offers authenticated embedding for teams.
Will my Notion page updates show on my website?
Yes, changes sync automatically. Viewers see the latest content.
Can I remove the Notion branding?
Not with native iframes. Use Notion Embed to remove branding.
Is embedded content SEO-friendly?
Standard iframes are not SEO-friendly. Notion Embed offers SEO optimization options.
Can I customize the embedded page styling?
Native iframes don't allow style changes. Notion Embed provides full CSS customization.
Conclusion
Embedding Notion pages in websites extends your content reach:
Start sharing your Notion content externally!
---
Related: Notion as a Website | Remove Notion Branding
Alex Thompson
Content Creator at Notion Embed. Passionate about helping people share their knowledge with the world.
View all posts →Frequently Asked Questions
Can I embed a private Notion page?
No, pages must be public for iframe embedding. Notion Embed Enterprise offers authenticated embedding.
Will my Notion page updates show on my website?
Yes, changes sync automatically. Viewers see the latest content.
Can I remove the Notion branding?
Not with native iframes. Use Notion Embed to remove branding.
Is embedded content SEO-friendly?
Standard iframes are not SEO-friendly. Notion Embed offers SEO optimization.
Related Articles
Ready to Transform Your Notion Content?
Join thousands of creators, startups, and businesses using Notion Embed to power their websites. Get started in minutes.