Try it: add site-level code

We’re transitioning to a new UI, and are in the process of updating our Webflow University courses and videos.

Try it: add site-level code

Test real, working code at the site-level

Try it: Site-level code (site banner)

Finally, you’ll add a small banner that appears on every page of your site. You’d use something like this for cookie notices, site-wide announcements, or temporary alerts.

You don’t need a finished site for this. A blank or nearly blank project works just fine. The goal is to get hands-on and see custom code in action on a real site.

Step 1: Open Site settings

Go to Site settings.
Click the Custom code tab from the menu on the left.

Step 2: Paste the code

Paste this code into the Footer code field:

<script>
  const banner = document.createElement("div");
  banner.textContent = "🌍 Site-level custom code is running on every page.";
  banner.style.cssText = `
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    background: #7A3DFF;
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    z-index: 9998;
  `;
  document.body.appendChild(banner);
</script>

Save your changes.

Step 3: Publish to staging

Publish your site to staging, then open any page in your browser. Staging is a safe testing environment, so this won’t affect your live site.

You’ll know this worked if:

You see a purple banner at the bottom of every page.
On the page where you added page-level code, you see both the blue banner (page-level) and the purple banner (site-level).
On all other pages, you see only the purple banner.

Site- and page-level banners visible on a Webflow page.

Extras:

Try changing the message text (content within the banner).
Try changing the banner position by adjusting CSS property values for bottom, left, or right.
Remove the code and republish to see the banner disappear everywhere.