Overlays, often referred to as modals, let you display content on top of your product rather than embedded inline, perfect for capturing attention without relying on limited real estate in your existing UI.
This article is about overlays. For hotspots, product tours, or inline, see:
You can create overlays of any size or shape, position them anywhere on the page, and trigger them automatically or from user interactions.
When to use overlays
Overlays work best when you need guaranteed visibility, the content is time-sensitive or high-priority, you want to temporarily block access to features (paywalls). Some examples:
High-priority announcements: Feature launches, important updates, or time-sensitive notifications that need immediate visibility
Onboarding moments: Welcome videos, initial surveys, or setup guides that greet new users on their first login
Conversion opportunities: Paywalls, upgrade prompts, demo requests, or premium feature teasers that drive purchasing decisions
Feedback collection: Surveys, NPS scores, or feedback forms presented at strategic moments in the user journey
In this guide, we’ll walk through creating overlay content, previewing and publishing it, and best practices.
Create an Overlay
To get started, navigate to Content on the left sidebar.
Click Create New Content and select content type Modal
Name your content (Tip: use descriptive names like "Dashboard announcement" or "New feature paywall")
Add a content section / category to keep things organized
Select an audience segment (or you can skip and refine targeting later)
Decide where the content will appear in your product:
Option 1: Grab a snapshot to preview it in context
Option 2: Skip this step and add one later
Building Content
The overlay canvas gives you complete creative freedom. Build your design from scratch using Candu's drag-and-drop components from the Palette on the left, or start with a pre-built template.
Then, click the pencil icon to see customization options on the right panel, the Toolbox.
Not sure where to start? Use templates for design inspiration. We offer templates for feature announcements, resource hubs, onboarding checklists, and more
Style your overlay
Positioning
Use the grid to position your overlay exactly where you want it and use the Z-index if needed to control where it appears on the page in relation to other elements.
Overflow and Scrolling
Control what happens when your content exceeds the overlay dimensions:
Show overflow content with scrolling enabled for longer content
Hide overflow and keep the overlay a fixed size
Enable scroll or auto when content is longer than the space allows
Border and Shape
Add border radius to create rounded corners
Set border width and color to define the overlay edges
Adjust padding to control spacing between content and overlay edges
Configure Backdrop
Show backdrop (default): Dims the page behind, focusing attention on your overlay and preventing interaction with underlying content. Customize the backdrop shade and opacity.
Hide backdrop: Creates a popup-style effect where users can interact with the page while keeping the overlay open. Only dismissible via the X button or a dismiss button.
Configure Dismissibility
Head to the Dismissible Overlay style in the Toolbox to control how users can close your overlay:
Dismissible (default): Users can click the X button or use a dismiss button to close. Each dismissal is captured as a User Event.
Non-dismissible: Requires users to take a specific action (like clicking a CTA button) before the overlay disappears. Perfect for paywalls or required actions.
Triggering Your Overlay
Once you've created your overlay content, configure when and how it appears to users. There are three main trigger methods, each suited to different use cases.
On Page Load Triggers
Display your overlay automatically when users visit a specific page. Perfect for onboarding messages, feature announcements, or important notifications.
Setting up page load triggers:
Open the Placements tab in the Toolbox
Verify your URL targeting (Note: the URL shown is pulled from your snapshot page)
Select "On page load" as your trigger type
Choose display frequency:
Until dismissed: Shows the overlay once per user, even if they revisit the page.
On every page load: Displays each time the user lands on the page.
Best for:
Welcome messages on first login
Feature announcements on specific pages
Page-specific help resources
Click Triggers
Show your overlay when users click specific elements in your product.
Setting up click triggers:
Open the Placements tab in the Toolbox
Set up your URL targeting (same as page load)
Select "Click to trigger" as your trigger type
Target your clickable element:
Use the selector tool to click elements and automatically grab their selectors
Configure additional options:
Only trigger once: Shows the content just once per user, even if they revisit the page.
Block default event: Prevents the original click action when using click triggers (for example, stops a link from redirecting if your content is triggered by clicking a link).
Note: 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
Best for:
Progressive disclosure of complex information
Contextual tips and guidance
Trigger from a Candu CTA
When you want another piece of Candu content to reveal the overlay:
Publish your overlay without a placement
In another piece of Candu content, select the call-to-action (button/link)
Add the Trigger Overlay action
Select your published overlay from the dropdown
Programmatic triggering
Use Candu’s Javascript API to trigger overlays programmatically when you need to control when they appear based on specific user events or conditions. See our developer docs to learn more.
Publishing Your Overlay
Once you've created and configured your overlay, it's time to make it live.
Click the Publish button in the upper right corner of the Editor
The overlay will guide you through setup (if you haven't already configured it in the Placements tab)
Review your segments. Note: you can publish to all segments simultaneously or select specific segments.
Click Publish to X Segment(s)