Skip to main content
How to trigger an Overlay

Use overlays to display important content on top of your product. Overlays are perfect for feature announcements, upgrade prompts, and important user communications.

Flora Sanders avatar
Written by Flora Sanders
Updated over 2 weeks ago

Overview of Triggers

There are two main ways to trigger an overlay:

  1. On page load - Display automatically when users visit a specific page

  2. Click to trigger - Show when users click on specific elements in your product

Screenshot showing the trigger type options in the Candu interface: "On page load" and "Click to trigger.

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:

Screenshot of the Create Content interface with the Overlay content type selected.

2. Configure Your Trigger

Once in the editor, you can configure your trigger by opening the placements tab in the toolbox.

GIF showing a user opening the placements menu to set up a trigger.

First, verify and set up your URL targeting:

  1. Check the URL shown in the placement settings - this is pulled from your snapshot page

  2. 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:

  1. Select "On page load" in the trigger settings

  2. Choose whether to show the overlay once or on every page load

Screenshot of the page load trigger configuration option.

For Click Triggers:

  1. Select "Click to trigger" in the trigger settings

  2. Use the selector tool to choose the clickable element:

    • Click elements in your page to automatically grab their selectors

      Image showing a user selecting an element on the page.
    • Type in a specific selector: Common selector mistakes to avoid:

      • Missing a period (.) before class names: Use .my-class not my-class

      • Missing a hash (#) before IDs: Use #my-id not my-id

      • Using incorrect quotes: Use [target='_about'] not [target="_about"]

      • Typos in class names or IDs: Double-check spelling and case sensitivity

  3. 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)

Screenshot showing the click trigger and selector configuration

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.

The Candu Editor showing users how to set up a dismiss action.

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

  1. Create your Overlay as usual

  2. Publish the Overlay without a placement.

Step 2: Create the Candu CTA Trigger

  1. Create the CTA that triggers the modal as usual Candu content

  2. Go to the component's Interactions settings

  3. Select "Trigger an Overlay"

  4. Choose your overlay from the dropdown

Best Practices for Overlay Triggers

  1. Choose the right trigger type for your use case

  2. Test your selectors thoroughly. Note that you cannot test click actions in the Share link, so you'll need to test them in Staging.

  3. Consider user context when setting trigger timing

  4. 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! 😍

Did this answer your question?