Skip to main content

How to Add a Button That Opens a Popup or Modal

Use a Button click event when you want a CTA to open a modal or custom modal (offer form, bonus details, video, or short qualification step) without navigating away from the page.

Before You Start​

Make sure you have:

  • A page open in the Page Builder.
  • Content planned for the popup (form, text, image, CTA).
  • Familiarity with the Navigator Modal area for editing overlay content. See Navigator and layers.

Step 1: Create the Modal Content​

  1. Open the Navigator.
  2. Work in the Modal area so popup content stays separate from the main page sections.
  3. Add the sections, text, form, or media that should appear inside the overlay.
  4. Keep modal content short — overlays compete with the main offer.

If your page uses a custom modal target container, note the target/class the trigger must reference.

Step 2: Add the Trigger Button​

  1. On the main page canvas, drag a Button into the hero, offer, or pricing section.
  2. Set a clear label such as See offer details, Open form, or Watch bonus.
  3. Click the button to open the settings drawer.

See Button element (reference).

Step 3: Set the Click Event to Modal​

  1. Open click event settings.
  2. Choose modal or custom modal (wording may vary by UI version).
  3. For custom modal, enter the target container / class that matches your modal setup.
  4. Confirm you are not using a plain link event — a URL would navigate away instead of opening the overlay.
Event typeTypical use
ModalShared / global modal flow on the page
Custom modalSpecific modal container for that CTA

Page Summary can later help you audit triggers, classes, and auto-open rules. See Page Summary.

Step 4: Style and Check Conflicts​

  1. Style the trigger button for contrast and mobile tap size.
  2. Preview with other page-level widgets (Cookie, WhatsApp, Notification) enabled so the overlay does not collide with floating controls.
  3. Ensure modal CTAs (submit, close, secondary link) are obvious.

Step 5: Publish and Test​

  1. Save and Publish.
  2. On the live URL, click the trigger button.
  3. Confirm the modal opens with the correct content.
  4. Close/dismiss the modal and confirm the page remains usable.
  5. Retest on mobile — overlays and keyboards can change available height.

Troubleshooting​

ProblemWhat to try
Button does nothingConfirm click event is modal/custom modal, not an empty link.
Wrong content opensSelect the correct modal target; edit content in Navigator → Modal.
Modal clipped on mobileReduce content height; test with sticky headers disabled if needed.
Confuses NotificationNotification is a page-level notice, not a modal overlay. Use modal click events for popups.

Outcome​

Visitors can open your popup from a CTA while staying on the same page — useful for secondary offers, forms, and bonus details.

FAQ​

Is a modal the same as Notification?

No. Notification is a singular page-level notice. A modal is overlay content triggered by click events (or other page modal rules).

Can a button both open a modal and go to a URL?

Give the button one main job. Put a secondary link inside the modal if visitors need a destination after the overlay.

Where do I edit modal content later?

Use the Navigator Modal area so you do not confuse overlay layers with main page sections.