Overview of Triggers
There are two main ways to trigger an overlay:
On page load - Display automatically when users visit a specific page
Click to trigger - Show when users click on specific elements in your product
Common Use Cases for Triggering Overlays
Onboarding guides and welcome messages
Feature announcements and product updates
Upgrade prompts or premium feature previews
Feedback forms and surveys
Important notifications and alerts
Setting up a Trigger
1. Create Your Overlay Content
Start by creating the content that will appear in your overlay:
2. Configure Your Trigger
Once in the editor, you can configure your trigger by opening the placements tab in the toolbox.
First, verify and set up your URL targeting:
Check the URL shown in the placement settings - this is pulled from your snapshot page
Modify the URL as needed:
Add wildcards (*) for variable parts of the URL
Use exact matching for specific pages
Add URL rules for multiple pages
Use dynamic variables for more complex targeting
Need help with URL targeting? Learn more about setting up dynamic URLs and wildcards
Then, choose your trigger type:
For Page Load Triggers:
Select "On page load" in the trigger settings
Choose whether to show the overlay once or on every page load
For Click Triggers:
Select "Click to trigger" in the trigger settings
Use the selector tool to choose the clickable element:
Click elements in your page to automatically grab their selectors
Type in a specific selector: Common selector mistakes to avoid:
Missing a period (.) before class names: Use
.my-classnotmy-classMissing a hash (#) before IDs: Use
#my-idnotmy-idUsing incorrect quotes: Use
[target='_about']not[target="_about"]Typos in class names or IDs: Double-check spelling and case sensitivity
Configure additional options:
Only trigger once: Shows the overlay just once per user, even if they revisit the page. Great for onboarding or announcements you only want users to see one time.
Block default event: Prevents the original click action when using click triggers (e.g., stops a link from redirecting if your overlay is triggered by clicking a link)
While you cannot preview click triggers in the Chrome Extension, you can use the Share link to preview before publishing.
Advanced Options
Using Selectors
When using click triggers, you can target elements using:
Element IDs
CSS classes
Custom attributes
Complex selectors
Common selector examples:
[target='_about']
.sc-hZSUBg
#tooltipRoot
Dismissal Behavior
Users can click the X or click outside the overlay in the Backdrop to dismiss it
Each dismissal is captured as a User Event
Use dismissal data to create segments and personalize future content
You can configure whether an overlay is dismissible under the component tab. By default, all overlays are dismissible.
Additional Trigger Method: Candu CTAs
You can also trigger overlays from Candu content (cards, buttons, or images):
Step 1: Create a Candu Overlay with no Placement
Create your Overlay as usual
Publish the Overlay without a placement.
Step 2: Create the Candu CTA Trigger
Create the CTA that triggers the modal as usual Candu content
Go to the component's Interactions settings
Select "Trigger an Overlay"
Choose your overlay from the dropdown
Best Practices for Overlay Triggers
Choose the right trigger type for your use case
Test your selectors thoroughly. Note that you cannot test click actions in the Share link, so you'll need to test them in Staging.
Consider user context when setting trigger timing
Use analytics to optimize overlay performance
Learn more about creating segments to personalize your overlay strategy.
Need help or want to share your overlay implementations? Reach out to our team! 😍