How to Embed a Widget on Webflow

1. Prerequisites

Before you start, make sure you have the following ready:

• An Embeddy widget: Log in to embeddy.ai/dashboard and open your widget. Under the Embed tab, copy your iframe embed code.
• A Webflow account with Designer access: Code Embed elements are available on all Webflow site plans. You will need access to the Webflow Designer for your project.
• A basic understanding of the Webflow Designer: You should be comfortable navigating the canvas and the Add panel. If you are new to Webflow, review their Webflow University intro before proceeding.

2. Adding the Code Embed Element

The Code Embed element is a first-class Webflow component. It renders live on the canvas, so you can see exactly how your Embeddy widget looks as you position and size it — before you even publish.

A standard Embeddy iframe embed code is only a few hundred characters, so the 50,000 character limit will never be an issue. If you are embedding very large inline scripts, see the Troubleshooting section for the workaround.

1. 1

   Copy your Embeddy embed code

   In your Embeddy dashboard, open the widget you want to embed. Click the Embed tab and copy the full iframe code:

   <iframe
     src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
     width="100%"
     height="500"
     frameborder="0"
   ></iframe>

2. 2

   Open the Webflow Designer and navigate to your page

   Open the Designer for your Webflow project. In the Pages panel (top-left), select the page where you want to add the widget.

3. 3

   Open the Add panel and find the Code Embed element

   Click the + icon in the left toolbar (or press A) to open the Add panel. Search for "Embed" in the search bar, or scroll to the Components section and look for Code Embed.

4. 4

   Drag the Code Embed element onto the canvas

   Drag the Code Embed element from the Add panel onto the section of your page where you want the widget to appear. Drop it inside a Section, Div, or Container for best layout control.

   Tip: If you cannot see the element on the canvas after dragging, check the Navigator panel (left sidebar, layers icon) to find and select it. Embed elements with no code may not be visually obvious on the canvas until you add content.

5. 5

   Open the code editor

   With the Code Embed element selected, look for the Settings panel in the right sidebar (gear icon). Click "Open code editor". Alternatively, you can double-click the element on the canvas to open the code editor directly.

6. 6

   Paste your embed code and save

   Paste your Embeddy iframe code into the code editor. The editor will validate your HTML and show a preview. Click Save & Close to apply the code. The widget will render live on the canvas immediately.

3. Responsive Layout Tips

One of Webflow's biggest advantages is its responsive design system. You can adjust how your Embeddy widget looks at every breakpoint — desktop, tablet, landscape mobile, and portrait mobile — without writing any media queries.

Set the embed width to 100%

For the widget to fill its container at all screen sizes, set the Code Embed element's width to 100% in the Style panel. The iframe inside the embed code already has width="100%", so both the container and the iframe should be 100% wide.

<!-- Responsive Embeddy widget for Webflow -->
<iframe
  src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
  width="100%"
  height="500"
  frameborder="0"
  style="display: block;"
></iframe>

Adjust height per breakpoint

The height attribute on the iframe sets the initial height, but you can override it at each breakpoint using Webflow's Style panel:

1. Select the Code Embed element on the canvas.
2. In the Style panel, switch to the breakpoint you want to target (e.g., mobile portrait).
3. Set a fixed or min-height value appropriate for that screen size.
4. Repeat for each breakpoint as needed.

JS SDK embed option

If you need auto-resizing behavior (the widget height adjusts automatically to its content), you can use the Embeddy JavaScript SDK instead of a plain iframe. Paste the following into your Code Embed element:

<div id="embeddy-widget"></div>
<script src="https://embeddy.ai/sdk/embed.js"></script>
<script>
  Embeddy.render({
    container: '#embeddy-widget',
    widgetId: 'YOUR_WIDGET_ID',
    width: '100%',
    height: 500,
    autoResize: true,
  });
</script>

See the API Reference for all SDK options and events.

4. Publishing

Webflow has two states for your site: the Designer canvas (which you edit) and the published site (what visitors see). Code Embed elements render on the canvas itself, so you can verify your widget looks correct before publishing.

Publishing your changes

1. After adding your Code Embed and confirming it looks correct on the canvas, click the Publish button in the top-right corner of the Designer.
2. In the publish dialog, select the domain(s) you want to publish to (e.g., your custom domain or the free .webflow.io subdomain).
3. Click Publish to Selected Domains.
4. Once publishing is complete, visit your live site to verify the widget loads and functions correctly.

Automatic widget updates

Once embedded, your Embeddy widget updates automatically. If you change the widget's content, design, or settings in the Embeddy dashboard, all embedded instances on your Webflow site reflect those changes immediately — no need to re-publish your Webflow site or edit the Code Embed element.

5. Troubleshooting

6. FAQ