Custom code in the head and body tags

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Custom code in the head and body tags

If you have a paid Webflow account or if your project has an active site plan, you can add custom code and scripts that are applied to your entire site or to individual pages in your site. This can be useful for adding additional HTML, CSS, and Javascript.

Supported code

The code sections only support HTMLCSS, and JS. You can't integrate server-side languages (such as Perl, PHP, Python, or Ruby) in any code section.

Tags

If the embeddable code has opening and/or closing tags, make sure to add them to make the code work.

Link tag: <link>

The <link> tag defines a link between a document and an external resource and always goes in the <head> element.

Meta tag: <meta>

The <meta> tag provides metadata about your site and always goes in the <head> code section.

Style tags: <style> </style>

The <style> tag defines CSS styles in your site and always goes in the <head> code.

Script tags: <script> </script>

The <script> tag allows you to embed Javascript in your site and can go in the <head> or </body>. However, adding your <script> tags just before the closing </body> tag (footer code) will ensure that your webpages load all content before the JavaScript is processed. This helps with page load speed and provides a better user experience. Custom scripts will only appear on the published site. 

Starting on March 1st, 2018, newly published Webflow sites include the latest version of jQuery (v3.3.1). Previously, Webflow sites were published using jQuery v2.2.0.

Resource: Embedding javascripts [↗]

Important! 
Adding <html>, <body>, or <head> tags in the embed will break your website/layout.

Why can't I add long code?

Custom code in each section cannot be longer than 10,000 characters. If the code you want to place on your site is longer, you can store it on another server and then embed it as a script file.

Custom code in your project settings

Head code

Code that is entered in the Head tag is applied to your entire site and is a way to link external resources, add meta data, and use custom styles in your document. In Project settingscustom code, enter your code in the head code section, and save the changes.

‍Insert code before the closing head tag of your Webflow project

Resource: HTML Head element [↗]

Footer code </body>

Code that is entered in the Body tag is applied to your entire site and is a way to add things like scripts to your site. In Project settings→ custom code, enter your code in the footer code section, and save the changes.

Insert code before the closing body tag of your Webflow project
Custom scripts will only appear on the published site.

Custom code in your Page settings

The code included in the custom code section of any page will only apply to that page, and will appear after any site-wide custom code.

Inside < head > tag

From inside the Designer, open a Page's settings, enter your code in the head code section, and save the settings. See which tags go in the <head> tag.

‍Insert code inside the < head > tag of a page

Before < / body > tag

From inside the Designer, open a Page's settings, enter your code in the body code section, and save the settings. Usually <scripts> go in this section.

‍Insert code before the < / body > tag of a page
Custom scripts will only appear on the published site.

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form