Embed Another Website in Gutenberg

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

Overview

Custom iFrame lets you embed another website in Gutenberg by pasting any URL into the block. 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 Elementor instead? Follow the Embed Another Website in Elementor guide.

Requirements

Custom iFrame plugin installed and active
WordPress with the Gutenberg block editor
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.

Step 1: Install the Plugin and Add the Block

Install and activate the plugin

Go to your WordPress dashboard. Go to Plugins > Add New. Search for Custom iFrame by Coderz Studio, click Install Now, then click Activate.

WordPress Add New Plugin screen showing Custom iFrame by Coderz Studio in search results with Install Now button

Open your page in the block editor

Go to the page or post where you want the embedded site. Click Edit to open the Gutenberg block editor.

Add the Custom iFrame block

Click the Add Block button. Search for Custom iFrame. Click the block to add it to the page.

Step 2: Embed Another Website in Gutenberg

Paste the website URL

Select the Custom iFrame block. In the right panel, paste the website URL into the Source URL field. The site appears inside the block in the editor.

Set the height

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

Click Update or Publish. The embedded website is now live on your WordPress site.

For all block settings, see the Set Up Custom iFrame in Gutenberg guide.

This guide showed you how to embed another website in Gutenberg using the Custom iFrame plugin. From pasting the URL to publishing, the whole setup runs through the block 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 block. 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 block resize with the content.

Also Available For

Embed Another Website in Elementor

Guide for the Elementor widget.

Embed Flourish in Gutenberg

Embed Flourish data visualizations in Gutenberg.

Was this page helpful?

Last updated today

Built with Documentation.AI