Creating Banners | Candu Help Center

What are Candu Banners?

Banners are eye-catching, inline content elements that you can embed seamlessly into your product's UI. They're perfect for promoting announcements, new features, events, and other important information to your users without disrupting their workflow.

When to Use Banners

Banners are ideal for:

Feature releases and announcements
Upgrade prompts and trial countdowns
Event and webinar promotions
Survey requests
Educational content promotion
Maintenance alerts
Payment notifications

Looking for inspiration? See best-in-class banners and alerts

Banner Placement Strategies

Top-of-Page Banners

Highly visible and perfect for urgent information like trial expiration or important announcements. These appear at the top of your product pages and are immediately noticeable to users.

Between UI Components

Place banners between existing UI elements on dashboards or feature pages. These provide more space for rich content like images, GIFs, and multiple CTAs.

Creating Your First Banner: Step-by-Step Guide

Step 1: Start With a Template or From Scratch

Create My First Banner Template

Navigate to the Content section in Candu
Click "Create New Content"
Enter a name for your banner (e.g., "My First Banner")
Choose a template or start from scratch

Show Image GIF showing the process of creating a new banner by naming it and selecting a template.

Pro Tip: Starting with our template will save you time and provide design inspiration. You can always customize it to match your needs.

Step 2: Design Your Banner Layout

The banner layout determines how your content is arranged. Candu uses a flexible layout system that makes it easy to organize your content:

Select the Layout component (highlighted in purple in the editor)
Use the right panel to adjust layout settings:
- Content direction (row or vertical)
- Wrap mode (wrap or no wrap )

GIF showing how to select and adjust layout settings for your banner

Layout Tip: The layout pulls properties from the parent container. If you're unfamiliar with flex layouts, start with "Content direction" to control whether elements stack horizontally or vertically.

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
Style them with your brand colors
Add clear action text like "Try Now" and "Learn More"
You can add interactions to interactive components like buttons and cards in the Interactions tab.
Add button styles within the component toolbox, like rounding the corners of your button.

Add an Image

Drag an Image component into your layout
Use the right panel to upload an image or enter an image URL
Adjust size and positioning as needed

GIF showing how to add and position images in your banner

Step 4: Make Your Banner Dismissible

If you want users to be able to dismiss your banner:

Make sure you're using a Card component as your base
Select the Card
Look for the "Dismissible" checkbox in the right panel
Enable it to add an "X" icon that users can click to close the banner

Step 6: Use Layers and History for Advanced Editing

Working with Layers

The Layers panel helps you see how your banner is structured and lets you:

Reorganize elements
Select nested components that might be difficult to click directly
Understand the hierarchy of your design

Click the Layers icon in the left sidebar
Drag layers to reorder them

GIF showing how to use the layers panel to select and organize components

Pro Tip: Use arrow keys to navigate between different elements.

Using History

History lets you undo changes or revert to previous versions:

Click the History icon in the left sidebar
View a timeline of your changes
Click on any previous state to revert to that version

GIF showing how to use the history feature to revert changes

Step 7: Place Your Banner in Your Product

Now it's time to determine where your banner will appear:

Use the Chrome extension to take a snapshot of your product UI
Choose placement options:
- Above an existing element
- Below an element
- Replace an element entirely

GIF showing how to use the Chrome extension to place your banner in your product.

Pro Tip: Taking a snapshot of your product UI helps you visualize exactly how your banner will look in context. To grab a snapshot, download Candu's Chrome Extension.

Step 8: Preview Your Banner

Before publishing, check how your banner will look in your product:

Click the Share Button in the top toolbar
Copy the Share link in a new tab.

Pro Tip: The Share link is an iFrame, so you will not be able to test any off-page interactions.

GIF showing how to preview your banner in different device views.

Step 9: Target the Right Audience

Make your banner relevant by showing it to specific user segments:

Click "Publish" to open targeting options
Select who should see this banner:
- All users
- Users on specific plans
- Users who have/haven't used certain features
- Custom segments you've created

GIF showing how to set audience targeting for your banner,

Learn more about how to create custom segments.

Step 10: Publish Your Banner

When you're satisfied with your design and targeting:

Click the "Publish" button in the top-right corner
Confirm that you want to make the banner live for each segment.
Where Candu is installed, the banner will now appear to the targeted users in your product.

Pro Tip: Content not appearing as expected? Troubleshoot content not appearing.

Advanced Banner Techniques

Creating Responsive Banners

Ensure your banner looks good on all devices:

Select your layout component
Choose tablet or mobile options to see how your content will look in different window sizes
You can choose to show or hide elements on different screen sizes as well as set specific breakpoints for different viewports. Learn how to build responsive content.