Custom code embed

Add custom blocks of code to your site using the Code Embed element to unlock all kinds of custom functionality.

The Code Embed element gives you the power to add custom blocks of code to your site. If you have a Core, Growth, Agency, or Freelancer Workspace, or if your site has an active Site plan, you can use the Code Embed element to unlock all kinds of custom functionality. It supports HTML, CSS in <style> tags, and JS in <script> tags, though it can't run server-side languages like Perl, PHP, Python, or Ruby.

You can embed third-party elements such as Google Docs and Sheets, social media feeds, live chat apps, forms and surveys, and much more. You can also use CMS Collection fields to dynamically update embedded code.

How to add a Code Embed element

You can embed third-party code or your own custom code anywhere in your design or in a rich text element. Custom code in a Code Embed element can't exceed 50,000 characters. If your code is longer, store it on another server and reference the script in your embed, minify it with a third-party tool, or split it across multiple Code Embed elements, as long as that doesn't break any JavaScript functions.

How to add custom code directly to your design

To add custom code to your design:

1. Copy the code you'd like to embed to your clipboard
2. Open the Add panel and add a Code Embed element to the Webflow canvas
3. Paste your custom code
4. Save and close the modal

Line wrapping is on by default so your code's easier to view and edit, but you can turn it off by unchecking Line wrapping in the code editor. You can also switch to full-screen editing by clicking the maximize icon.

If you'd like to reuse the same embedded content across your site, turn your Code Embed element into a component.

How to add custom code to a rich text element

To add custom code to a rich text element:

1. Copy the code you'd like to embed to your clipboard
2. Place your cursor in the rich text element where you'd like to add your custom code
3. Click the plus icon to open the insert menu, then click the custom code button
4. Paste in the custom code you copied in step one

How to use dynamic content within your custom code

You can incorporate Collection fields into embedded code to dynamically pull information for various uses.

Learn more: Dynamic embeds

How to edit the Code Embed element

There are a few ways to open the code editor and edit the code in a Code Embed element. You can:

• Select the Code Embed element on the canvas and double-click
• Select the Code Embed element on the canvas and press Enter
• Select the Code Embed element on the canvas and click the settings icon
• Select the Code Embed element on the canvas and click Open code editor in the Settings panel under Code Embed settings

If you can't find the element on the canvas, select it from the Navigator panel instead, then open the Settings panel and click Open code editor

How to set dimensions on the Code Embed element

If your custom code doesn't explicitly set sizing or dimensions, its content can take up the full width of its parent element. You may be able to append height="100%" width="100%" to your custom code, which lets you adjust the width and height of the embed and its content from the Style panel.

How to preview the embedded content

Custom code wrapped in <iframe> or <style> tags shows a preview on the canvas or in your rich text element, though some embeds only show up on your live website. Any time you use a <script> tag in the code editor, you'll see a placeholder for that element in the Designer. Once you preview, publish, or export your site, the script and custom code inside will render where you placed it, though its effects won't go live until you publish. Custom code also won't run in expand canvas view.

Learn more: Use .webflow.io as a staging domain for testing and feedback

Code editor features

The code editor includes the following features:

• Find and replace — press Command + F (on Mac) or Control + F (on Windows), or click the search button to open the search bar. You can search your code, toggle Match case and Match by word, use regular expressions, and replace individual or all matches.
• Autocomplete — the editor suggests HTML tags, styles, and variables as you type, and auto-closes brackets and tags.
• Prettify — click the Prettify button to auto-format your code. Prettify also validates HTML, CSS, and JS and flags syntax errors before publishing.
• Character limit warning — a warning appears as you approach the character limit.
• Save warning — if you close the editor with unsaved changes, a dialog prompts you to save or discard them.
• Support for Emmet abbreviations

FAQ and troubleshooting tips

Can I use server-side languages in a Code Embed element?

No. The Code Embed element only supports HTML, CSS in <style> tags, and JS in <script> tags. You can't integrate server-side languages, like Perl, PHP, Python, or Ruby.

Can I increase the 50,000 character limit for the Code Embed element?

No, but you can store longer code on another server and reference the script in your embed, minify it with a third-party tool, or split it across multiple Code Embed elements, as long as that doesn't break any JavaScript functions.

My custom code isn't working. What should I check?

Double-check that your code includes the appropriate opening and closing tags, and that it doesn't include <html>, <body>, or <head> tags. As of August 2020, newly published Webflow sites include jQuery v3.5.1, so importing other versions of jQuery in custom code may cause conflicts and unexpected behavior. Scripts that affect DOM events like onClick or onHover can also cause unexpected behavior.

Keep in mind that custom code is an advanced modification that may conflict with Webflow's underlying functionality, and our support team can't provide direct help with custom code setup or troubleshooting, since it falls outside our customer support policy. If you run into issues, post in the Webflow Community, where the entire Webflow community, staff included, can help.