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

Try it: Page-level code (page banner)

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

Pick any page in 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 your selected page only.

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.