Embed Notion Page in Elementor
Step-by-step guide to embed Notion page in Elementor using the Custom iFrame WordPress plugin. Share docs and wikis on your site. No coding required.
Overview
Custom iFrame lets you embed Notion page in Elementor by pasting any published Notion embed URL into the widget. Display docs, roadmaps, knowledge bases, or public notes directly on your WordPress page.
Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.
Want to embed a different document type? See the Embed Documents in Elementor overview.
Requirements
- Custom iFrame plugin installed and active
- Elementor installed
- A Notion page published with public sharing enabled
Step 1: Get the Notion Page Embed Link
Open your Notion page
Open the Notion page you want to embed. Click the Share button in the top right.
Publish the page
Go to the Publish tab. Click Publish. The page must be public for the embed to load.
Copy the embed URL
Click Embed this page. Copy the src URL from the embed code. It looks like https://v2.notion.so/....
Private Notion pages cannot be embedded. The page must be published publicly before the embed appears.
Step 2: Add the Custom iFrame Widget
Open your page in Elementor
Go to the page where you want the Notion embed. Click Edit with Elementor.
Drag the widget onto your page
Search for Custom iFrame in the Elementor widget panel. Drag the widget into your layout.
Step 3: Embed Notion Page in Elementor
Paste the Notion embed URL
In the Content tab, paste the Notion embed URL into the Source URL field. The Notion page appears in the editor.
Set the height
Set Height to at least 600px. Enable Auto Height to let the iFrame resize as the Notion content grows.
Step 4: Customize and Configure Settings
For styling, smart loading, and advanced options, see the Style Custom iFrame guide. Adjust dimensions, backgrounds, borders, and more.
Step 5: Save and Publish
Click Update or Publish. Your Notion page is now live on your WordPress site.
Want to add a custom watermark (Pro), device frame (Pro), or fine-tune widget behavior? See the Set Up Custom iFrame in Elementor guide for all widget options.
This guide showed you how to embed Notion page in Elementor using the Custom iFrame plugin. From publishing the Notion page to pasting the embed URL and publishing, the whole setup runs through the Elementor editor without any code.
FAQ
The Notion page must be publicly published. Go to Share > Publish in Notion and confirm the page is live. Private pages do not load inside an iFrame.
Use the src URL from the Notion embed code, not the regular share link. Click Share > Publish > Embed this page in Notion to find it. It starts with https://v2.notion.so/.
Set height to at least 600px for a standard Notion page. Enable Auto Height to let the iFrame resize automatically as the content length changes.
Yes. The iFrame loads the live Notion page. Any edits you make in Notion appear on your WordPress page automatically.
Also Available For
Embed Figma Prototype in Elementor
Embed Figma design files and prototypes in Elementor.
Embed Google Docs in Elementor
Embed Google Docs in Elementor.
Related Guides
Last updated today
Built with Documentation.AI