Overview
Your popup content is what converts visitors into leads and customers. HashBar provides flexible tools to create rich, engaging popup content with images, text, forms, and call-to-action buttons. Customize every element to match your brand and achieve your campaign goals.
Content Types
Custom Content
Plan: Free
Build custom popups with text, images, headings, and buttons. Perfect for announcements, promotions, and simple messages. Custom content allows you to create lightweight popups without external forms or complex integrations.
HT Form
Plan: Free
Create simple email capture forms using HashBar's built-in form builder. HT Forms are perfect for lead generation with minimal setup required. See Form Builder documentation for detailed field options.
Custom HTML
Plan: Pro
Embed custom HTML code directly in your popup. This advanced option allows developers to create completely custom popup layouts and functionality. Use custom HTML for complex integrations, custom JavaScript, or unique designs.
Pro Feature: Custom HTML content is available only on HashBar Pro plans.
Contact Form 7
Plan: Pro
Embed existing Contact Form 7 forms directly in your popup. If you already use Contact Form 7 on your WordPress site, this integration makes it easy to use those forms in popups without duplicating your setup.
WPForms
Plan: Pro
Integrate WPForms directly into your popup campaigns. Select from any existing WPForms form on your site and embed it seamlessly in your popup.
Ninja Forms
Plan: Pro
Embed Ninja Forms in your popups. Perfect if you're already using Ninja Forms for your website's forms and want to reuse them in campaigns.
Gravity Forms
Plan: Pro
Integrate Gravity Forms into your popup campaigns. Gravity Forms users can leverage their existing forms in HashBar popups without additional setup.
Fluent Forms
Plan: Pro
Embed Fluent Forms directly in popups. If you use Fluent Forms for your website, this integration allows easy popup form integration.
Shortcode
Plan: Pro
Embed any WordPress shortcode in your popup. This flexible option works with any plugin that provides shortcodes, offering maximum flexibility for advanced users.
Pro Feature: External form integrations (Contact Form 7, WPForms, Ninja Forms, Gravity Forms, Fluent Forms) and custom shortcode embedding are available only on HashBar Pro plans.
Images & Media
Image Upload
Upload images directly from your WordPress media library or upload new images. Images support multiple formats including JPG, PNG, GIF, and WebP.
Image Positioning
Free Options:
- Top: Image appears above text content
- Bottom: Image appears below text content
Pro Options:
- Left: Image appears to the left of content (side-by-side layout)
- Right: Image appears to the right of content (side-by-side layout)
- Background: Image appears as popup background with content overlaid
Pro Feature: Side-by-side and background image positioning are available only on HashBar Pro plans.
Image Width Control
Control the percentage of available space your image takes up (when using side-by-side layouts). Set image width from 20% to 80% to balance image and content area.
Image Alignment
Align your image to the left, center, or right when positioned above or below content. Center alignment is recommended for most use cases.
Border Radius
Add rounded corners to your image from 0 to 50 pixels. Rounded corners create a modern, polished appearance while sharp corners (0px) work well for a clean, minimal look.
Text Content
Heading
Your popup's main headline. Use clear, compelling language that communicates your primary message. Headings are typically the first thing visitors read.
- Rich text formatting support
- Control heading color in Design & Styling
- Recommended length: 5-10 words
Subheading
Optional secondary headline for additional context. Subheadings help clarify your main message and provide supporting information.
- Optional element
- Rich text formatting support
- Use for context or benefit statement
Description
Your main body content. Describe your offer, announcement, or value proposition in detail. The description section accepts rich text formatting including bold, italics, links, and lists.
- Full rich text editor with formatting options
- Support for links, bold, italic, and lists
- Control text color in Design & Styling
- Recommended length: 2-5 sentences
Call-to-Action Button
Button Text
The text displayed on your CTA button. Use action-oriented language like "Get Started," "Download Now," "Claim Offer," or "Learn More."
Button URL
The destination when visitors click your button. Enter any internal or external URL. Visitors will be directed to this page when they click.
Target Option
Choose whether the link opens in the same window or a new browser tab.
- Same Window (_self): Default behavior, opens in current window
- New Tab (_blank): Opens in a new browser tab
Close-on-Click Option
Choose whether clicking the button closes the popup.
- Close after click: Popup closes automatically when the button is clicked
- Keep open: Popup remains visible while directing to the target URL
Content Element Ordering
HashBar uses drag-and-drop ordering for all content elements. Rearrange your popup elements in any order:
- Image (top/bottom positioning)
- Heading
- Subheading
- Description
- Form (HT Form, external form, or custom HTML)
- Call-to-action button
Simply drag elements up or down to reorder them. This flexibility allows you to optimize your popup layout for maximum conversions. For example, some tests show moving the CTA button higher increases click rates, while others keep it at the bottom for natural reading flow.
Content Best Practices
Keep It Concise
Visitors have limited time and attention. Use short, compelling headings and descriptions. Avoid walls of text that overwhelm or confuse.
Focus on Benefits
Explain what visitors will gain by taking action. Instead of "Enter your email," try "Get exclusive discounts in your inbox."
Use Strong CTAs
Make your button text action-oriented and specific. "Learn More" is weaker than "Get 20% Off Now."
Match Your Brand
Your popup content and design should align with your overall brand identity and website design. Consistency builds trust and recognition.
Next Steps
After designing your content, explore advanced form options in our Form Builder guide, then customize the visual appearance using our Design & Styling guide.