Candu is a no-code platform that lets you create and manage in-product experiences like banners, checklists, modals, product tours, and hotspots.
The Big Picture: From Design to User
Here's the complete journey of how Candu content reaches your users:
Install → Add Candu's script to your application so it can display content
Design → Build content in Candu's visual editor
Place → Tell Candu where content should appear on your pages
Target → Control which users see content
Publish → Make content live for your users
Measure → Track how users interact with your content
When a user loads a page in your application where Candu's installed, here's what happens:
Your page loads → The Candu script tag initializes
Candu checks → "What content should appear for this user on this page?"
Then evaluates:
Is there a placement matching this page's HTML?
Do the URL rules match?
Does this user match the segment criteria?
Is the content published?
If all match → Content renders on the page
User interactions tracked → Clicks, views, completions sent to Candu (and your analytics tools if integrated)
Let's dive into each of these concepts.
How Candu Displays Content
Candu works by anchoring your content to existing HTML elements on your pages.
When you place content, you're selecting an HTML element where Candu should attach your content. You can position content:
Above the element
Below the element
In place of the element (replacing it)
Since Candu works with existing HTML elements on your pages, this means that:
You can only place content where HTML elements exist
If the same HTML element appears on multiple pages, content will show on all those pages (unless you use URL rules)
If your HTML structure changes (new code release, redesign), placements anchored to old elements may stop working
Understanding selectors
A selector is how Candu finds the right HTML element on your page. Think of it like adding a hook on the wall to hang a portrait. Two ways you can find selectors:
Using Snapshots
Snapshots analyze your page and create selectors for you. Just click where you want content to go, and Candu identifies the selector automatically.
Defining a selector manually
If your page structure changes or selectors are dynamic, you can define your own selector using stable identifiers.
👉 Learn more: Define a Selector Manually
Tip: For the most stable content placements, ask your developers to add custom IDs to key locations where you plan to place content. For example:
<div id="candu-dashboard-welcome">
Custom IDs won't change with redesigns, making your placements much more reliable.
Content Types: What You Can Build
Candu offers several content types, each designed for different use cases:
Inline Content
Content that lives directly on your pages, integrated into your existing layout. Examples:
Banners for announcements or promotions
Empty states when users haven't added data yet
Checklists to guide onboarding or feature adoption
Dashboard sections to highlight key information
Overlays
Content that appears on top of your application. Examples:
Modals for feature announcements or upgrade prompts
Slide-outs for contextual help or forms
Overlays can be shown on specific pages OR triggered on-demand (like clicking a button to open a modal).
Product Tours
Multi-step walkthroughs that guide users through features or workflows. Each step anchors to a specific element on the page, creating a connected journey.
Hotspots
Pulsing beacons that draw attention to specific features. When clicked, they reveal tooltips with more information.
Workspaces and Environments
Workspaces are separate instances of Candu within your account. Most organizations use workspaces to separate environments. Each workspace has its own:
Content library
Installation script
Whitelisted domains
User data and segments
Always match where you're viewing with the Candu workspace you're working in. You can use the Chrome Extension to double-check the workspace matches your current environment.
How Placements Work
A placement is a configuration that tells Candu:
Where to anchor content (the HTML selector)
Which pages to show it on (URL rules)
How to position it (above/below/replace)
In the Editor (using Snapshots), you can:
Grab a snapshot of your page to capture its HTML structure
Design your content with visual context of where it will appear
Select elements and set placement rules directly in the Placements tab
URL Rules
URL rules prevent content from appearing everywhere unintentionally. You can target content based on:
Exact URL match → Show only on this specific page
Contains → Show on any page with this text in the URL
Starts with / Ends with → Match URL patterns
Wildcards (*) → Replace variable parts of URLs
Best practice: Always combine selector placement with URL rules. Even if you've selected a unique element, URL rules add an extra layer of control.
Segmentation
By default, published content appears to everyone. But you can create segments to show different content to different users based on:
User properties → Role, plan type, account size, email domain
Behavior → Pages visited, features used, actions taken
Journey stage → New trial users vs. activated customers vs. churning accounts
Segmentation requires sending user data to Candu via:
The installation script (directly passing user traits)
Segment.com or other data integration
Webhooks or API calls
Once you have segments, you can target content to appear only for specific user groups.
Publishing vs. Preview
You can publish content without making it immediately visible by:
Publishing to a test segment first (like "Internal Only")
Using URL rules to limit where it appears initially
Starting with staging environment before moving to production
Next Steps
Now that you understand how Candu works, you're ready to:
Install Candu in your application
Create your first content in the visual editor
Questions about how Candu works? Reach out to us via chat or email at [email protected].