Blocks, Shortcodes & Page Builders

Overview

HashBar adds Gutenberg blocks and shortcodes to the classic Notification Bar, so you can place promotional content, countdowns, and notifications on specific pages. Announcement Bars and Popup Campaigns do not depend on a page builder: they are created in the HashBar dashboard and run site-wide on any theme.

Important Note About Announcement Bars and Popups

Important: Announcement bars and popup campaigns have their own dedicated admin panel in HashBar and do NOT need to be added via page builders. Use the HashBar dashboard to create, configure, and manage bars and popups. Page builder integration is for specific content blocks (Promo Banner, Countdown, etc.), not for managing your campaigns.

The page builder blocks described below are for adding promotional content, countdowns, and notifications to specific pages. Full-featured announcement bars and popups are managed exclusively through the HashBar dashboard.

Gutenberg (WordPress Block Editor)

Supported Gutenberg Blocks

HashBar provides 4 native blocks for Gutenberg (9 with Pro):

1. Promo Banner Block

Feature	Details
Purpose	Add promotional content to specific pages
Customization	Headline, body text, button text, colors, background
Link	CTA button links to any page or external URL
Visibility	Shows on page where block is inserted only

2. Promo Banner with Image Block

Feature	Details
Purpose	Promotional banner with featured image
Image	Upload product image, lifestyle photo, or logo
Layout	Image left/right or stacked options
Customization	Text + image styling, button

3. Countdown Block

Feature	Details
Purpose	Display countdown timer for limited offers
Configuration	Set end date/time, choose format (days/hours/minutes/seconds)
Styling	Customize colors, font size, background
Timezone	Uses site timezone (see countdown docs for details)

4. Notification Block

Feature	Details
Purpose	Display alert, notification, or important message
Types	Info, success, warning, error notification styles
Customization	Icon, message text, color theme
Interactive	Optional dismissible button

Using Gutenberg Blocks

Adding a Block to Your Page

Open your page in the WordPress editor (Gutenberg)
Click the + button to add a new block
Search for "HashBar" or the specific block name
Click the block you want to add
The block appears in your page
Configure the block settings in the right panel
Save or publish your page

Configuring a Block

Select the block on your page
In the right sidebar, find the block settings
Adjust the settings:
- Text content
- Colors and styling
- Button text and links
- Image selection (for image blocks)
Preview your changes in real-time
Save your page

Gutenberg Block Examples

Product Promotion Block

Block Type: Promo Banner with Image
Headline: "Summer Collection Now Available"
Body: "Shop the latest styles with free shipping on orders over $50"
Button: "Shop Summer Collection" → /products/summer
Image: Summer fashion product photo
Result: Page-specific promotion only shows on that product page

Limited-Time Offer with Countdown

Block Type: Countdown
End Date: Tomorrow at 11:59 PM
Format: Hours:Minutes:Seconds
Label: "Sale ends in"
Result: Live countdown shows how much time remains for offer

Shipping Notification

Block Type: Notification
Type: Info notification
Icon: Truck/shipping icon
Message: "Orders placed today ship tomorrow!"
Result: Important info displays prominently on product pages

Classic Editor and Shortcodes

For Users on Classic WordPress Editor

If you're using the classic WordPress editor (not Gutenberg), use shortcodes. The Classic Editor toolbar includes a HashBar shortcode button that helps you build the shortcode with its options.

Available Shortcodes

Shortcode	Purpose	Plan
`[hashbar_btn]`	Button	Free
`[hashbar_countdown]`	Countdown timer	Free
`[hashbar_socials]`	Social icons	Pro
`[hashbar_fb_likebox]`	Facebook Like box	Pro

Where to Insert Shortcodes

Open your page in the classic editor, or add a Shortcode block in Gutenberg
Click where you want the element to appear
Paste the shortcode, or use the HashBar shortcode button in the editor toolbar
Preview the page to see how it looks
Publish your page

Using HashBar with Elementor, WPBakery and Other Builders

Announcement Bars and Popup Campaigns run site-wide from the HashBar dashboard, so they do not need to be added inside a page builder layout. To place Notification Bar content inside a builder layout, use the shortcodes above in the builder's shortcode or HTML widget.

HashBar Pro also adds an Elementor Canvas template for the Notification Bar post type and hides bars while you edit a page in Elementor.

Important Limitations and Notes

Page Builder Blocks vs. Full Features

Page builder blocks are simplified versions:

Blocks: Limited to that specific page
Bars/Popups: Site-wide with advanced targeting, frequency, scheduling
Use Blocks For: Page-specific promotions or content
Use Dashboard For: Site-wide campaigns, A/B testing, advanced features

What You Cannot Do in Page Builders

Create full announcement bars (use dashboard)
Create popup campaigns (use dashboard)
Set targeting rules
Configure frequency control
Schedule across multiple pages
Run A/B tests (use dashboard)
Access analytics

What You Can Do

Insert promo content on specific pages
Display countdowns (one-off, not campaign)
Show notifications on specific pages
Customize appearance
Add page-specific offers

Troubleshooting Page Builder Integration

Blocks Not Appearing

Verify HashBar plugin is activated
Clear browser cache
Try different page builder if available
Check browser console for errors

Styling Not Applying

Check if custom CSS is conflicting
Verify color/styling settings are saved
Clear WordPress cache if caching plugin active
Test in different browser

Countdown Not Working

Verify end date/time is set correctly
Check timezone settings
Confirm countdown JavaScript is loaded
Test in different browser

Page Builder Integration