Triggering Synced Pattern Popups in the Block Editor

Once you’ve created your first popup, the next step is to implement your popup in the place you prefer on your website.

This guide walks through the most common places people trigger popups in the Block Editor, and what to watch for in each case.

Trigger a Popup with a Button

Buttons are the easiest and most reliable way to trigger a popup.

• Add a Button block
• Set the button text
• In the link URL field, paste your Pattern Trigger code you copied from the Synced Pattern Popup page. E.g.: #spp-trigger-123

That’s all you need. When the button is clicked, the popup opens with your synced pattern content. This approach works well for:

• Calls to action
• Legal content (terms, privacy policy)
• Product details
• “Learn more” links

Trigger a Popup from a Text Link

You can also trigger popups from regular text links.

• Add a Paragraph block
• Select the text you want to link, and paste your trigger code with a hastag infront of it like so: #spp-trigger-123

This is useful when you want the popup to feel lightweight or contextual, rather than like a big call to action.

Using CSS Classes Instead of Links

Some blocks and layouts don’t expose a link field, or you may be working with custom HTML. In those cases, you can use a class-based trigger like this example: <button class="spp-trigger-123">Open Popup</button>

Any clickable element with that class will trigger the popup when clicked. Class-based triggers are also required if you want to set a custom modal width.

Setting a Custom Modal Width

To control the width of a popup, use the class-style trigger and add a width value like the example below: <a class="spp-trigger-123-800">View Details</a>

This sets the modal width to 800px. No custom CSS is required.

Triggers Inside Navigation Menus

You can use popup triggers in navigation menus, but there’s one thing to be aware of. Because menus are often rendered globally or dynamically, the popup assets may not always load automatically.

If a popup trigger in a menu doesn’t open:

1. Edit the page where the popup should be available
2. Look for the Synced Pattern Popup Support meta box
3. Enable Forced On for that page

This ensures the required scripts and styles are loaded.

Triggers Inside Reusable or Synced Blocks

Popup triggers work inside reusable blocks and synced patterns, including:

• Buttons
• Links
• Custom HTML blocks

This makes it easy to create reusable CTAs that open popups consistently across your site. Just remember that the trigger still relies on the correct pattern ID.

Page Builders and Dynamic Content

Synced Pattern Popups works with most page builders. If your trigger is added via:

• A page builder
• AJAX-loaded content
• A dynamically injected section …and the popup doesn’t open, enable the "Forced On" option for the page where the popup should be available. This is usually all that’s required.

Best Practices

If the trigger is part of the main page content, it usually works automatically If the trigger is global, dynamic, or injected, forcing assets is often the right move