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

Requirements

Custom iFrame plugin installed and active
Elementor installed
A URL of the website you want to embed

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 if the site appears blank.

Open your page in Elementor

Go to the page where you want the embedded site. 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.

Custom iFrame widget being dragged from the Elementor panel into a page section in the Elementor editor

Step 2: Embed Another Website in Elementor

Paste the website URL

In the Content tab, paste the website URL into the Source URL field. The site appears in the editor.

Custom iFrame widget in Elementor editor showing an external website URL in Source URL field with live website preview

Set the height

Set Height to fit the content you want to show. Enable Auto Height to let the iFrame resize with the page content.

Step 3: Customize and Configure Settings

For styling, smart loading, and advanced options, see the Style Custom iFrame guide. Adjust dimensions, backgrounds, borders, and more.

Step 4: Save and Publish

Click Update or Publish. The embedded website 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 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

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 for a full list of fixes.

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.

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.

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.

Also Available For

Embed Another Website in Gutenberg

Guide for the WordPress block editor.

Embed Flourish in Elementor

Embed Flourish data visualizations in Elementor.

Was this page helpful?

Last updated today

Built with Documentation.AI