How to Embed a Widget on Duda
Duda is a professional website builder designed for agencies and SaaS platforms, known for its team collaboration features and white-label capabilities. This guide shows you how to embed an Embeddy widget on your Duda site using the HTML widget and site-wide code injection.
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>
- Duda editor access. You need admin or editor permissions for the Duda site. The HTML widget is available on all Duda plans.
HTML Widget
Duda's HTML widget lets you add raw HTML, CSS, and JavaScript directly to any section of your page. This is the recommended method for embedding an Embeddy widget because it gives you full control over placement and sizing.
- 1
Open your Duda site editor
Log in to your Duda dashboard, select your site, and click Edit Site to open the drag-and-drop editor.
- 2
Navigate to the target page
Use the Pages panel on the left to select the page where you want the widget to appear.
- 3
Open the Widgets panel
Click Widgets in the left sidebar. Scroll down or search for the HTML widget (it appears under the Advanced or Basic category depending on your Duda version).
- 4
Drag the HTML widget onto the page
Drag the HTML widget from the panel and drop it into the section where you want your Embeddy widget.
- 5
Paste your embed code
Click on the HTML widget you just placed. A code editor will open. Paste your Embeddy iframe embed code into the editor and click Done or Apply.
- 6
Publish your site
Click Publish in the top-right corner. Visit the live site to confirm the widget loads correctly.
Tip: Duda renders the HTML widget live in the editor, so you should see your Embeddy widget appear immediately after pasting the code. If it shows a blank area, try refreshing the editor or clicking outside the widget to trigger a re-render.
Important: Team member permissions
If you are working on a Duda site as a team member, you need the appropriate permissions to use the HTML widget. Site admins can configure widget access under Team > Permissions. Contact your site admin if the HTML widget is restricted.
Site-Wide HTML Injection
If you want the widget to appear on every page, or need to inject global scripts, Duda offers site-wide HTML/CSS/JS injection through the site settings. This is ideal for chatbot widgets or notification bars that should appear everywhere.
- 1
Open Site Settings
In the Duda editor, click the Site Settings icon (gear icon) in the left sidebar.
- 2
Navigate to Head HTML
Go to Site Settings > Head HTML (or Custom HTML depending on your Duda version).
- 3
Paste your embed code
Paste your Embeddy iframe code in the Body End section (recommended for performance) and click Save.
- 4
Publish and verify
Publish the site and check multiple pages to confirm the widget appears everywhere.
Warning: Site-wide code injection affects every page. If you only want the widget on a specific page, use the HTML widget method described above instead.
Iframe Embed Code Example
Here is what a complete Embeddy iframe embed looks like for Duda. 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 Duda HTML widget --> <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 HTML widget shows a blank area in the editor
Try refreshing the Duda editor page. Some browsers block iframe rendering in design mode. If the widget still does not appear, publish the site and check the live page — the embed may work on the published site even when it does not preview in the editor.
The widget shows a blank area on the live site
Verify that your Widget ID and Props ID are correct. Open the Embeddy dashboard and copy the embed code fresh. Also confirm your widget is published (not in draft mode) in Embeddy.
The HTML widget is not available in the Widgets panel
Check that you have the correct permissions. In agency or team setups, the site admin may have restricted certain widgets. Contact your Duda account admin to enable the HTML widget for your role.
Widget is cut off or does not resize properly
Increase the height attribute in your iframe code. You can also adjust the row or column height in the Duda editor to give the widget more vertical space.
Frequently Asked Questions
Does embedding an Embeddy widget slow down my Duda 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 use the HTML widget on all Duda plans?
Yes. The HTML widget is available on all Duda plans, including the Basic plan. There are no plan restrictions on embedding custom HTML or iframes.
Will the widget appear on both desktop and mobile views?
Yes. Duda automatically generates a mobile view of your site. The iframe with width="100%" will scale to fit the mobile layout. You can also customize the mobile view separately in Duda's editor to adjust the widget placement.
Ready to build your widget?
Create a free Embeddy widget — no code required. Get your embed code in minutes and drop it into your Duda site.
Create your free widget at embeddy.ai