Page Builder Integration

Overview

HashBar integrates seamlessly with popular WordPress page builders, allowing you to insert announcement bars and other elements directly into your pages. This guide covers native blocks and shortcodes for each supported page builder.

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:

1. Promo Banner Block

2. Promo Banner with Image Block

3. Countdown Block

4. Notification Block

Using Gutenberg Blocks

Adding a Block to Your Page

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

Configuring a Block

1. Select the block on your page
2. In the right sidebar, find the block settings
3. Adjust the settings:
   • Text content
   • Colors and styling
   • Button text and links
   • Image selection (for image blocks)
4. Preview your changes in real-time
5. 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

Elementor Page Builder

HashBar + Elementor Integration

HashBar provides full support for Elementor with custom widgets:

• Compatibility: Works with Elementor Free and Pro
• Widgets: All HashBar blocks available as Elementor widgets
• Customization: Full Elementor styling options
• Responsive: Mobile responsive out of the box

Adding HashBar Widgets in Elementor

Step-by-Step

1. Open your page in Elementor editor
2. Click Add Elements button
3. Search for "HashBar" in the element search
4. Drag the desired widget to your page section
5. The widget appears in your page
6. Customize in the left panel:
   • Content settings
   • Style options
   • Advanced settings
7. Preview on desktop/tablet/mobile tabs
8. Click Publish to save

Elementor Customization Options

Content Tab

• Headline and body text
• Button text and link
• Image selection (for image widgets)
• Countdown date/time
• Colors and styling options

Style Tab

• Font family, size, weight
• Colors: text, background, button
• Spacing: padding, margin
• Border: style, width, radius
• Shadow and effects

Advanced Tab

• CSS classes
• Custom attributes
• Visibility conditions
• Animation effects

Elementor Tips

• Responsive Design: Test on mobile using Elementor's device tabs
• Global Widgets: Create as Global Widget for reuse across pages
• Conditional Display: Use Elementor's visibility conditions to show on specific pages
• Animations: Add entrance animations for engagement

WPBakery Page Builder

HashBar + WPBakery Integration

Full support for WPBakery (formerly Visual Composer):

• Status: Fully compatible with WPBakery
• Elements: All HashBar blocks available as WPBakery elements
• Drag & Drop: Works seamlessly with visual builder

Using HashBar with WPBakery

Adding Elements

1. Open page in WPBakery visual editor
2. Click Add Element button
3. Search for "HashBar" elements
4. Click the element you want to add
5. Click Add to insert on page
6. Configure element in the dialog that opens
7. Click Save

Configuration

• Edit element by clicking the edit icon
• Adjust text, colors, links in the settings panel
• Preview changes immediately
• Save your page

WPBakery Best Practices

• Mobile Testing: Test responsive behavior on mobile devices
• Responsive Text: Use WPBakery's responsive text sizing
• Custom CSS: Add custom CSS classes for additional styling

King Composer Page Builder

HashBar + King Composer Integration

Full support for King Composer page builder:

• Compatibility: All King Composer versions supported
• Elements: HashBar blocks available as King Composer elements
• Drag & Drop: Native integration with visual builder

Using HashBar in King Composer

Adding HashBar Elements

1. Open page in King Composer editor
2. Click Add Element
3. Find HashBar elements in the element library
4. Drag element to your page section
5. Configure using the element settings panel
6. Save your page

Customization

• Click element to select it
• Adjust content and styling in the right panel
• Resize element by dragging corners/edges
• Add animations and effects

Classic Editor and Shortcodes

For Users on Classic WordPress Editor

If you're using the classic WordPress editor (not Gutenberg), use shortcodes:

Available Shortcodes

Using Shortcodes

Basic Example - Promo Banner

[hashbar_promo title="Summer Sale!" text="Save 30% on all items" button_text="Shop Now" button_url="/summer-sale"]

Countdown Example

[hashbar_countdown end_date="2024-12-25" end_time="23:59" format="days,hours,minutes"]

Notification Example

[hashbar_notification type="info" message="Free shipping on orders over $50!" dismissible="true"]

Where to Insert Shortcodes

1. Open your page in classic editor
2. Click where you want the element to appear
3. Paste the shortcode in the editor
4. Switch to visual/preview mode to see how it looks
5. Publish your page

Shortcode Generator

HashBar includes a shortcode generator to help you:

1. Go to HashBar → Shortcode Generator in admin
2. Select the element type
3. Fill in the options in the form
4. Copy the generated shortcode
5. Paste into your page editor

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 Recommendations

Best Page Builder for HashBar

• Gutenberg: Native blocks, fastest performance
• Elementor: Most customization options, excellent support
• WPBakery: Legacy but fully supported
• King Composer: Good integration, lightweight

Optimization Tips

• Use Gutenberg for best performance with native blocks
• Limit blocks per page for faster loading
• Optimize images used in promo banners
• Test on mobile devices after adding blocks

Related Documentation

• Countdown Timer - Full countdown timer guide
• Content & Messaging - Crafting effective messages
• Installation - Install HashBar plugin