> 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 Another Website in Elementor

Step-by-step guide to embed another website in Elementor using the Custom iFrame WordPress plugin. Display any URL inside your page. No coding required.


## Overview

Custom iFrame lets you embed another website in Elementor by pasting any URL into the widget. Display external tools, portals, landing pages, or web apps directly inside your WordPress page without any coding.

Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.

Using Gutenberg instead? Follow the [Embed Another Website in Gutenberg](/gutenberg/websites/embed-external-website) guide.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- Elementor installed
- A URL of the website you want to embed

<Callout kind="alert">
  Not all websites can be embedded. Sites that set `X-Frame-Options: DENY` or `Content-Security-Policy: frame-ancestors 'none'` block iFrame loading. See [iFrame Not Showing](/troubleshooting/iframe-not-showing) if the site appears blank.
</Callout>

## Step 1: 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 embedded site. 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 2: Embed Another Website in Elementor

<Steps>
  <Step title="Paste the website URL" icon="clipboard" title-type="p">
    In the Content tab, paste the website URL into the **Source URL** field. The site appears in the editor.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776954702/elementor/websites/external-website/paste-website-url.webp"
      alt="Custom iFrame widget in Elementor editor showing an external website URL in Source URL field with live website preview"
      width="1024"
      height="429" priority={true} fetchPriority="high" />
  </Step>
  <Step title="Set the height" icon="move-vertical" title-type="p">
    Set **Height** to fit the content you want to show. Enable **Auto Height** to let the iFrame resize with the page content.
  </Step>
</Steps>

## Step 3: 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 4: Save and Publish

<Callout kind="success">
  Click **Update** or **Publish**. The embedded website 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 another website in Elementor using the Custom iFrame plugin. From pasting the URL to publishing, the whole setup runs through the Elementor editor without any code.

## FAQ

<ExpandableGroup>
  <Expandable title="Why does the embedded site show blank?" default-open="false">
    Most blank embeds are caused by the target site blocking iFrames. Sites like Google, Facebook, and many SaaS tools set security headers that prevent embedding. See [iFrame Not Showing](/troubleshooting/iframe-not-showing) for a full list of fixes.
  </Expandable>
  <Expandable title="Can I embed my own WordPress site inside another WordPress site?" default-open="false">
    Yes, as long as the embedded site does not block iFrames. Paste the URL of any page on your other WordPress site into the Source URL field.
  </Expandable>
  <Expandable title="Can I embed a password-protected page?" default-open="false">
    No. Password-protected pages redirect to a login screen inside the iFrame. The visitor would need to log in inside the embedded frame, which creates a poor experience. Use public pages only.
  </Expandable>
  <Expandable title="What height should I use for an embedded website?" default-open="false">
    Match the height to the content you want to show. A full-page embed works well at 800px to 1200px. Enable Auto Height to let the iFrame resize with the content.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed Another Website in Gutenberg" href="/gutenberg/websites/embed-external-website" icon="layout" horizontal={false}>
    Guide for the WordPress block editor.
  </Card>
  <Card title="Embed Flourish in Elementor" href="/elementor/other/embed-flourish" icon="bar-chart" horizontal={false}>
    Embed Flourish data visualizations in Elementor.
  </Card>
</Columns>

## Related Guides

- [Embed Websites in Elementor - Overview](/elementor/embed-websites)
- [Auto Height Adjustment](/features/auto-height)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)