How to Embed a Widget on WordPress

WordPress powers over 43% of all websites on the internet, making it the world's most popular CMS by a wide margin. This guide walks you through every supported method for embedding an Embeddy widget on a WordPress site — whether you use the modern Gutenberg block editor, the Classic Editor, or Elementor.

Beginner~5 min readUpdated 2026

On this page

Prerequisites

Before you embed your widget, you need two things:

  • Your Embeddy embed code. Log in to your dashboard at https://embeddy.ai/dashboard, open your widget, and copy the iframe embed code. It looks like this:
<iframe
  src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
  width="100%"
  height="500"
  frameborder="0"
></iframe>
  • WordPress admin or editor access. Your WordPress user account must have the Administrator or Editor role to embed iframes. See the role warning below for details.

Gutenberg (Block Editor)

The Gutenberg block editor is the default editor in WordPress 5.0 and later. It uses a block-based interface where each piece of content is its own block. The Custom HTML block lets you paste raw HTML — including iframes — directly into your page.

  1. 1

    Open the post or page

    In your WordPress admin, go to Pages or Posts and open or create the page where you want the widget to appear.

  2. 2

    Add a Custom HTML block

    Click where you want the widget, then type /html and press Enter — this is the fastest shortcut. Alternatively, click the + icon and search for "Custom HTML" in the block search.

  3. 3

    Paste your embed code

    Click inside the Custom HTML block and paste your Embeddy iframe code. The block will display the raw HTML — that is expected.

  4. 4

    Use the Preview toggle

    In the block toolbar that appears above the Custom HTML block, click "Preview". This renders the iframe inline in the editor so you can confirm the widget loads before publishing. Click "HTML" to switch back to the code view.

  5. 5

    Publish or update the page

    Click Publish (new page) or Update (existing page) in the top-right corner. Visit your live page to see the widget.

Tip: The Custom HTML block does NOT support WordPress shortcodes. If you see a shortcode rendered as plain text inside the block, you are using the wrong block type. Make sure you selected Custom HTML — not a Shortcode block or Paragraph block.

Important: User role requirement

WordPress sanitizes HTML for lower-privilege users. Contributors and Subscribers have their HTML filtered by wp_kses(), which strips <iframe> and <script> tags on save. Only users with the Administrator or Editor role have the unfiltered_html capability required to embed iframes. If your embed disappears after saving, contact your site administrator to request the Editor role.

Classic Editor

If your site uses the Classic Editor plugin (or an older WordPress install), the embedding process is slightly different. The key is to use the Text tab — not the Visual tab — so WordPress does not strip your HTML.

  1. 1

    Open your post or page in the Classic Editor

    Navigate to Pages or Posts and open the entry you want to edit.

  2. 2

    Switch to the Text tab

    In the top-right of the editor toolbar, click the "Text" tab. Do not use the "Visual" tab — the Visual editor will re-process and strip your iframe code on switch.

  3. 3

    Paste the embed code

    Place your cursor where you want the widget and paste your Embeddy iframe code.

  4. 4

    Publish or update

    Click Publish or Update. Visit the live page to confirm the widget appears.

Warning: If you switch from the Text tab to the Visual tab and back, WordPress may strip your iframe. Always finalize your embed while in the Text tab and save without switching back to Visual.

Elementor

Elementor is one of the most popular WordPress page builders. It has a dedicated HTML widget that accepts raw HTML — including iframes. Note that the HTML widget is restricted to administrators by default in many Elementor configurations.

  1. 1

    Open the page in Elementor

    From your WordPress admin, open the page and click "Edit with Elementor".

  2. 2

    Find the HTML widget

    In the left panel, search for "HTML" — the widget icon looks like </>. Drag and drop it onto the desired section of your page.

  3. 3

    Paste your embed code

    In the left panel under HTML Code, paste your Embeddy iframe code.

  4. 4

    Adjust the widget dimensions (optional)

    Switch to the Advanced tab to control the width and padding. You can also edit the height attribute in your iframe code.

  5. 5

    Update and publish

    Click "Update" at the bottom of the Elementor panel, then visit your live page.

Note: If you do not see the HTML widget in Elementor, your Elementor installation may have it disabled or restricted. Go to Elementor > Settings > Advanced and ensure that HTML widgets are enabled for your role.

Iframe Embed Code Example

Here is what a complete Embeddy iframe embed looks like in a WordPress context. Copy your specific code from the Embeddy dashboard — the WIDGET_ID and PROPS_ID values will be filled in automatically.

<!-- Embeddy widget embed — paste into Custom HTML block or Text tab -->
<iframe
  src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
  width="100%"
  height="500"
  frameborder="0"
  style="border: none; border-radius: 8px;"
  loading="lazy"
  title="My Embeddy Widget"
></iframe>

You can adjust height to match your widget's content. Use width="100%" to make the embed responsive across all screen sizes.

Troubleshooting

The iframe disappears after saving

This is almost always a user role issue. WordPress strips iframes via wp_kses() for users without the unfiltered_html capability. Ensure your WordPress account has the Administrator or Editor role. Contributors and Subscribers cannot embed iframes.

The widget shows a blank area

Check that your Widget ID and Props ID in the embed URL are correct. Open the Embeddy dashboard and copy the embed code fresh. Also verify your widget is published (not in draft mode) in Embeddy.

Widget appears in the editor Preview but not on the live page

Some WordPress caching plugins (WP Rocket, W3 Total Cache, etc.) may serve a cached version of your page. Clear your cache from the caching plugin settings and reload the live page.

Widget is cut off or too small

Increase the height attribute in your iframe code. A common starting point is height="600". The widget content does not auto-resize by default; set a height large enough to display your widget without scrollbars.

I see the raw HTML code instead of the widget

In the Classic Editor, make sure you pasted the code in the Text tab, not the Visual tab. In Gutenberg, verify you added a Custom HTML block — not a Paragraph or Shortcode block.

Frequently Asked Questions

Does embedding an Embeddy widget slow down my WordPress site?

No. Iframes load independently of your main page. The widget loads from Embeddy's servers in a separate browser thread and does not block your page's rendering. Using loading="lazy" in the iframe tag further defers loading until the widget is visible in the viewport.

Can I embed the same widget on multiple pages?

Yes — paste the same embed code on as many pages as you like. Each instance is independent. If you update the widget in the Embeddy dashboard, all embedded instances update automatically.

Will the widget work on WordPress.com (vs self-hosted WordPress.org)?

WordPress.com free and Personal plans do not allow custom HTML or iframe embeds. You need at least the Business plan on WordPress.com to use custom HTML blocks. If you have a self-hosted WordPress.org site, iframes work on all plans as long as you have the correct user role.

Ready to build your widget?

Create a free Embeddy widget — no code required. Get your embed code in minutes and drop it into your WordPress site.

Create your free widget at embeddy.ai