How to Embed a Widget on Webnode

Webnode is a European website builder known for its multilingual support and ease of use, serving millions of users worldwide. This guide shows you how to embed an Embeddy widget on your Webnode site using the HTML widget and the header/footer code injection feature.

Beginner~5 min readUpdated 2026

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>

A Webnode Standard plan (or higher). The HTML widget feature requires at least a Standard plan on Webnode. Free and Limited plans do not support custom HTML code embedding.

Important: Plan requirement

Webnode's free and Limited plans do not include the HTML widget or custom code features. You need at least a Standard plan to embed custom HTML. If the HTML widget is not available in your editor, check your plan level.

HTML Widget

Webnode's HTML widget lets you add raw HTML code directly to any page. This is the recommended method for placing an Embeddy widget in a specific location on your site.

1
Open the Webnode editor
Log in to your Webnode account and click Edit Website to open the site editor.
2
Navigate to the target page
Use the Pages panel to navigate to the page where you want the widget to appear.
3
Add content and select HTML
Click the + button in the area where you want to add the widget. From the content options, select HTML code (it may also appear as Embed HTML or under the More section).
4
Paste your Embeddy iframe code
A code editor will appear. Paste your full iframe embed code from the Embeddy dashboard into the editor.
5
Confirm and publish
Click OK or Save to confirm the code. Then click Publish in the top-right corner to push the changes live.

Tip: Webnode may show a placeholder or a simplified preview of your embed in the editor. To see the full widget rendering, use the Preview button or visit the published site.

Note: Webnode supports adding the HTML widget to multiple locations on the same page. Simply repeat the process to embed widgets in different sections.

Header/Footer Code Injection

For site-wide embeds, Webnode provides a way to inject custom code into the header or footer of your site. This is ideal for global widgets like chatbots or analytics scripts.

1
Open Settings
In the Webnode editor, click Settings (gear icon) in the top menu or sidebar.
2
Find the HTML code section
Navigate to Website Settings and look for the HTML code or Custom Code option. This may be under an Advanced or SEO & Analytics section depending on your Webnode version.
3
Paste your embed code
Paste your Embeddy iframe code into the footer code area. Using the footer is recommended for performance.
4
Save and publish
Click Save, then Publish. The widget will appear on all pages of your site.

Warning: Code added to the header or footer affects every page on your Webnode site. If you only want the widget on a specific page, use the HTML widget method above.

Iframe Embed Code Example

Here is what a complete Embeddy iframe embed looks like for Webnode. 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 Webnode 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 option is not available

The HTML widget requires at least a Webnode Standard plan. Free and Limited plans do not include this feature. Upgrade your plan to unlock custom HTML embedding.

The widget shows a blank area on the live site

Verify 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 embed does not render in the Webnode editor

Webnode's editor may show a placeholder for embedded HTML. This is normal. Click Preview or publish the site to see the widget rendered on 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". Webnode layouts are responsive, so the width should adapt automatically with width="100%".

Frequently Asked Questions

Does embedding an Embeddy widget slow down my Webnode 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 the free Webnode plan?

No. The HTML widget and custom code features require a paid Webnode plan (Standard or higher). Free and Limited plans are restricted to Webnode's built-in content blocks without custom HTML support.

Will the widget be responsive on mobile?

Yes. Webnode generates mobile-responsive layouts by default. Using width="100%" in your iframe ensures the widget scales to fit the mobile viewport. Preview the mobile version of your site to confirm.

Ready to build your widget?

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

Create your free widget at embeddy.ai

On this page