Try it: add site-level code

Test real, working code at the site level

Now, 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. You can use a blank project or clone a practice site from the Made in Webflow Marketplace, like this Webflow University cloneable.

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.

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.