How to add custom code to Webflow
Webflow empowers designers to build custom websites without writing any code. However, custom code is helpful in adding that extra layer of polish to your website. Tiny code sprinkles can make the difference between a good and exceptional site. If you keep the custom code to the minimum and follow the best practices, then the benefits clearly outweigh the risks.
Note that using custom code in Webflow requires a paid account or a paid site plan.
What is custom code in Webflow?
Custom code can be any element, style or behavior not supported natively by the Webflow visual development environment.
Types of custom code available in Webflow include:
- HTML (HyperText Markup Language) — representing the content structure of your website, such as paragraphs, images, links, sections, etc.
- CSS (Cascading Style Sheets) — defining how the website will look, such as colors, spacing, fonts, backgrounds, layout, etc.
- JavaScript — controlling your website behavior, such as opening a pop-up window, modifying content or style responding to user action, validating a contact form, retrieving data from the server, etc.
How to add custom code in Webflow?
1. Via Project Settings
You can access Project Settings by the top-left hamburger menu. Next, navigate to the Custom Code tab.
Project Settings offer two slots for your custom code — at the end of the <head> element and at the end of the <body> element:
Custom code added to Project Settings will be added on every page of your site. It’s the most efficient way to load your code and sometimes also the most convenient.
Note that you need to publish your site to see the effects of the custom code added via Project Settings.
2. Via Page Settings
You can access the Page Settings by clicking the cog icon of a selected page. Next, scroll to the Custom Code section towards the bottom of the settings panel.
Page Settings offer the same <head> and <body> slots as the Project Settings:
Custom code added to Page Settings will affect only a single page of your website.
You need to publish your site to see the effects of the custom code added via Page Settings.
3. As HTML Embed
You can find the HTML Embed element at the bottom of the Add panel.
Using HTML Embed gives you full control at which location the custom code will be added.
You don’t need to publish your site — custom HTML and CSS added as HTML Embed will be immediately visible in the Designer! You still need to publish your site to see the effects of custom JavaScript though.
Tip: To avoid repetition, place your HTML Embed inside a Symbol and reuse it across pages.
Where to put each custom code type?
1. HTML
Using custom HTML you can integrate with a 3rd-party service, such as a map, social feed or survey.
Note that such integration sometimes requires combining a bit of HTML, CSS and JavaScript together
HTML code should be added as HTML Embed.
2. CSS
Custom CSS allows you to add styles to your website that are not officially supported by Webflow, such as a blurred transparent background, truncating multiple line text with an ellipsis, etc.
It also gives you access to advanced selectors, e.g. targeting all odd children of an element to add a zebra stripe to a table (find more info about CSS Selectors on MDN).
Finally, custom CSS can be used to fix layout issues for a specific web browser or make your website usable on a legacy one.
I like to add CSS code as HTML Embed to see the results in Designer. Ideally, it should be the first element on a page.
Note that putting CSS inside HTML Embed is technically against web standards, but web browsers are happy with it (more info).
Alternatively, If you don’t need to see the preview in Designer, you can put your CSS in the Project Settings <head> slot.
Finally, remember to always wrap your CSS code inside an <style> element:
<style>
... your CSS ...
</style>3. JavaScript
Custom JavaScript could give your website almost unlimited functionality, for example redirecting the visitor to a regional version of the site based on their location, phone number formatting and validation on a contact form, integrating with external CRM software, etc.
The default place for your custom JavaScript is at the end of the Project Settings <body> slot.
This means that your code will be placed at the bottom of each page, which allows it to refer to & affect any element on the page. In addition to that, JavaScript will be executed last, which avoids slowing down the loading of your site.
Sometimes you might want your JavaScript to be executed before the page is displayed, e.g. initializing analytics. In such cases, put the code in the Project Settings <head> slot.
Finally, remember to always wrap your JavaScript code inside an <script> element:
<script>
... your JavaScript ...
</script>Thanks for reading, I hope you enjoyed it! For more Webflow coding tips for designers, please follow Webflow Sprinkles publication.
