View Categories

How to Embed Notion Page in Elementor?

Table of Contents

With Custom iFrame, you can embed Notion page in Elementor easily. Share docs, roadmaps, knowledge bases, or public notes directly on your WordPress site.

Quick Summary

Step-by-step guide to Embed Notion page in Elementor.

  1. Open your Notion page and publish it from the Share settings.
  2. Click Embed this page and copy the iframe src URL.
  3. Install and activate the Custom iFrame plugin.
  4. Edit your page with Elementor.
  5. Drag the Custom iFrame widget into the editor.
  6. Paste the Notion iframe URL into the Source field.

Your Notion page is now embedded in Elementor and will stay updated automatically.

Step 1: Get the Notion Page Embed Link

First, make your Notion page embeddable.

  1. Open your Notion page
  2. Click the Share button (top right)
  3. Go to the Publish tab → Click on ‘Publish’ button
  4. Click Embed this page → Copy the iframe src URL from the embed code

This is the link we’ll use in Elementor. Make sure the page is published. Private pages won’t load inside an iframe.

Step 2: Install Custom iFrame Plugin.

  1. Install and Activate ‘Custom iFrame‘.
  2. Open your page in Elementor Editor.
  3. Search for Custom iFrame and Drag and drop the Widget onto editor area.
This image shows the WordPress plugin “Custom iFrame for Elementor – Embed Pdf, Maps, Videos, & Websites Easily” by Coderz Studio. It allows secure, SEO-friendly, and responsive iFrame embedding in Elementor with features like lazy loading, auto-height adjustment, and dynamic URL support. The plugin has a 5-star rating from 3 reviews, over 1,000 active installations, was last updated 19 hours ago, and is marked compatible with the current WordPress version.

Step 3: Embed the Notion Page in Elementor

This is the easiest part.

  1. Select the Custom iFrame widget
  2. Go to the Content tab
  3. In the Source field, paste the Notion iframe URL you copied earlier

That’s it.
Your Notion page will appear instantly inside Elementor.

Step 4: Customize & Configure Settings

Once the page is embedded, you can fine-tune everything.

Layout and Behavior

  • Adjust iframe height and width
  • Enable smart loading for better performance
  • Control scrolling behavior

Styling

  • Add background styles
  • Customize borders and spacing
  • Match the embed with your site design

For detailed controls:

This helps you make the embed look native, not pasted.

Step 5: Save & Publish

Click Update, and your Notion page is now live on your WordPress site!

This guide showed you how to embed Notion page in Elementor using the Custom iFrame plugin. From publishing your Notion page to embedding and styling it in Elementor, the setup is quick and flexible.

Use it to display live docs, knowledge bases, or dashboards while keeping everything updated directly from Notion.