Components are the building blocks you use in Candu to create in-app experiences. Some components serve a specific purpose, such as guiding users, collecting data, or prompting action, and can be styled centrally through your Styleguide for consistency.
By combining components like checklists, forms, flows, cards, buttons, and media, you can design onboarding, education, and engagement experiences without code, while tracking user interactions and personalizing what users see.
Checklist
Checklists drive product adoption by guiding users through setup and key actions. User checklist items can be completed manually or automatically via product events, user properties, or Candu events. You can create custom styles in your Styleguide and checklists come in two display types:
Accordion (no checkboxes)
Checklist (with checkboxes)
You can choose between tracking progress per User or Group.
Forms
Forms allow you to capture data about your users directly in your product. You can use them to build onboarding or sign up surveys, feedback surveys or contact forms. Styles are set in your Styleguide to ensure consistency. In Candu, forms include:
Fields: Text input, text area, select dropdown, email input, checkboxes, multi-select cards, single-select cards, submit button
Settings:
Redirect on submission: Send users somewhere else after submitting
Prevent resubmission: Based on User ID (avoid duplicate submissions)
States: Normal, Submitted (thank you message), Error (validation feedback)
Note: Forms require a submit button. These responses are tracked in the Responses section. For more details, see this guide.
Flow
Multi-step sequences that users navigate through, like a slideshow or carrousel. Use Flows for:
Walkthroughs (step-by-step guides)
Carousels (rotating content)
Multi-step forms
Onboarding sequences
Flow settings:
Step name: Label each step for organization
Save user progress: Remember where users left off if they exit flow
Preview flow: See the full sequence
View flowchart: Visualize step connections
Card
A container component that can display content and act as an interactive block. This means cards can be used as calls-to-action and set to be Dismissible. Cards are incredibly versatile:
Types: Action (clickable), No Action (display only)
Styling: You can change border radius, shadow, cursor type, hover state, and border to create transparent, action or static cards. Be sure to define styles in your Styleguide.
Actions: Cards can trigger all the same actions as buttons
Use cases: Feature blocks, pricing tables, option selectors, banners, notifications
Note: Actions, including dismissed actions, are tracked as user events
Conditional Logic
Great for personalization! Show or hide content dynamically based on conditions you set (user properties, location, behavior, etc.).
Other components
Typography
Text components with predefined styles (headings, body text, labels, etc.) Styles are set in your Styleguide to ensure consistency. Once defined, you can use them through your content.
Button
A clickable component that triggers an action and is tracked a user event. Buttons can be styled in your Styleguide and can trigger many actions, such as:
Dismiss overlay: Close a modal
Go to flow step: Navigate within a multi-step flow
Open URL: Link to another page
Callback: Add JavaScript snippets in the installation and call them from the Editor. An example of this is triggering a chat widget to open when a "Start chat" button is clicked.
Trigger tour/hotspot/overlay: Start other Candu experiences
Change content: Update overlay content dynamically
Send email: Trigger email notification
Trigger click: Click on behalf of the user
Image components
Display images from uploads or URLs and can include GIFs, SVGs, PNGs, and Webpts. You can configure images with:
Size: Width, height, min/max constraints
Fit: How image fills its container:
Contain: Full image visible, may have empty space
Cover: Fills container completely, may crop image
Fill: Stretches image (can distort)
Scale down: Like contain, but never enlarges
None: Original size, may overflow
Image upload limits:
File size: 1.5MB max
Resolution: 50,000 megapixels max
No limits: Self-host your images and provide the URL instead
Player (Video/Audio)
Embedded media player for video such as Wistia, Youtube, Vimeo or Vidyard. Configure players with:
Aspect ratio: 16:9 (widescreen), 4:3 (classic), 16:10, 2:1
Loading image: Placeholder shown before media loads
Accessibility: Add title and aria-label for screen readers
Badge
Small visual indicators or labels, typically used to show status, counts, or categories. As with buttons, you can create primary, secondary, tertiary, warning, and danger badges. Style them through your Styleguide for consistency.
Divider
A simple horizontal line used to separate content sections.
Embeds
Embeds let you include rich, interactive content, like calendars, forms, videos, or other tools. There are two embed types:
Candu Content: Embed other Candu content (must be inline)
iFrame: Embed external website or apps via a public URL
Alert
A component for displaying important messages, notifications, or status updates. Alerts are static on the page and you can set styles in your Styleguide for consistency.
