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.
ManyChat
Connect ManyChat with Webflow to get programmatic access to Instagram DM, Facebook Messenger, WhatsApp, and SMS automation through embedded widgets or API connections.
Zendesk Chat (Zopim)
Zendesk Chat (formerly Zopim) brings real-time customer support directly to your Webflow site. Add live chat, automated ticket creation, and help center search to engage visitors instantly and resolve issues faster.
Zendesk
Connect Zendesk's powerful customer support platform with Webflow to create seamless support experiences. Automate ticket creation from forms, embed live chat widgets, sync customer data, and build integrated help centers that enhance customer satisfaction while reducing manual work.
Website Toolbox Forum
Connect your Webflow site with Website Toolbox Forum to add robust community features, customer support forums, and engaging discussion spaces without complex coding. This integration enables you to embed a fully-featured forum that matches your brand while maintaining complete control over user experience and moderation.
UserVoice
Connect UserVoice's powerful feedback management platform with Webflow to collect user insights, prioritize feature requests, and build customer-driven websites. Transform visitor feedback into actionable improvements with voting systems, roadmap transparency, and seamless design integration.
Trustpilot
Build trust and credibility by showcasing authentic customer reviews on your Webflow site. Connect Trustpilot's review platform to display ratings, collect feedback automatically, and boost conversions with social proof that updates in real-time.
Slack
Connect Slack's powerful team collaboration tools with Webflow to automate notifications, streamline project workflows, and enhance team productivity. Get real-time alerts for form submissions, design comments, and site updates while keeping your entire team synchronized.
POWr chat
Add a Webflow Chat Plugin to your website without coding or headaches.
Pensil
Embed Pensil community forums, live sessions, and discussion boards directly in your Webflow site.
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.
