> 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 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](/elementor/websites/embed-external-website) guide.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- WordPress with the Gutenberg block editor
- 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: Install the Plugin and Add the Block

<Steps>
  <Step title="Install and activate the plugin" icon="download" title-type="p">
    Go to your WordPress dashboard. Go to **Plugins > Add New**. Search for **Custom iFrame by Coderz Studio**, click **Install Now**, then click **Activate**.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1777223431/getting-started/installation/Custom-iFrame-Installation.webp"
      alt="WordPress Add New Plugin screen showing Custom iFrame by Coderz Studio in search results with Install Now button"
      width="1024"
      height="396" priority={true} fetchPriority="high" />
  </Step>
  <Step title="Open your page in the block editor" icon="layout" title-type="p">
    Go to the page or post where you want the embedded site. Click **Edit** to open the Gutenberg block editor.
  </Step>
  <Step title="Add the Custom iFrame block" icon="plus" title-type="p">
    Click the **Add Block** button. Search for **Custom iFrame**. Click the block to add it to the page.
  </Step>
</Steps>

## Step 2: Embed Another Website in Gutenberg

<Steps>
  <Step title="Paste the website URL" icon="clipboard" title-type="p">
    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.
  </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 block resize with the page content.
  </Step>
</Steps>

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

For all block settings, see the [Set Up Custom iFrame in Gutenberg](/getting-started/gutenberg-setup) 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

<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 block. 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 block resize with the content.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

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

## Related Guides

- [Embed Websites in Gutenberg - Overview](/gutenberg/embed-websites)
- [Auto Height Adjustment](/features/auto-height)
- [Embed Blocked or Refused](/troubleshooting/embed-blocked)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)