November 20, 2020

How to add custom CSS and JS code to a Webflow website

Ashok Chavada

Webflow Expert

How to add custom CSS and JS code to a Webflow website

Want to add some extra functionality to your Webflow website? Well, In this tutorial I will walk you through how you can add custom code in a Webflow website.

There are 3 ways to add custom code to your Webflow website. Let’s look at them in detail.

Before we start remember this carefully that whenever you want to add custom code for styling start your custom code with <style> and ends it with </style> and put all of your custom style code between that.

To add scripts start <script> and ends it with </script> and put all your code inside those tags.

1. Add custom code to your page:

When you want to add a custom code to your particular page then you just need to click on the page settings icon and scroll down until you see the <head>and <body> boxes.

To add JavaScript code the best practice is to add it inside <body> and to add custom CSS then best practice for it to add inside <head> tag.

2. Code Embed:

This is feature is only available for Pro Plan users. When you want to add custom codelike html table or a google map then Embed can really help you do that.

To add an embed go to your add elements you'll find it there at the bottom.

As you can see here in the below picture where I want to add a Google map iFrame to my contact page.  And to do that I am just pasting a code inside my embed container.

3. Custom Code from Settings:

This feature is available for pro plan users only. I suggest to use this feature when you want to set a global CSS or global JavaScript.

To access this features go to your project settings and look for a custom code in sub menu or tabs. When hit the custom code tab and you’ll see two<head> and <body> sections where you can put your code.

Normally developers use this feature when they want to put Facebook Pixel or any kind of third party code like Memberstack.

Check out our latest tutorial series on how to use Webflow CMS effeftively for great results here: https://www.tweakdesigns.in/blog/how-to-create-a-blog-using-webflow-cms-part-1

Thank you for reading!

TweakDesigns is a Webflow certfified partner agency. We design and build Webflow websites, templates and integrate SEO. Subscribe to our newsletter or talk to our Webflow expert today for your queries.

Subscribe for updates from TweakDesigns—fresh insight delivered to your inbox every week.

By clicking this button, you agree to our
Privacy Policy
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Related posts

SEO

7 Ways to Increase Your Webflow Website Page Speed and Performance

Boost your Webflow website page loading speed without coding knowledge! Discover seven easy tricks to make sure your audience isn't waiting too long for a response.

read more

Ashok Chavada

April 10, 2023
Web Development

Webflow Costs: How Much Does a Webflow Website Cost in 2023?

Wondering how much a Webflow website costs? Look no further! This comprehensive guide breaks down all the factors that affect the price of a Webflow site.

read more

Ashok Chavada

April 10, 2023
Web Development

Top 5 Missing Features in Webflow and Their Solutions

Are you frustrated with the limitations of Webflow? Don't worry, we've got you covered. Learn how to solve the top 5 missing features in Webflow with this guide.

read more

Ashok Chavada

March 29, 2023
webflow professiona partner or freelancer expert badge