How to Embed a Widget on Weebly

Weebly is a popular drag-and-drop website builder owned by Square, used by millions of small businesses and personal sites. This guide shows you how to embed an Embeddy widget on your Weebly site using the built-in Embed Code element and the header/footer code injection option.

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>

Weebly editor access. You need to be the site owner or have editor permissions for the Weebly site where you want to embed the widget.

Embed Code Element

The Embed Code element is Weebly's built-in way to add custom HTML, JavaScript, and iframes directly to any page. It is the recommended method for embedding an Embeddy widget because it places the widget exactly where you want it in your page layout.

1
Open the Weebly editor
Log in to your Weebly account and click Edit Site to open the drag-and-drop editor for your website.
2
Navigate to the target page
Use the Pages tab in the top menu to select the page where you want the widget to appear.
3
Drag the Embed Code element onto your page
In the Build panel on the left, scroll down to find the Embed Code element (it may also appear under Basic elements). Drag it onto the page where you want the widget.
4
Click Edit Custom HTML
Once the element is on the page, click on it. A box will appear with a prompt to "Click to set custom HTML" or "Edit Custom HTML". Click it to open the HTML editor.
5
Paste your Embeddy iframe code
Paste your full iframe embed code into the HTML editor box. Click outside the element or press Enter to confirm.
6
Publish your site
Click Publish in the top-right corner to push the changes live. Visit your site to confirm the widget loads.

Tip: The Embed Code element will show a gray placeholder box in the editor. This is normal — the actual widget will render when you preview or publish the page. Click Preview in the top menu to see how the widget looks before publishing.

Important: Free plan limitations

Weebly free plans support the Embed Code element. However, some advanced embed features and custom code injection in the header/footer may require a paid plan. If you encounter restrictions, consider upgrading your Weebly plan.

Header/Footer Code Injection

If you want the widget to appear on every page of your Weebly site, or if you need to add scripts globally, you can use Weebly's header or footer code injection. This method is best for site-wide widgets like chatbots or notification bars.

1
Go to Settings
In the Weebly editor, click Settings in the top menu bar.
2
Open SEO settings
Click on the SEO tab. You will see a Header Code and Footer Code section.
3
Paste your embed code in the Footer Code box
Paste your Embeddy iframe code into the Footer Code text area. Using the footer is recommended so it does not block page rendering.
4
Save and publish
Click Save, then Publish your site. The widget will now appear on all pages.

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

Iframe Embed Code Example

Here is what a complete Embeddy iframe embed looks like for Weebly. 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 Weebly Embed Code element -->
<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 widget shows a gray box in the editor

This is expected behavior. Weebly's Embed Code element displays a placeholder in the editor. Click Preview or publish the site to see the widget render properly.

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 Embed Code element is missing from the Build panel

Make sure you are looking under the correct element category. In some Weebly themes, the Embed Code element is listed under Basic elements. If you still cannot find it, try searching for "embed" in the element panel or check if your Weebly plan supports it.

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.

Frequently Asked Questions

Does embedding an Embeddy widget slow down my Weebly 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 place multiple widgets on the same Weebly page?

Yes. Drag multiple Embed Code elements onto the page and paste a different (or the same) embed code into each one. Each widget instance is fully independent.

Will my widget appear on the Weebly mobile view?

Yes, as long as you use width="100%" in your iframe. The embed will scale to fit the mobile viewport. Preview the mobile version in the Weebly editor to confirm the layout looks good.

Ready to build your widget?

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

Create your free widget at embeddy.ai

On this page