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
Transcript
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.
Any CSS you load, any JavaScript you put in there does not get loaded in the main design in face nor does it get loaded in the preview, you have to then publish your coat to see it. So you don’t get a live review of what you’ve written. Again, similarly, that’s why I kind of use code sandbox to see what I’m doing and then copy the code over.
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 inside the site settings and custom code, we have obviously the head code section. Now, I’ve said this before and I’ll remind you again that code is understood and written line by line. So, when we talk about the head, we It’s right at the top of the page, if we inspect here. And we look at the head, it’s right at the top of the page and there isn’t, by this point, there’s no if it’s got to this line for instance, there’s no HTML that’s been written. And this is important because if you’re trying to do things with HTML inside of the head, then it’s not gonna have access to those unless you write some sort of JavaScript that waits for the page load event. Okay?
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.
Scrolling down, we get the footer code which is at inserted before the closing body tag. Now once again, reminded that the HTML is ready by this point, plus jquery is ready. So we’re able to load j or or use jquery to our advantage. And I’ve sent webflow gives us Jquery so we might as well use it. There are some code, like you can do a lot with JavaScript, but the code can be so much clearer sometimes with jQuery Curry. It is quite nice to use, but obviously, JavaScript and the browsers are getting a lot more powerful now. So I’m surprised that webflow haven’t moved away from jQuery, but it’s here and so we might as well use it.
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.
If I’m creating a component that uses JavaScript to operate, I like to define everything all inside of the embed element. And then similarly to that, with the HTML embed element, you don’t there’s over I think there’s like a hundred and 47 different HTML elements and Webflow only give you access to a very small amount and even some of these are duplicates. So the embed element is also a great place to add