> For the complete documentation index, see [llms.txt](https://docs.customiframe.com/llms.txt).
> Use it to discover all available pages before exploring further.

# 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.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- Elementor installed
- A Notion page published with public sharing enabled

## Step 1: Get the Notion Page Embed Link

<Steps>
  <Step title="Open your Notion page" icon="file-text" title-type="p">
    Open the Notion page you want to embed. Click the **Share** button in the top right.
  </Step>
  <Step title="Publish the page" icon="globe" title-type="p">
    Go to the **Publish** tab. Click **Publish**. The page must be public for the embed to load.
  </Step>
  <Step title="Copy the embed URL" icon="link" title-type="p">
    Click **Embed this page**. Copy the `src` URL from the embed code. It looks like `https://v2.notion.so/...`.
  </Step>
</Steps>

<Callout kind="alert">
  Private Notion pages cannot be embedded. The page must be published publicly before the embed appears.
</Callout>

## Step 2: Add the Custom iFrame Widget

<Steps>
  <Step title="Open your page in Elementor" icon="layout" title-type="p">
    Go to the page where you want the Notion embed. Click **Edit with Elementor**.
  </Step>
  <Step title="Drag the widget onto your page" icon="move" title-type="p">
    Search for **Custom iFrame** in the Elementor widget panel. Drag the widget into your layout.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776867149/getting-started/elementor-setup/Guide-Add-Custom-iFrame.webp"
      alt="Custom iFrame widget being dragged from the Elementor panel into a page section in the Elementor editor"
      width="1024"
      height="337" priority={true} fetchPriority="high" />
  </Step>
</Steps>

## Step 3: Embed Notion Page in Elementor

<Steps>
  <Step title="Paste the Notion embed URL" icon="clipboard" title-type="p">
    In the Content tab, paste the Notion embed URL into the **Source URL** field. The Notion page appears in the editor.
  </Step>
  <Step title="Set the height" icon="move-vertical" title-type="p">
    Set **Height** to at least 600px. Enable **Auto Height** to let the iFrame resize as the Notion content grows.
  </Step>
</Steps>

## Step 4: Customize and Configure Settings

For styling, smart loading, and advanced options, see the [Style Custom iFrame](/getting-started/styling) guide. Adjust dimensions, backgrounds, borders, and more.

## Step 5: Save and Publish

<Callout kind="success">
  Click **Update** or **Publish**. Your Notion page is now live on your WordPress site.
</Callout>

Want to add a custom watermark (Pro), device frame (Pro), or fine-tune widget behavior? See the [Set Up Custom iFrame in Elementor](/getting-started/elementor-setup) 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

<ExpandableGroup>
  <Expandable title="Why does my Notion embed show blank?" default-open="false">
    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.
  </Expandable>
  <Expandable title="What URL do I paste into Source URL?" default-open="false">
    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/`.
  </Expandable>
  <Expandable title="What height should I set for a Notion page?" default-open="false">
    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.
  </Expandable>
  <Expandable title="Does the embed update when I edit the Notion page?" default-open="false">
    Yes. The iFrame loads the live Notion page. Any edits you make in Notion appear on your WordPress page automatically.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed Figma Prototype in Elementor" href="/elementor/documents/embed-figma" icon="figma" horizontal={false}>
    Embed Figma design files and prototypes in Elementor.
  </Card>
  <Card title="Embed Google Docs in Elementor" href="/elementor/documents/embed-google-docs" icon="file-text" horizontal={false}>
    Embed Google Docs in Elementor.
  </Card>
</Columns>

## Related Guides

- [Embed Documents in Elementor - Overview](/elementor/embed-documents)
- [Embed Figma Prototype in Elementor](/elementor/documents/embed-figma)
- [Embed Google Docs in Elementor](/elementor/documents/embed-google-docs)
- [Auto Height Adjustment](/features/auto-height)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)