How to embed an iframe in Webflow

Steps

1. 1

   Step 1: Copy the iframe code

   Get the embed code from the site that you want to show.

2. 2

   Step 2: Open the Add panel and add a Code Embed element

   Put it on the canvas where the frame must show. To put it inside text, click the plus icon in a rich text element, then the custom code button.

3. 3

   Step 3: Paste the code, then save and close the modal

   Do not include html, head, or body tags. They break the layout of the page.

4. 4

   Step 4: Set the size in the Style panel

   If the code does not set a size, add width="100%" height="100%" to the iframe tag. Then you can set the width and height of the embed in the Style panel.

5. 5

   Step 5: Publish the site and check the frame

   Some embeds show only on the live site. Open the published page to make sure the frame loads.

Limits

• Code Embed needs a Core, Growth, Agency, or Freelancer Workspace, or an active Site plan on the site.

• Each Code Embed element holds 50,000 characters or less, and Webflow cannot increase that limit.

• Some embeds show only on the live site, and custom code does not run in expand canvas view.

• Code Embed runs HTML, CSS, and JavaScript only, not server-side languages such as PHP.

• Webflow support does not troubleshoot custom code.

Troubleshooting

The frame does not show in the Designer

Some embeds show only on the live site. Publish the site, then open the live page to check the frame.

Blank iframe, no error →

"Refused to connect" in the frame

The framed site sends X-Frame-Options or a CSP frame-ancestors rule. Only the owner of that site can change it.

"Refused to connect": cause and fix →

The frame has the wrong size

Add width="100%" height="100%" to the iframe tag, then set the size in the Style panel.

Responsive iframes →

Related