On Click Trigger

The On Click trigger displays your popup when visitors click a designated element. This creates the best user experience as it's entirely user-initiated.

Overview

Property	Value
Trigger Type	onclick
Timing	User clicks element
User Action Required	Click
Mobile Support	Full (tap)

When to Use

Good Use Cases

• CTA buttons — "Learn More" buttons
• In-content links — Contextual triggers
• Image triggers — Clickable graphics
• Navigation items — Menu-based triggers
• Video lightboxes — Video popups
• Forms — Multi-step forms

Benefits

• Best user experience
• Zero intrusiveness
• User demonstrates interest
• Higher conversion rates
• Works everywhere

Configuration

Setting the Trigger Element

1. Go to Behavior tab
2. Select On Click from dropdown
3. Enter CSS selector for trigger element

CSS Selector Examples

Selector Type	Example	Targets
ID	#open-popup	Element with ID
Class	.popup-trigger	Elements with class
Data attribute	[data-popup]	Elements with attribute
Element + class	button.cta	Specific buttons

Common Selectors

/* By ID */
#newsletter-btn

/* By class */
.open-popup

/* By data attribute */
[data-popup="newsletter"]

/* Multiple selectors */
.popup-btn, #open-modal

/* Specific element */
a.read-more

Setting Up Trigger Elements

On Your Website

Add the selector to your trigger element:

<!-- Using class -->
<button class="popup-trigger">Subscribe</button>

<!-- Using ID -->
<a id="open-popup" href="#">Learn More</a>

<!-- Using data attribute -->
<button data-popup="newsletter">Get Updates</button>

In XBuilder Elements

When using XBuilder buttons as triggers:

1. Select the button element
2. Go to Advanced settings
3. Add CSS class (e.g., popup-trigger)
4. Use that class as the trigger selector

Multiple Triggers

Trigger the same popup from multiple elements:

/* Multiple classes */
.open-popup, .trigger-popup, .show-modal

/* Or use shared class */
.popup-trigger

Apply the same class to all trigger elements.

Display Behavior

Popup Toggle

By default, clicking the trigger:

• Opens popup if closed
• May close popup if open (toggle)

Open Only

Configure to only open, not toggle:

• Use separate close button
• Popup stays open until explicitly closed

Best Practices

Trigger Elements

1. Clear affordance — Make it obvious it's clickable
2. Action-oriented text — "Get Free Guide", not "Click Here"
3. Visual cues — Button styles, underlines
4. Consistent styling — Match trigger to popup
5. Accessible — Keyboard-focusable

Selectors

1. Unique selectors — Avoid conflicts
2. Semantic — Use meaningful names
3. Stable — Don't use dynamically generated IDs
4. Specific — Be precise about targets

User Experience

1. Instant response — No delay on click
2. Smooth animation — Nice open transition
3. Clear relationship — Popup relates to trigger
4. Easy close — Multiple close options

Mobile Considerations

• Click = tap on mobile
• Ensure tap targets are 44px+
• Test touch interactions
• Consider tap vs long press

Common Patterns

CTA Button

<button class="btn-primary open-popup">
  Get Your Free Guide
</button>

Selector: .open-popup

Text Link

<p>
  Learn more about our 
  <a href="#" class="popup-link">pricing plans</a>
</p>

Selector: .popup-link

Image Trigger

<img 
  src="preview.jpg" 
  class="video-trigger" 
  alt="Watch video"
/>

Selector: .video-trigger

Navigation Item

<nav>
  <a href="#" data-popup="contact">Contact Us</a>
</nav>

Selector: [data-popup="contact"]

Preventing Default Behavior

If your trigger is a link (<a>), the popup system prevents the default navigation. However, for best practice:

<!-- Add href="#" or remove href -->
<a href="#" class="popup-trigger">Open</a>

<!-- Or use button -->
<button class="popup-trigger">Open</button>

Troubleshooting

Click not working:

• Verify selector matches element
• Check element exists in DOM
• Ensure no JS errors
• Test selector in browser console

Wrong element triggering:

• Make selector more specific
• Check for duplicate classes
• Use unique ID instead

Testing selectors:

In browser console:

document.querySelector('.your-selector')
// Should return your element

A/B Testing Ideas

1. Trigger text — Different CTA copy
2. Trigger placement — Different positions
3. Trigger style — Button vs link
4. Multiple triggers — One vs many

Metrics to Track

• Click-through rate — Clicks on trigger
• Conversion rate — Actions after popup
• Trigger visibility — Above/below fold
• Device breakdown — Desktop vs mobile

Related Triggers

• Floating Button — Always-visible click trigger
• On Load — For automatic display