Try it: add page-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 page-level code

Add real, working code at the page level

Next, you’ll add a small banner on a single page. You might use something like this for a page-specific announcement, campaign notice, or temporary message.

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: Choose a page

Pick any page on your site. This can be the same page you used in the previous activity.

Step 2: Open Page settings

Open the Page settings for your chosen page.
Scroll to the Custom code section.

Step 3: Paste the script

Paste the code below into the Before </body> tag field:

<script>
  const notice = document.createElement("div");
  notice.textContent = "✨ Page-level custom code is working here.";
  notice.style.cssText = `
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 14px;
    background: #146EF5;
    color: #FFFFFF;
    font-size: 14px;
    border-radius: 8px;
    z-index: 9999;
  `;
  document.body.appendChild(notice);
</script>

Save the page settings.

Step 4: Preview or publish to staging

Enter Preview mode and make sure Enable custom code is toggled on. Or, publish your site to staging, then open the 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 blue banner at the top of this page that says '✨ Page-level custom code is working here.'

Page-level banner visible on a single page of a Webflow site.

Extras:

Try changing the message text (content within the banner).
Try changing the banner style by adjusting the CSS properties for color, font-size, or border-radius.