How to Embed a Widget with Elementor
Elementor's HTML widget makes it easy to embed any iframe or custom HTML directly on your WordPress pages. Because the HTML widget can contain arbitrary code, Elementor restricts it to administrators by default. This guide covers how to check and configure permissions, add the HTML widget, and embed your Embeddy widget in a few clicks.
1. Prerequisites
- •An active Embeddy account with at least one published widget.
- •A WordPress site with Elementor (free) or Elementor Pro installed and activated.
- •A WordPress user account with Administrator role, or a role that has been granted HTML widget access via Elementor's Role Manager.
- •Your Embeddy iframe embed code — copy it from your widget's Embed tab in the dashboard.
Your embed code looks like this:
<iframe src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID" width="100%" height="500" frameborder="0"> </iframe>
Before you start: Save a backup of your page. If you are adding custom code to a live page for the first time, create a backup or duplicate the page as a safety measure. Elementor flags syntax errors inline but a backup protects you from unexpected layout changes.
2. Admin Permissions
Elementor restricts the HTML widget to administrators only by default. This security measure prevents malicious code from being injected by lower-privilege users (Editors, Authors, Contributors). If you are logged in as an Administrator, the widget is already available to you and you can skip to Section 4.
HTML widget is admin-only by default
If you are logged in as an Editor or Author and cannot find the HTML widget in Elementor's widget library, you do not have permission. Ask your WordPress Administrator to either promote your role or grant access via Role Manager (see Section 3).
How to check if the HTML widget is available to you
- 1.Open any page in the Elementor editor.
- 2.In the widget search bar (left panel), type "HTML".
- 3.If you see an HTML widget with a
</>icon, you have access. If it does not appear, your role does not have permission.
3. Role Manager — Grant Access to Other Roles
If you need to allow Editors or other non-admin users to use the HTML widget, a WordPress Administrator can grant permission via Elementor's Role Manager.
Security consideration: Granting HTML widget access to lower-privilege roles means those users can inject arbitrary JavaScript into your pages. Only grant access to users you fully trust.
- 1
Open Elementor settings
In your WordPress Admin dashboard, go to Elementor > Role Manager.
- 2
Find the role you want to grant access to
You will see a table of WordPress roles (Editor, Author, Contributor, etc.) with columns for each Elementor capability.
- 3
Enable "No Restrictions" or allow HTML widget
For the target role, set the Elementor access level to No Restrictions (which enables all widgets including HTML), or use the granular widget controls if available in your Elementor version.
- 4
Save changes
Click Save Changes. The affected user(s) will now see the HTML widget in their Elementor widget library.
4. Adding the HTML Widget
The HTML widget is identified by the </> icon in the Elementor widget library. Here is how to find and place it on your page canvas.
When you drag the HTML widget onto the canvas, a blue guide line shows the exact position where the widget will be placed. Drop it between existing sections or inside a column to place it precisely.
- 1.Open your page in the Elementor editor (Edit with Elementor in WordPress Admin).
- 2.In the widget search box at the top of the left panel, type "HTML". The HTML widget with the
</>icon will appear. - 3.Drag the HTML widget from the left panel onto the canvas. As you drag, a blue placement guide line will appear to show where it will be dropped.
- 4.Release the widget in the desired position. The widget panel will open on the left with an HTML code input area.
5. Step-by-Step Embed
- 1
Get your embed code from Embeddy
Log in to your Embeddy dashboard, open your widget, click the Embed tab, and copy the iframe code.
- 2
Open your page in Elementor
In WordPress Admin, go to Pages (or Posts), hover over the page you want to edit, and click Edit with Elementor.
- 3
Drag the HTML widget onto the canvas
Search for "HTML" in the widget library. Drag the HTML widget (
</>icon) to the position on the canvas where your widget should appear. The blue guide line confirms placement. - 4
Paste your Embeddy iframe code
In the left panel under Content > HTML Code, paste your Embeddy embed code. Elementor will flag any syntax errors inline with a red highlight.
<iframe src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID" width="100%" height="500" frameborder="0"> </iframe>
- 5
Preview in the editor
The Elementor canvas will render a live preview of the widget. Verify it looks correct. If the widget appears cut off, select the HTML widget's column and adjust its width or the widget's height in your iframe attributes.
- 6
Save and publish
Click Update (for an existing page) or Publish (for a new page) in the bottom-left of the Elementor editor. Visit the live URL to confirm the widget renders for visitors.
Elementor AI tip: In the HTML widget's Advanced tab, you will find a Code with AI option. You can use this to generate wrapper CSS or a responsive container for your iframe if needed — though for a standard Embeddy embed, the default iframe code is sufficient.
6. Troubleshooting
HTML widget not visible in the widget library
Your user role does not have permission to use the HTML widget. Ask your WordPress Administrator to grant access via Elementor > Role Manager (see Section 3), or ask them to add the widget for you.
Widget shows a blank space in the editor but works on the live page
Some browsers block iframe content inside the Elementor editor due to cross-origin policies. This is normal. Click Preview Changes or visit the live published URL to see the widget rendered correctly.
Elementor flags a syntax error on my code
The HTML widget highlights syntax errors with a red underline. Check that you copied the complete iframe tag without accidental truncation. Ensure the opening <iframe and closing </iframe> tags are both present.
Multiple code snippets on the same page are conflicting
If you have multiple HTML widgets or third-party scripts on the same page, they may conflict. Isolate the Embeddy iframe in its own HTML widget. Check the browser console for JavaScript errors to identify the conflicting script.
Widget is too narrow or the column is too small
Select the Elementor column containing the HTML widget and adjust its width. You may also change the iframe width attribute or use a full-width section to give the widget more space.
Page layout broke after adding the HTML widget
If you saved a backup (recommended in Section 1), restore it. Otherwise, click the Elementor History panel (clock icon at the bottom of the left panel) to undo recent changes.
7. FAQ
Can I use the HTML widget with Elementor Free (not Pro)?
Yes. The HTML widget is available in both Elementor Free and Elementor Pro. There is no Pro requirement to embed an iframe.
Can I embed multiple Embeddy widgets on the same Elementor page?
Yes. Add a separate HTML widget for each embed code. Place each one in its own Elementor column or section to avoid layout conflicts.
Will the widget affect my page's loading speed?
Iframes load asynchronously and do not block the rest of the page from rendering. Embeddy widgets are served from a fast CDN. For best performance, place the widget below the fold so it loads after the main page content.
Can I use the HTML widget on Elementor popup templates?
Yes (Elementor Pro required for popups). Add the HTML widget to your popup template and paste the Embeddy iframe code as you would on a regular page.
Is it safe to grant HTML widget access to Editors?
Elementor restricts the HTML widget to admins by default precisely because it allows arbitrary code execution. Only grant access to users you fully trust — someone with HTML widget access can inject JavaScript that runs for all visitors.
Why does Elementor recommend backing up before adding custom code?
Custom HTML and scripts can interact unexpectedly with your theme, other plugins, or existing page structure. A backup lets you restore the page to its previous state if something goes wrong. Most WordPress hosts offer one-click backups, or you can use a plugin like UpdraftPlus.
Ready to embed on Elementor?
Build your interactive widget in Embeddy's no-code editor, copy the iframe code, and drop it into the Elementor HTML widget — it takes less than five minutes.
Start for Free