Skip to main content

Module Setup

After creating a popup in the XBuilder component, you need to configure a module to display it on your frontend. This guide explains how to set up and configure the XBuilder Popup module.

Creating the Module​

Step 1: Access Site Modules​

  1. Log in to your Joomla administrator panel
  2. Navigate to Content → Site Modules
  3. Click the New button in the toolbar

Step 2: Select Module Type​

  1. In the module type selection screen, find XBuilder Popup
  2. Click to select it
  3. The module configuration screen opens
Quick Find

Use the search box and type "XBuilder" to quickly find the module type.

Module Configuration​

Basic Settings​

Title​

  • Enter a descriptive title (e.g., "Newsletter Popup" or "Holiday Promotion")
  • This title is for admin reference only
  • Set Show Title to "Hide" (popups don't need visible titles)

Position​

Select a module position from the dropdown. The position affects when the module loads, not where the popup appears (popups always display as overlays).

Recommended positions:

PositionUse Case
debugTesting (requires debug mode enabled)
position-0Early loading position
Any availableWorks with any position
Position Doesn't Affect Display

The module position only determines when JavaScript loads. The popup always appears as an overlay, regardless of position.

Status​

Set to Published when ready to display the popup.

Module Tab General Settings​

Component

Select Popup​

This is the most important setting:

  1. Click the Select Popup dropdown
  2. You'll see a list of all published popups
  3. Select the popup you want to display
  4. Only published popups appear in this list

If no popups appear:

  • Verify you've created and saved popups in the component
  • Check that popups are published (not unpublished or trashed)

Control which pages display the popup:

On All Pages​

Module Assignment: On all pages

The popup displays on every page of your site.

Only on Selected Pages​

Module Assignment: Only on the pages selected
  1. Select this option
  2. Check the menu items where popup should appear
  3. Popup only shows on selected pages

Example: Show newsletter popup only on blog articles:

  • Select "Only on the pages selected"
  • Check all blog category and article menu items

On All Pages Except Selected​

Module Assignment: On all pages except those selected
  1. Select this option
  2. Check pages to exclude
  3. Popup shows everywhere except selected pages

Example: Don't show popup on checkout:

  • Select "On all pages except those selected"
  • Check the checkout/cart menu items

Access Tab​

Access Level​

Control who can see the popup:

LevelWho Sees It
PublicEveryone (including guests)
RegisteredOnly logged-in users
SpecialAuthors, editors, and above
Super UsersAdministrators only
CustomYour custom access levels

Common scenarios:

  • Newsletter signup — Public (everyone)
  • Member-only offers — Registered
  • Admin notices — Super Users

Publishing Tab​

Start Publishing​

Set a date/time when the module starts displaying:

  • Leave blank to start immediately
  • Set future date for scheduled campaigns

Finish Publishing​

Set a date/time when the module stops displaying:

  • Leave blank for no end date
  • Set for limited-time offers

Example: Black Friday Sale

Start Publishing: 2024-11-29 00:00
Finish Publishing: 2024-12-02 23:59

Ordering​

If multiple modules are in the same position, set the order:

  • Lower numbers load first
  • Usually not critical for popup modules

Multiple Popups Strategy​

You can create multiple module instances for different scenarios:

Different Popups per Page​

  1. Create multiple popups in the component
  2. Create a module instance for each popup
  3. Use menu assignment to target specific pages

Example Setup:

ModulePopupMenu Assignment
Homepage PopupWelcome offerHome page only
Blog PopupNewsletter signupBlog pages
Product PopupSpecial discountProduct pages

User-Targeted Popups​

  1. Create popups for different audiences
  2. Create modules with different access levels

Example Setup:

ModulePopupAccess Level
Guest PopupSign up CTAGuest
Member PopupUpgrade offerRegistered

A/B Testing​

  1. Create two versions of a popup
  2. Create modules with different ordering
  3. Measure results and optimize

Saving and Testing​

Save the Module​

  1. Click Save or Save & Close
  2. Verify status is "Published"
  3. Check module appears in module list

Testing Your Popup​

  1. Open your frontend site in a new browser tab
  2. Navigate to a page where the popup should appear
  3. The popup should display based on its trigger settings

If popup doesn't appear:

  1. Verify module is published
  2. Check menu assignment includes current page
  3. Verify popup is published in component
  4. Check popup trigger settings (on load, delay, etc.)
  5. Clear Joomla cache
  6. Check browser console for JavaScript errors

Debug Mode Testing​

If using the debug module position:

  1. Enable Joomla debug mode:
    • System → Global Configuration → System
    • Set "Debug System" to "Yes"
  2. Set module position to "debug"
  3. Test on frontend
  4. Disable debug mode for production

Module Position Tips​

For Production​

Use any position that loads early in your template:

  • position-0 or position-1
  • Template-specific early positions
  • debug (if debug mode will remain on)

Position Doesn't Affect​

  • Where the popup appears (always overlay)
  • Popup styling or content
  • Trigger behavior

Position Does Affect​

  • When JavaScript loads
  • Module ordering with other modules
  • Debug visibility

Common Configurations​

Newsletter Popup (Exit Intent)​

Position: position-0
Status: Published
Access: Public
Menu Assignment: On all pages

Limited Time Offer​

Position: position-0
Status: Published
Access: Public
Menu Assignment: On all pages
Start Publishing: [Campaign start date]
Finish Publishing: [Campaign end date]

Members-Only Announcement​

Position: position-0
Status: Published
Access: Registered
Menu Assignment: Only on selected pages (member area)

Next Steps​