Announcement Bar
Connect Announcement Bar by Smartarget with Webflow to display promotional notifications, shipping thresholds, and time-sensitive offers across your site through JavaScript embedding.
How to integrate Announcement Bar with Webflow
The easiest way to set up Announcement Bar is by installing the Announcement Bar app from the Webflow Marketplace. You can also embed the JavaScript code directly in your site's custom code settings.
Requirement: You need a paid Webflow site plan to add custom code. Free plans do not support custom code integration.
Use the Announcement Bar app
Install Announcement Bar from the Webflow Marketplace for centralized management through your Webflow dashboard's Apps section. The marketplace app eliminates manual code copying while delivering the same core functionality.
After installation, configure your announcement content in the Smartarget dashboard. Message updates take effect immediately on your published site without requiring republishing through Webflow.
Embed the announcement bar code
Configure your messages, colors, and CTA buttons in the Smartarget dashboard, then copy the generated JavaScript code and paste it into Webflow.
Setup process:
- Create an account at smartarget.online
- Configure your announcement content (text, styling, CTAs, visibility rules)
- Copy the JavaScript embed code
- In Webflow, navigate to Site Settings → Custom Code
- Paste the code in the Footer Code section (before
</body>tag) - Publish your site
Performance note: Place JavaScript in the Footer Code section to allow page content to load first and prevent render-blocking.
Important: Scripts only execute on published sites. They won't appear in the Webflow Designer preview. Test on your published or staging site.
The widget supports multiple message rotation, custom color schemes, CTA button integration, and responsive design across desktop and mobile.
What you can build
Integrate Announcement Bar with Webflow to display promotional messaging across your site.
- Flash sale promotions: Display time-limited offers with urgency messaging. Show "24-Hour Flash Sale: 40% Off Winter Collection — Shop Now" with a CTA button linking to the sale category page.
- Shipping threshold messaging: Display static messages like "Free shipping on orders over $50" to encourage higher cart values. Note: This is static text configured in the dashboard — the widget doesn't integrate with cart data for real-time dynamic messaging.
- Product launch announcements: Broadcast new product availability site-wide. Show "New Feature Live: Advanced Analytics Dashboard — Learn More" with a link to product documentation.
- Seasonal campaign messages: Configure multiple messages that rotate automatically during browsing sessions. Note: Message content is configured manually in the Smartarget dashboard — to change seasonal messaging, update the dashboard directly.
Frequently asked questions
Custom code embedding requires a paid Webflow site plan. Free plans do not support custom code integration.
This is expected behavior. The announcement bar uses JavaScript that only executes on published sites, not in Designer preview mode. Publish your site to a staging domain or production URL to test functionality.
Yes. Once you embed the JavaScript snippet, all content updates happen through the Smartarget dashboard. Change message text, adjust styling, or modify CTA buttons — changes appear immediately on your published site without republishing.
Webflow allows up to 50,000 characters total across all custom code areas combined (site settings, page settings, Code Embed elements, and CMS fields). This is a combined limit, not per-section. The Announcement Bar JavaScript snippet is small, but monitor your total character usage if combining with other custom code.
Verify your Webflow plan supports custom code, confirm you published your site (not just saved in Designer), and check that you pasted the code in the Footer Code section. Use browser developer tools (F12) to check the Console tab for JavaScript errors. Clear browser cache or test in incognito mode to rule out caching issues.
Description
Announcement Bar (also called Message Bar) is a Smartarget widget that displays site-wide promotional notifications in a persistent header. It offers customizable messages, call-to-action buttons, brand-aligned colors, and responsive design. Configuration happens through the Smartarget dashboard.
This integration page is provided for informational and convenience purposes only.
Smartarget FAQ
Connect Smartarget FAQ, a customizable FAQ widget, with Webflow to display frequently asked questions on your site and reduce support requests.
Wiremo
Connect Wiremo, a customer review platform, with Webflow to add review collection, photo feedback, and automated review request emails to your e-commerce store.
Superflow
Connect Superflow, a visual feedback and review tool, with Webflow to collect comments, annotations, and approvals directly on your published site.
Corner Ribbon
Connect Corner Ribbon with Webflow to add customizable promotional ribbons that highlight sales, announcements, and offers on your site.
Urgency Deal
Connect Urgency Deal with Webflow to encourage visitors to complete purchases before time runs out.
Smartarget Stories
Connect Smartarget Stories, a story-format content widget, with Webflow to display images and videos in a swipeable format for product announcements, promotions, and brand content.
Brandzway Reviews Photos and More
Connect Brandzway with Webflow to collect and display customer reviews with photo submissions on your e-commerce site.
Boosters
Connect Boosters with Webflow to add interactive features like GSAP animations, carousels, and improved forms without writing custom JavaScript.
Flowstar Sales Notification
Connect Flowstar Sales Notification with Webflow to display real-time purchase notifications on eCommerce sites.
Related integrations
Get started for free
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.
