It can be really confusing where to put code in Webflow and the pros and cons to where. Here I break down all of the areas and explain what’s happening, what the benefits of putting code there are and certain things you should avoid.
Brought to you by https://FlowSt8.dev – The unlimited Webflow Development Service
Hello and welcome to another episode of webflow and code where I teach you the underlying code you’re writing in webflow.
Few weeks ago, we went through the site settings inside of WebFlow, and I mentioned that we’d be doing an episode on the different areas that you can write custom code, and I thought this would be the episode where we go into each of those and define exact the pros and cons of putting code in that specific area, and examples of different code that you might include there. And reasons why we do that.
So there are 5 areas that you can include code inside a webflow.
You’ve got inside of the head. In these site settings, you’ve got before the end of the body inside of site settings. You’ve also got the same inside of the pages themselves. And then you’ve also got embed elements.
And you only get pinned and character limit, which trust me, it can fill up pretty quickly. So I do have an episode about how you store your assets externally, so you can increase that limit. But ultimately you get 10000 and webflow does not validate that code. So you have to make sure you’re writing it.
I personally like to write it inside of things like code sandbox or code pen, because I get formatting, I get highlighting, I get I can actually error check my code. Before then copying it into webflow. And once again, I do a perfect demonstration of this in my 3 JS series. So I’ll link all of those videos below, if you kinda wanna dip in and out of those.
So with that being said, let’s take a look at the site settings and and go through the different coding areas. As with both of the head and footer code here, these are site wide, so they get imported on every single page. You need bits of code that run on each individual page, or you need access to functions, and that’s quite important to know as well. If you write a function, if you define a variable or do something like that, you have access to it. In other areas of the page, so it could be once again doing a check or something like that, where you And then you set that and then you can access globally throughout the rest of the site.
So this the head area is a great time to write code to load libraries, to have things ready before the HTML is loaded. So in this instance, we’ve got Google Tag Manager, which they obviously suggest you put in the head. But also there’s lines of code here like information which doesn’t actually work inside of the body.
Another thing I like to do inside of the head is actually make checks on, say, the browser that you’re using maybe it’s the compatibility of that browser and things like that such as if it supports the file format Avif. Then I can write a bit of code that does a quick check on the file, whether it supports Avif, file format, or AVIF, I never know what it is. And then provide a class to the head or the HTML element that then might style or otherwise affect the HTML that’s about to be loaded. So you can do a lot of pre checking in this area.
So the head is great for setting things up having things ready for when the HTML finally loads on the page. Something I did mention is that, yes, it’s a good place to set things up, but you’ve also got to remember that that code has to finish executing before it goes to the next line of code.
So you don’t just wanna put tons and tons of code in the head because that would prevent the rest of the page loading. So really think about deferring or waiting until the page is loaded so that the user can interact with it. Before doing certain actions. I’ll leave that up to you to decide.
So once again, we have access to jQuery, which you can see here, on this website, we’ve started using Jquery. And once again, this is when all the HTML is loaded and we can begin to manipulate that HTML. In the head, you cannot put sort of traditional HTML tags like your paragraphs and various things like that, but what you can do is put style tags, you can put meta tags, you can put script tags. Before the closing body tag or the footer code, we can start to put HTML because it’s actually within inside of the body.
So jumping into specific page code, if we click on pages here and click on the cog, then you can scroll down and then once again you get access to the header and the footer code, but it’s scoped specifically to that page.
Now, this is a great way to define libraries that you don’t wanna load on other pages, that will only slow down the rest of the website. So if you are thinking of using libraries, then you could probably save yourself a few megabytes just by not loading it on a page that’s not loaded. Once it gets downloaded, it’s cached anyway, but it’s just worth bearing in mind. And the exact same rules here apply. Anything defined in the head will obviously appear in the head but these will be below the code that gets put into the site settings.
So again, something to define in the site settings, you’ll have access to it here. Something you define here, you won’t have access to in the site settings.
And similarly, once again in the footer, or the closing body tag, you have access to jQuery, you have access to the HTML, you can do what you need to do with regards to all of that, the same stuff that we spoke about in the site settings, but once again it scoped to this page and it’s loaded after the site settings footer code. Now the final place you can load code is using the embed element and you can access that through the all elements here and if we scroll down, is the embed element.
Now, With all of these custom codes, you do need a site plan which is a little bit annoying, but it is what it is. That’s webflow for you. So You can write it. You can drag this embed code anywhere in the page. Once again, similarly with the footer code and the head code, you only have access to HTML that’s preceding this embed element. So you can’t access a footer or an element that’s lower down because that HTML simply hasn’t loaded yet. Once again, unless you’ve defined some sort of page load event list, or something like that.