When you embed a Notion page into another website using an iframe, the embedded content often looks different or behaves unexpectedly compared to viewing the same page directly in Notion. This happens because Notion applies strict security and display rules to embedded pages that differ from the full web or desktop app experience. This article explains the technical limitations of Notion iframe embedding, what features break or are blocked, and how to work around the most common restrictions.
Key Takeaways: Notion iframe Embedding Limits
- X-Frame-Options: SAMEORIGIN header: Notion blocks embedding on third-party domains by default, showing a blank page or error unless the site uses an iframe sandbox with specific allowances.
- No interactive database views: Embedded Notion pages display static content only; you cannot edit, filter, sort, or click into database rows inside the iframe.
- Missing toolbar and sidebar: The Notion top navigation bar, page sidebar, and block drag handles are removed in iframe mode, reducing the editing interface to read-only content.
Why Notion iframe Embedding Has Restrictions
Notion uses an iframe to display pages on external websites, but the embedded version is intentionally limited for security and performance reasons. The primary restriction comes from the HTTP X-Frame-Options: SAMEORIGIN header that Notion sends with its page responses. This header tells browsers not to render the page inside an iframe on a different domain unless the embedding site explicitly overrides this via the iframe sandbox attribute.
Even when the iframe loads successfully, Notion serves a stripped-down version of the page. The embedded view removes all editing controls, the left sidebar, the top toolbar, and block-level interaction handles. This is by design: Notion treats iframe embedding as a read-only publishing feature, not a full app mirror. The embedded page also cannot use Notion’s real-time collaboration features, such as live cursors or instant sync of changes.
How Notion’s Embedding Differs from Direct Page Access
When you visit a Notion page directly in a browser, the page loads the full Notion client application, which includes JavaScript for drag-and-drop, keyboard shortcuts, and database filtering. In iframe mode, Notion disables most of that JavaScript to reduce the attack surface for cross-origin exploits. The result is a static HTML rendering of the page content. Images, text, and simple embeds (like YouTube videos) display, but interactive Notion elements such as database views, linked databases, and toggle lists lose their interactivity.
Steps to Embed a Notion Page in an iframe
To embed a Notion page on your own website or intranet, you must first make the page public and then generate an embed code. The following steps assume you have a Notion workspace with edit permissions for the page you want to share.
- Make the Notion page public
Open the Notion page in your browser. Click the Share button at the top-right corner of the page. In the Share menu, toggle Share to web to On. Copy the public URL that appears. This URL ends with a random string of characters. - Generate the embed code
Notion does not provide a direct embed code generator. You must create the iframe HTML manually. Take the public URL and wrap it in an iframe element. Set thesrcattribute to the public URL. Add asandboxattribute with the valueallow-scripts allow-same-originto let the browser render Notion’s content. Example:<iframe src="https://www.notion.so/YourPage123" sandbox="allow-scripts allow-same-origin" width="100%" height="600px"></iframe>. - Test the embed on your site
Paste the iframe code into your website’s HTML editor and preview the page. Check that the Notion page content appears. If the page shows a blank area or an error message, your web host may block iframe embedding. Contact your hosting provider to confirm they allow iframes from external sources. - Adjust iframe dimensions and scrolling
Set thewidthandheightattributes to fit your layout. For responsive behavior, use CSS to setmax-width: 100%andheight: auto. Addscrolling="yes"if the page content is taller than the iframe height.
Common Notion iframe Embedding Issues and Workarounds
Embedded Page Shows Blank or Error: “Refused to display”
This error appears in the browser console when the X-Frame-Options header blocks the iframe. Notion sets this header to SAMEORIGIN, meaning only pages on the same domain as Notion (notion.so) can embed the page in an iframe. To bypass this, you must host the embedding page on a subdomain of notion.so, which is not possible for external users. The only workaround is to use Notion’s public page link directly (not in an iframe) or use a third-party service like Super or Notion Sites that proxies the content.
Database Views Are Not Interactive in the iframe
When you embed a page that contains a database view (table, board, timeline, etc.), the view appears as a static snapshot. Clicking on a row does nothing; sorting and filtering controls are missing. This is because Notion’s database rendering engine requires the full client-side JavaScript, which is disabled in iframe mode. To share interactive databases, use Notion’s Publish feature instead of embedding, which opens the page in a new browser tab with full functionality.
Embedded Page Does Not Update Automatically
Changes made to the original Notion page after embedding do not appear in the iframe immediately. The iframe loads the page when the visitor opens the parent website. If the visitor keeps the page open, they will not see updates until they refresh the browser tab. There is no real-time sync for embedded pages. For near-real-time updates, consider using a service that polls Notion’s API and refreshes the embed periodically.
Login Required Prompt Appears Inside the iframe
If the Notion page is not shared to the web, visitors see a login prompt inside the iframe. This happens even if you have shared the page with specific guests via email. The iframe does not carry authentication cookies from Notion. To avoid this, always use the Share to web toggle to make the page fully public. If you need restricted access, do not use iframe embedding; instead, share the page link directly to authorized users.
Notion iframe vs Public Page vs Published Site: Feature Comparison
| Feature | iframe Embed | Notion Public Page (Direct Link) | Notion Published Site (Super, Notion Sites) |
|---|---|---|---|
| Read-only content | Yes | Yes | Yes |
| Interactive database views | No | Yes | Yes (with limits) |
| Edit controls (toolbar, sidebar) | No | No | No |
| Real-time updates | No (requires refresh) | No (requires refresh) | Yes (proxy service) |
| Custom domain support | No | No | Yes |
| Requires public share toggle | Yes | Yes | Yes |
| Responsive design | Manual CSS | Automatic | Automatic |
Notion iframe embedding is best for displaying static content like text and images inside another website. For interactive databases or real-time updates, use a direct public page link or a third-party publishing tool. The iframe approach has the most limitations, but it works for simple read-only use cases where you want to keep visitors on your own site.