Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Add custom code and scripts that apply to your entire site or individual pages.
If you have a paid Webflow account or if your project has an active site plan, you can add custom code and scripts that apply to your entire site or individual pages. This can be useful for adding additional HTML, CSS, and JavaScript.
In this lesson:
The code sections only support HTML, CSS, and JS. You can't integrate server-side languages (such as Perl, PHP, Python, or Ruby) in any code section.
If the embeddable code has opening and/or closing tags, make sure to add them to make the code work.
The <link> tag defines a link between a document and an external resource and always goes in the <head> element.</head>
The <meta> tag provides metadata about your site and always goes in the <head> code</head> section.
The <style> tag</style> defines CSS styles in your site and always goes in the <head> code</head>.
The <script> tag</script> allows you to embed Javascript in your site and can go in the <head> or </head>. However, adding your <script></script> tags just before the closing 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.
Important: As of 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.</head></body></html>
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.
Important: Adding external <script> tags to the <head> of your project can slow page loads. Consider adding the "async" or "defer" attribute in the <script> tag to improve performance.</script>
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 settings >Custom code, enter your code in the Head code section, and Save changes.
Resource: HTML Head element [↗]
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 changes.
Custom scripts will only appear on the published site.
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.
From inside the Designer, open Page settings, enter your code in the Head code section, and Save the settings. See which tags go in the <head> tag</head>.
From inside the Designer, open Page settings, enter your code in the Body code section, and Save the settings. Usually <scripts></scripts> go in this section.
Custom scripts will only appear on the published site.
Got a lesson suggestion? Let us know
Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback
