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 guide.
Requirements
- Custom iFrame plugin installed and active
- WordPress with the Gutenberg block editor
- A publicly accessible URL to embed
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 for details.
How to Embed a Website in Gutenberg
Copy the website URL
Copy the full URL of the page you want to embed. Make sure the page is publicly accessible.
Open your page in the block editor
Go to the page or post where you want the embed. 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.
Paste the URL and publish
In the right panel, paste the URL into the Source URL field. Set Height to match the content. Click Update or Publish.
Click Update or Publish. The external website is now embedded on your WordPress page.
Website Embed Guide
Also in Elementor
Website embedding is also supported in the Elementor widget editor.
See Embed Websites in Elementor for the Elementor guide.
Related Guides
Last updated today
Built with Documentation.AI