How do I add a code embed in Webflow?

Put the embed where the widget should appear

Head and footer code applies outside the layout, on one page or on the whole site. A code embed is an element you place in the design: in one column, one section, or inside rich text. Use it when a scheduling widget, a sheet, or a social feed should sit in that spot.

You need an active Site plan, or a Core, Growth, Agency, or Freelancer Workspace. Open the Add panel, add a Code embed, paste the snippet, and click Save and close.

Example: the contact page should show a scheduling widget under the address, and the homepage should not load it. Drop the embed in that contact section only. Do not also paste the same snippet into site footer code, or the widget can load twice.

To reuse one embed on several pages, turn that element into a component and place the component where you need it.

Paste a complete snippet, not a page skeleton

The embed accepts HTML, CSS inside a style tag, and JavaScript inside a script tag. It does not run server-side languages such as PHP, Python, Ruby, or Perl. Include the opening and closing tags the snippet needs. Do not include html, head, or body tags. The page already has those, and adding them again can break the layout.

The limit is 50,000 characters. If the snippet is longer, host it elsewhere and reference that script, minify it, or split it across embeds only when the split does not break the script. The editor warns you as you near the limit. Line wrapping is on by default. Prettify formats the snippet and flags syntax errors before you publish.

Newly published Webflow sites include jQuery 3.5.1. Loading another jQuery in the embed can conflict with the page. Leave the built-in copy in place.

You can also add an embed inside a rich text element. Put the cursor on a new line, open the plus menu, and choose custom code. That is the path for one blog post that needs a chart or a player the video element does not host. Webflow's code embed article says you can incorporate Collection fields into the embed so the snippet can change with the item.

Open the editor again and set the width

To edit, select the embed and double-click it, press Enter, or click Open code editor under Code embed settings. If you cannot see it on the canvas, select it in the Navigator first.

If the snippet does not set its own size, the content can take the full width of the parent. Put the embed in a div when the widget should be narrower than the section, and set that div's width. A map or a form that ignores the column is usually missing a width on the parent, or the pasted code forces its own width.

Closing the editor with unsaved changes asks you to save or discard. Save before you publish.

Treat the Designer placeholder as unfinished

A script tag shows a placeholder in the Designer. Some embeds appear in preview. The live site does not run the snippet until you publish. Expand canvas view does not run custom code.

Webflow does not guarantee that custom code will work with the rest of the site, and Webflow support does not troubleshoot the snippet. Copy the previous code into a note before you replace a working embed.

Publish and use the widget on the live page

Publish the site and open that one URL. Use the widget the way a visitor would: pick a time on the scheduler, or scroll the embedded sheet. Check a phone width. If the layout breaks or a button on the page stops working, remove the new snippet, save, and publish again.

A concrete failure: the contact form sits under the embed, and the page no longer submits after the widget's script loads. Delete the embed, publish, and submit a test. If the form works again, the snippet was the conflict. Keep the widget only if the form still submits and the section still fits the screen.