What is a banner?
A banner is an inline content element that's embedded into your product's UI. Banners work well for:
Feature releases and announcements
Upgrade prompts and trial countdowns
Event and webinar promotions
Survey requests
Educational content promotion
Maintenance alerts
Payment notifications
Candu offers pre-built banner templates to help you get started quickly, including:
Horizontal banners
Card-style banners
Trial-ending banners
Alert banners (using the pre-built "alerts" component)
To browse existing templates, go to Templates > Banners in Candu.
Tip: Banners can be placed anywhere in your product, but these two placements tend to be most effective:
Top of page banners: Position banners at the very top of a page for maximum visibility. Use this placement for urgent or time-sensitive information like trial expirations, system maintenance, or critical announcements that all users need to see immediately.
Between existing UI components: Insert banners between sections on dashboards, settings pages, or feature pages. This placement works well when you want users to notice the banner without it feeling disruptive.
When you're ready to place your banner, you'll use Candu's Snapshots to select exactly where it should appear. Learn more about placing content →
Create a Banner
Get started now and use this guide to follow along.
Step 1: Set up your banner
To get started, navigate to Content on the left sidebar.
Click Create New Content and select content type Banner
Name your content (ex. "Feature Announcement Banner")
Add a content section/category to keep things organized
Select an audience segment (or skip and refine targeting later)
Decide where the content will appear in your product:
Option 1: Grab a snapshot to place it precisely and preview it in context
Above an existing element
Below an element
Replace an element entirely
Option 2: Skip this step and add a placement later
Step 2: Add components to your banner
To start building content, drag Components from the Palette on the left. Click the pencil icon on any component to see customization options in the Toolbox on the right.
Understanding Layouts
The banner layout determines how your content is arranged. Candu uses a flexible layout system that makes it simple to organize your content:
Select the Layout component in your canvas (highlighted in purple in the editor)
Use the Toolbox to adjust layout settings:
Content direction: Controls whether elements stack horizontally (row) or vertically
Wrap mode: Determines if elements wrap to the next line or stay in one line
New to the Candu Editor? Check out our Editor Glossary to familiarize yourself with key terms and concepts.
Step 3: Add and style content elements
Now it's time to add the key elements that make up your banner:
Add a Button
Drag Button components onto your banner
Customize button styles in the Toolbox (rounded corners, colors, shadows, etc.)
Add clear action text like "Try Now" or "Learn More"
Go to the Interactions tab to make your button clickable (add navigation, trigger actions, etc.)
Add an Image or Video
Drag an Image or Video component into your layout
Use the Toolbox to upload or enter a URL
Adjust size and positioning as needed
Step 4: Make your banner dismissible
If you want users to be able to close your banner:
Make sure you're using a Card component as your base
Select the Card component in your canvas
Look for the "Dismissible" option in the Toolbox
Enable it to add an "X" icon that users can click to close the banner
Note: Once a user dismisses a banner, they won't see it again, unless you configure specific rules to resurface it.
Working with Layers
The Layers panel helps you see how your banner is structured and lets you:
Reorganize elements by dragging
Select nested components that might be difficult to click directly
Understand the hierarchy of your design
To use Layers:
Click the Layers icon in the left palette
Drag layers to reorder them
Tip: Use arrow keys to navigate between different elements in the Layers panel.
Using History
History lets you undo changes or revert to previous versions:
Click the History icon in the left palette
View a timeline of your changes
Click on any previous state to revert to that version
Apply a Segment
Make your banner relevant by showing it to specific user segments.
To connect a segment to content click the three dots in the “Everyone” tab and select Retarget to assign a new segment
Or duplicate existing content and retarget it later
Advanced Techniques
Once you're comfortable with the basics, explore these advanced features:
Creating responsive banners
Ensure your banner looks good on all devices by customizing how it appears on desktop, tablet, and mobile.
Select your layout component
Choose tablet or mobile options
You can choose to show or hide elements on different screen sizes as well as set specific breakpoints for different viewports.
A/B testing banners
Test different versions to see what performs best by creating variants and analyzing engagement.
Preview Your Banner
Before publishing, check how your banner will look in your product:
Click the Share button on the top-right corner
Copy the Share link in a new tab.
Note: The Share link is an iFrame, so you will not be able to test any off-page interactions.
Publish Your Banner
When you're satisfied with your design and targeting:
Click the "Publish" button in the top-right corner
Confirm your placement and segments
Where Candu is installed, the banner will now appear to the targeted users in your product!
Important: Content not appearing as expected? Troubleshoot content not appearing.