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.
LiveChat
Use LiveChat to talk to your customers in real-time.
Livechat
Connect LiveChat with Webflow to provide real-time customer support, engage visitors instantly, and manage conversations across multiple channels.
Joonbot
Connect Joonbot with Webflow to capture leads through conversational chatbots and qualify visitors automatically.
Intercom Acquire
Connect your Webflow site with Intercom's live chat and customer engagement tools to capture leads, provide instant support, and convert more visitors into customers—all without leaving your Webflow dashboard.
Ideta
Integrate Ideta's AI-powered chatbots and automation tools with your Webflow site to automate customer support, capture leads, and schedule appointments without writing code.
Hyvor Talk
Add privacy-focused commenting, reactions, and community features to your Webflow site with Hyvor Talk's flexible integration options. Enable real-time discussions, membership systems, and moderated conversations without sacrificing user privacy or design consistency.
Drift
Connect Drift's conversational marketing platform with Webflow to capture leads, qualify visitors, and book meetings directly from your website. Add live chat, AI-powered bots, and intelligent routing without complex coding.
Disqus
Connect Disqus with Webflow to add robust commenting to your site, enabling threaded discussions, social logins, and streamlined moderation for active community engagement.
Crisp
Connect Crisp (AI-powered live chat and omnichannel messaging) with Webflow to enable real-time conversations, automate support with intelligent chatbots, and manage every customer interaction from a single, unified inbox
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.
