Custom code embed

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

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

The Code Embed element gives you the power to add custom blocks of code to your sites. 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. 

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.

Note: The Code Embed element only supports HTML, CSS in <style> tags, and JS in <script> tags. You can’t integrate server-side languages (e.g., Perl, PHP, Python, Ruby) in a Code Embed element. 

In this lesson, you’ll learn:

  1. How to add a Code Embed element
  2. How to edit the Code Embed element
  3. How to set dimensions on the Code Embed element
  4. How to preview the embedded content
  5. FAQ and troubleshooting tips
Important: Custom code is an advanced modification that may conflict with Webflow’s underlying functionality. As such, Webflow cannot guarantee the functionality or full compatibility of any custom code. Additionally, our support team is unable to provide direct help with custom code setup or troubleshooting, as these topics fall outside the scope of our customer support policy. If you run into issues with custom code, please let us know on the Webflow Forum, where the entire Webflow community (staff included) can provide additional help and resources.

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. 

Need to know: Custom code in a Code Embed element cannot exceed 50,000 characters. If the code you want to embed is longer, you can store it on another server and reference the script in your embed. You can also minify your custom code using a third-party tool or split the code into multiple Embed elements (provided this doesn’t break any JavaScript functions). 

How to add custom code directly 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 in the custom code you copied in step 1
  4. Save and close the modal
Important: If your custom code has opening and/or closing tags, make sure to add those to ensure your code works as expected. Additionally, don’t include <html>, <body>, or <head> tags in your custom code, or your website/layout will break.
Note: Line wrapping is enabled by default for easier code viewing and editing, but you can toggle this setting off by unchecking the Line wrapping checkbox in the code editor. You can also enable full-screen editing by clicking the “maximize” icon.
Pro tip: If you’d like to re-use the same embedded content throughout your site, you can use components to turn your Code Embed element into a reusable component. 

How 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 into the rich text element where you’d like to add your custom code
  3. Click the “plus” icon to open the insert menu and click the custom code button
  4. Paste in the custom code you copied in step 1
The custom code button highlighted within a rich text element’s in-line editing options.

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 number of 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 setting “cog” icon
  • Select the Code Embed element on the canvas and click Open code editor in the Settings panel under Code Embed settings
Good to know: If you can’t see your Code Embed element on the canvas, you can find and select it from the Navigator panel. Then, open the Settings panel and click Open code editor under Code Embed settings to edit your code. 

How to set dimensions on the Code Embed element

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

How to preview the embedded content

Custom code wrapped in <iframe></iframe> or <style></style> tags will show a preview on the canvas or within your rich text element, but some code Embeds can only be viewed on the live website. Any time a <script></script> tag is used in the code editor, you’ll see a placeholder for that element in the Designer.

Once you publish or export your site, the script and custom code inside will render where you placed it. If you need to preview the embed before going live with your site on a custom domain, you can publish your site to the .webflow.io staging subdomain. 

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

FAQ and troubleshooting tips

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

You can’t integrate server-side languages (e.g., Perl, PHP, Python, Ruby) in a Code Embed element. The Code Embed element only supports HTML, CSS in <style> tags, and JS in <script> tags.

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

Custom code in the Code Embed element can’t exceed 50,000 characters. If the code you want to embed is longer, you can store it on another server and reference the script in your embed. You can also minify your custom code using a third-party tool or split the code into multiple Code Embed elements (provided this doesn’t break any JavaScript functions). 

Help! My custom code isn’t working! 

Double-check that your code includes the appropriate opening and/or closing tags and doesn’t include <html>, <body>, or <head> tags. 

As of August 2020, newly published Webflow sites include jQuery v3.5.1. Importing other versions of jQuery with custom code may cause conflicts and unexpected behavior on your site. Scripts that affect DOM events like onClick, onHover, etc., may also cause unexpected behavior.

It’s important to keep in mind that custom code is an advanced modification that may conflict with Webflow’s underlying functionality. As such, Webflow cannot guarantee the functionality or full compatibility of any custom code. 

Our support team is unable to provide direct help with custom code setup or troubleshooting, as these topics fall outside the scope of our customer support policy. If you run into issues with custom code, please let us know on the Webflow Forum, where the entire Webflow community (staff included) can provide additional help and resources.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top