An announcement bar is a versatile feature that allows you to share important messages, promotions, or updates at the top of your website. With HubSpot CMS, adding an announcement bar is simple, thanks to its intuitive design tools and flexible customization options.
Whether you’re announcing a sale, promoting an event, or sharing critical updates, an announcement bar ensures your message is seen without disrupting the user experience. This guide walks you through the process of creating and customizing an announcement bar in HubSpot CMS.
Types of Announcement Bars
HubSpot CMS supports various announcement bar types for different purposes:
Promotional Bars
- Highlight discounts or sales to boost conversions.
- Example: “Get 20% off all items—Use Code: SAVE20.”
Urgency Bars
- Create urgency with time-sensitive offers.
- Example: “Flash Sale! Ends in 2 hours—Shop Now!”
Event Notifications
- Announce webinars, product launches, or events.
- Example: “Join us for our free 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 important updates like policy changes or business hours.
- Example: “We’re now offering curbside pickup—Learn more.”
Add Announcement Bar to HubSpot CMS
Adding an announcement bar to your HubSpot CMS website is incredibly easy and requires no coding knowledge. Many platforms offer plugins and tools with simple drag-and-drop interfaces to create and customize announcement bars effortlessly. Create Announcement Bars the Easy Way with WiserNotify.
Using WiserNotify, you can quickly add an announcement bar to your HubSpot CMS website to grab visitors’ attention and share essential updates, promotions, or calls to action.
With advanced features like A/B testing and analytics, WiserNotify allows you to create visually engaging and highly targeted announcement bars that boost user engagement and drive conversions. Key features include:
Type of Widgets:
- Anncoment Bar Widgets
- Recent Activity Notifications
- Reviews and Ratings Widgets
- Countdown Timer Widgets
- Form Submission Notifications
- Inline Widgets
- Exit-Intent Pop-Ups
- Live Visitor Count Widgets
Customizable Design
- Adjust colors, fonts, and styles to align with your brand.
Real-Time Updates
- Automatically display live or dynamic data like visitor counts or recent
activities.
Targeted Messaging
- Personalize bars for specific audiences or user segments.
Urgency and Scarcity Elements
- Include countdown timers or stock alerts to drive quick action.
A/B Testing
- Experiment with different designs and messages to optimize performance.
Multi-Language Support
- Customize announcement bars in various languages for global reach.
Behavioral Triggers
- Show bars based on user behavior like exit intent or time spent on a page.
Compliance-Friendly
- Includes options for GDPR and cookie consent notifications.
Integration with Social Proof Widgets
- Combine with social proof notifications to amplify trust and engagement.
Adding an announcement bar to your site with WiserNotify is seamless. Sign up for a free plan to explore its features, then log in to your dashboard. Add your site to generate a unique pixel code for integration.
To add an announcement bar to your website, create a widget in WiserNotify. Follow these straightforward steps.
1. Create an Announcement Bar
- Log in to the WiserNotify dashboard.
- Navigate to the Create Notification section and select the Announcement Bar template.
- Customize the design by:
- Adding a compelling message such as “Exclusive Discount! Limited Time Only.”
- Choosing the appropriate font, colors, and background to align with your branding.
- Including a clear Call-to-Action (CTA) button like “Shop Now” or “Learn More.”
- Preview the design to ensure it matches your preferences.
- Save the widget design and press Next.
2. Set Display Rules
- Configure display settings, such as showing the bar on specific pages or targeting users based on location or behavior.
- Schedule the announcement bar for a particular timeframe if needed.
Here’s a real-life example of how an announcement bar will look on a website.
3. Preview and Activate
Steps to Install WiserNotify on HubSpot CMS
- Log in to your WiserNotify dashboard. Start with the free plan to explore the platform’s features.
- Add your HubSpot CMS site, and copy the unique pixel code provided.
- Log in to your HubSpot CMS admin panel.
- Navigate to Plugins > Add New and search for “WiserNotify.”
- Install and activate the plugin.
- Paste the copied pixel code into the WiserNotify plugin settings.
Using WiserNotify, you can easily create and manage announcement bars on your HubSpot CMS website. This ensures that your key messages reach your audience effectively and drive the desired actions.
How to Add an Announcement Bar to HubSpot CMS Other Ways
HubSpot CMS’s drag-and-drop editor makes it easy to add an announcement bar.
- Log in to Your HubSpot Account
- Access your website through the HubSpot CMS dashboard.
- Edit Your Page Template
- Go to Marketing > Website > Website Pages.
- Select the page where you want to add the announcement bar and click Edit.
- Add a New Section
- In the drag-and-drop editor, click + Add Section.
- Add a Text Module or a Rich Text Module to create your announcement bar.
- Customize Your Announcement Message
- Enter your text, such as “Free Shipping on All Orders Over $50!”
- Add a clickable link or button to guide users to relevant pages.
- Style the Announcement Bar
- Use the editor to customize background color, text size, and alignment.
- Example: Use bright colors and bold text to ensure visibility.
- Save and Publish
- Preview your changes and click Publish to make the announcement bar live.
Best Places to Display an Announcement Bar
Top of the Homepage
- Capture attention as soon as visitors land on your site.
Product or Service Pages
- Highlight relevant offers or promotions.
Checkout Pages
Reinforce urgency to encourage conversions.
Landing Pages
- Use announcement bars for targeted campaigns.
Mobile Views
- Ensure the bar is responsive and optimized for smaller screens.
Common Mistakes to Avoid
- Keep the message clear and concise to avoid confusing visitors.
- Regularly update or remove expired messages to maintain credibility.
- Test the announcement bar’s appearance on mobile devices.
- Use fonts and colors that match your website’s overall design.
- Always include a call-to-action to guide users.
Conclusion
Adding an announcement bar to your HubSpot CMS website is an excellent way to engage visitors and communicate important messages effectively. Whether you use the drag-and-drop editor, create a custom module, or integrate third-party tools, HubSpot provides flexible options for tailoring your announcement bar to your branding and goals.
Follow these steps to implement an announcement bar that enhances user experience and drives conversions. Start creating your announcement bar today and make your key messages stand out!
