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.
Chat Whisperer
Connect Chat Whisperer with Webflow to deploy automated chatbot responses using ChatGPT and Claude models.
Flowstar Click to Call
Connect Flowstar Click to Call with Webflow to add mobile-optimized phone buttons that convert visitors into callers with a single tap.
Social Intents
Connect Social Intents with Webflow to chat with website visitors directly from Microsoft Teams, Slack, or Google Chat without separate agent software.
Poper
Connect Poper with Webflow to deploy AI-powered popups that capture leads, reduce cart abandonment, and increase conversions through behavioral targeting.
ChatSale
Connect ChatSale with Webflow to add ChatGPT-driven chatbots to a site for automated lead capture and qualification.
Salespeak
Connect Salespeak with Webflow to deploy chat widgets with AI-powered lead qualification that engage visitors and sync conversation data to CRM systems.
Smartarget Countdown Popup
Connect Smartarget Countdown Popup with Webflow to display time-limited offers and event deadlines through JavaScript embed codes.
Massively AI
Connect Massively AI, an AI-powered chatbot platform, with Webflow to automate customer support and qualify leads through conversational marketing on your site.
Flowstar Spin Wheel Gamification
Connect Flowstar Spin Wheel’s gamification widget platform with Webflow to add interactive pop-ups that capture leads in exchange for discount codes and rewards.
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.
