> 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 Websites in Elementor

Guide for embedding any external website or URL in Elementor using the Custom iFrame WordPress plugin. No coding required.


## Overview

Custom iFrame lets you embed any external website in Elementor by pasting a URL into the widget. Display dashboards, landing pages, web apps, or any publicly accessible URL 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.

Using Gutenberg instead? Follow the [Embed Websites in Gutenberg](/gutenberg/embed-websites) guide.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- Elementor installed
- A publicly accessible URL to embed

<Callout kind="alert">
  Some websites block embedding via their security headers. If a site does not load, it has set `X-Frame-Options` or `Content-Security-Policy` headers that prevent iFrame display. See [Embed Blocked or Refused](/troubleshooting/embed-blocked) for details.
</Callout>

## How to Embed a Website in Elementor

<Steps>
  <Step title="Copy the website URL" icon="link" title-type="p">
    Copy the full URL of the page you want to embed. Make sure the page is publicly accessible.
  </Step>
  <Step title="Open your page in Elementor" icon="layout" title-type="p">
    Go to the page where you want the embed. Click **Edit with Elementor**.
  </Step>
  <Step title="Add the Custom iFrame widget" 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 editor"
      width="1024"
      height="337" priority={true} fetchPriority="high" />
  </Step>
  <Step title="Paste the URL and publish" icon="clipboard" title-type="p">
    In the Content tab, paste the URL into the **Source URL** field. Set **Height** to match the content. Click **Update** or **Publish**.
  </Step>
</Steps>

<Callout kind="success">
  Click **Update** or **Publish**. The external website is now embedded on your WordPress page.
</Callout>

## Website Embed Guide

<Columns cols="2">
  <Card title="Embed Another Website in Elementor" href="/elementor/websites/embed-external-website" icon="globe" horizontal={false}>
    Full guide to embedding any external URL in Elementor.
  </Card>
</Columns>

## Also in Gutenberg

Website embedding is also supported in the WordPress block editor.

See [Embed Websites in Gutenberg](/gutenberg/embed-websites) for the Gutenberg guide.

## Related Guides

- [Embed Anything in Elementor](/elementor/embed-anything)
- [Elementor Widget Setup](/getting-started/elementor-setup)
- [Embed Blocked or Refused](/troubleshooting/embed-blocked)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)