> 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 Gutenberg

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


## Overview

Custom iFrame lets you embed any external website in Gutenberg by pasting a URL into the block. 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 Elementor instead? Follow the [Embed Websites in Elementor](/elementor/embed-websites) guide.

## Requirements

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

<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 the block editor" icon="layout" title-type="p">
    Go to the page or post where you want the embed. 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>
  <Step title="Paste the URL and publish" icon="clipboard" title-type="p">
    In the right panel, 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 Gutenberg" href="/gutenberg/websites/embed-external-website" icon="globe" horizontal={false}>
    Full guide to embedding any external URL in Gutenberg.
  </Card>
</Columns>

## Also in Elementor

Website embedding is also supported in the Elementor widget editor.

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

## Related Guides

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