Page & site level code

Webflow lets you add custom code to extend your site beyond built-in options. Maybe you want to add a cookie consent banner, a live chat widget, or behind-the-scenes JavaScript. This kind of code doesn't live on the canvas. It lives in settings. Page settings for page-level code, or Site settings for site-level code. In this video, we'll look at page-level custom code, site-level custom code, and how to decide between the two.

Let's start with page-level code. Say we want to add a live chat widget on this Contact page only. We could add it everywhere, but our team wants it here. There's no need to add any elements or change the layout. Instead, from the Pages panel, open the page settings and scroll to Custom code. Here, we have two fields. Code placed inside the head tag loads as soon as the page starts loading and is good for things like page-specific tracking or verification snippets. Code placed before the body tag loads after the page content. For things like behavior scripts or tools that look for elements already on the page. In either case, the code still only runs on this page.

Now, let's paste our JavaScript snippet into the body field. Ours is a sample, but you can find instructions for how to find and use code for the chat tool of your choice. With the code in place, we'll save the page settings. Now when we preview the page, we can see the expandable chat button here on the Contact page. But heads up. You may need to toggle Enable custom code or even publish to staging to see your embedded code. And of course, some code runs entirely behind the scenes. But if we navigate to another page on the site, our chat widget isn't there. That's page-level code at work.

Let's move onto site-level code. Maybe we want a cookie consent banner on every page of our site. We can do that with site-level code. To start, we'll open the Site settings, then click the Custom code tab on the left. Similar to the page level, we have a head field for code that runs when the pages start loading. And a footer field for code that runs after page content starts loading. In both cases, code here will automatically run across the entire site. And this is where we'll paste ours. Once again, ours is a sample, but you can find instructions for how to get started with the cookie consent tool of your choice. But let's save the site settings. And we're prompted to publish, since some scripts don't fully run in preview mode. Publishing to staging works fine here. Now, we can see the cookie banner appear on every page until the visitor interacts with it. That's site-level custom code.

Let's recap when to use page- versus site-level code. We used page-level custom code to add a chat widget to our Contact page only. Within the Page settings. Because that worked best for our site. We used site-level custom code to automatically load a cookie consent banner on every page. Within the Site settings. Managing it in one location keeps behavior consistent and makes updates easier.

So the simple rule is this. Use page-level custom code for code that should only run on one page. If it should run everywhere, use site-level custom code. And of course, there's also the Code Embed element if you want the code to be visible in one specific part of your layout. Maybe an embedded third-party scheduling widget. We cover that in another video. But that's how to add page- and site-level custom code in Webflow.