How to Add an Announcement Bar to a Webflow Website

An announcement bar is a small strip at the top of a website that shares information visitors should see right away.

You can use it to promote a limited-time offer, announce an update, share shipping details, or send people to an important page.

Webflow does not have a built-in announcement bar widget, but you can easily create one in the Designer using standard layout elements.

If you need more advanced options, WiserNotify lets you show different announcements based on visitor behavior, location, device, or campaign source.

Types of Announcement Bars

Webflow allows for the creative implementation of announcement bars for various purposes:

Promotional Bars

Highlight discounts and sales to drive purchases.

Example: “Get 20% off sitewide – Use Code: SAVE20.”

Urgency Bars

Create urgency with countdowns or limited-time deals.

Example: “Flash Sale: Ends in 3 hours!”

Event Notifications

Promote events, webinars, or launches.

Example: “Join us for a live webinar on February 15th—Register now!”

Shipping Announcements

Inform users about free shipping or delivery thresholds.

Example: “Free shipping on orders over $50!”

Policy Updates

Share updates such as return policy changes or holiday hours.

Example: “Extended holiday returns until January 31st.”

Create an Announcement Bar in Webflow

Follow these steps to create a simple announcement bar in Webflow.

Step 1: Add a Div Block

• Open your site in the Webflow Designer.
• Open the Add panel.
• Drag a Div Block onto the page where you want the announcement bar to appear.
• Give it a class name, such as announcement-bar.
• Set the width to 100% if you want the background to span the available page width.

Step 2: Add Your Message

Add a Text Block inside the Div Block.

Enter a short message, such as:

• Free shipping on orders over $75
• Our support hours have changed
• New feature is now available

If needed, add a Text Link, Button, or Link Block.

Add a clear CTA, such as:

• Shop now
• Learn more
• View details

Link the CTA to the correct page.

Step 3: Style the Bar

Select the announcement bar and use the Style panel to set:

• Background color
• Text color
• Font size
• Padding
• Text alignment
• Link or button styles

To place the message and CTA side by side:

• Select the announcement bar.
• Open Layout in the Style panel.
• Set Display to Flex.
• Choose the required direction and alignment.

Check the bar on desktop and mobile to make sure the message is readable.

Add an Announcement Bar to Webflow Using WiserNotify

WiserNotify is useful when you need targeted or scheduled announcements in Webflow.

You can use it for page-specific promotions, location-based offers, new-visitor messages, device-specific announcements, UTM campaign messaging, scheduled campaigns, and temporary alerts.

Add WiserNotify to Webflow through the site’s Custom code settings, not through a plugin marketplace.

For a detailed guide: Webflow Integration with WiserNotify

Step 1: Get the WiserNotify Pixel

Sign in to your WiserNotify account.

Go to the Install Pixel page and copy the Pixel Code provided for your account.

Keep the code unchanged so WiserNotify can identify your site correctly.

Step 2: Add the Pixel to Webflow

Open your Webflow project and go to:

Site settings > Custom code

Paste the WiserNotify pixel into the Head code field.

Select Save changes.

The site-level Head code applies across the published site, making it suitable for an announcement that may appear on multiple pages.

Step 3: Publish the Site

The pixel will not run on the live site until you publish the Webflow project.

Publish the site to the Webflow staging domain first if you want to test the setup before publishing to your production domain.

Step 4: Verify the Pixel

Return to WiserNotify and open the Install Pixel page.

Open the published Webflow site in a browser and refresh the page.

Then select Verify Pixel Installation in WiserNotify.

When the setup is correct, WiserNotify should show Pixel Active.

If the pixel is not detected, confirm that:

• The code was added to the Head code field
• The Webflow site was published after saving the code
• You are testing a published URL rather than the Designer preview
• Browser extensions are not blocking the script

Step 5: Create the Announcement Bar

In WiserNotify, go to:

Create Notification > Widget > Announcement Bar

Choose an announcement-bar template.

Enter the message and add a CTA when visitors need to continue to another page.

Customize the colors, typography, spacing, position, and button appearance so the notification fits the Webflow site.

Step 6: Configure Display Rules

Open the announcement bar’s display settings to decide where and when it should appear.

You can display it across the entire site or restrict it to selected pages.

Depending on your campaign, you may also target visitors by:

• Country or region
• Device type
• New or returning status
• Referring website
• UTM parameters

For example, a campaign from an email newsletter could display:

Newsletter readers receive an extra 10% off

only when the visitor arrives with the relevant campaign parameters.

A pricing-page announcement could promote annual billing without appearing on unrelated pages.

Step 7: Configure Timing

Open the timing settings to control when the announcement appears.

You can set the campaign’s start and end dates when the message is temporary. You can also control whether the bar appears immediately after the page loads or after a delay.

A scheduled campaign is useful for:

• Holiday promotions
• Registration deadlines
• Product launches
• Maintenance notices
• Limited-time discounts

Once the end date passes, the announcement can stop displaying automatically.

Step 8: Preview and Activate

Preview the notification on desktop and mobile.

Verify the:

• Message wording
• CTA destination
• Page rules
• Visitor conditions
• Start date
• End date
• Position relative to the navbar

After activating the notification, test the published Webflow site in a private browsing window. This helps prevent previous visits or cached campaign data from affecting the result.

Related: How to Add an Announcement Bar to Your Website

Best Places to Display an Announcement Bar

Top of the Homepage

• Capture visitors’ attention immediately when they land on your site.

Product Pages

• Highlight category-specific or product-related offers.

Checkout Pages

• Use urgency or reinforce free shipping to reduce cart abandonment.

Campaign Landing Pages

• Add announcement bars for targeted promotional messaging.

Common Mistakes to Avoid

Keep your announcement bar simple and to the point.

Ensure the bar works seamlessly across all devices.

Regularly update or remove expired messages to maintain credibility.

Match fonts, colors, and styles with your site’s overall design.

Include a strong call-to-action to encourage user engagement.

Conclusion

Webflow provides two practical ways to add an announcement bar.

For a straightforward message, build the bar in the Designer with a Div Block, text, and an optional link or button. Use responsive styles and choose static, sticky, or fixed positioning based on how the bar should behave.

For campaigns that require visitor targeting, page rules, scheduling, or location-based messaging, install the WiserNotify pixel through Webflow’s custom-code settings and manage the announcement from WiserNotify.

Whichever method you choose, prioritize concise copy, accessible contrast, responsive spacing, and a CTA that leads directly to the next step.