Banners are a type of Embeddable in Chameleon that allow you to engage users and keep them informed about product changes or announcements. They can appear at the top or bottom of your page, or be embedded within your UI next to other page elements, providing a less intrusive way to deliver important updates or news.
ℹ️ Banners were initially categorized as Tours, but have been developed to better fit non-intrusive in-line positioning and are now classified under Embeddables. If you previously created Banners, they are not affected by this change and can be found in the Embeddables section.
Availability & Usage
🔐 Startup: 5 Embeddables
🔐 Growth & Enterprise: unlimited Embedabbles
✚ Pair well with additional Actions
How are Banners useful for in-app communication?
Banners are defined by their positioning and visibility. They can be displayed as full-width elements at the top or bottom of a page, making them effective for high-priority messages.
They can also be embedded in-line for contextual announcements or personalized messages, which improves engagement and reduces the noise-to-value ratio of your in-app communications.
Common Use Cases for Banners
Announcing planned downtime: Prevent incoming support queries by notifying users about expected disruptions and how they might be affected, setting expectations, and demonstrating your well-maintained product.
Driving renewals: Remind users about account limits or upcoming subscription renewals to help them continue using your product effectively.
Event invitations: Announce and enable sign-ups for popular events with minimal clicks required.
User research recruitment: Offer users the opportunity to provide feedback on upcoming feature improvements or prototypes.
Promoting special offers: Engage users with relevant, time-limited offers they won't want to miss.
Sharing company news: Announce important company developments, funding announcements, or other significant news that users might appreciate.
How to Create a Banner
To create a Banner in Chameleon:
From the Dashboard, navigate to Embeddables and select the Banner type
Configure your Banner using the Builder
Deploy it to your users 🪄
✨ Explore our Banner Templates to set your message live even faster.
Using the Builder
In the Builder, you'll have several options to configure your Banner:
Set a position: Control where the Banner appears on the page
Configure the CTA (Call to Action): Choose a position for your main CTA and add an additional Action to connect users to relevant resources
Add a Dismiss option: Allow users to close the Banner and potentially snooze it for later viewing
Positioning your Banner
Depending on your message and its urgency, you can choose from different positioning options:
Push down: This option pushes your app content below the Banner so it won't hide essential components like navigation
Cover top/bottom: Place the Banner above or below your app's main content
Embedded: Position your Banner before or after a selected on-page element for a native placement, with adjustable margins
💡 Tip: When using the Embedded option, you can adjust all four margins at once, or click the square icon to adjust values for each individual side.
Once you've completed the Builder configuration, return to the Dashboard to finalize settings and publish your Banner. 🚀
Choosing an Environment
If you have multiple Environments, you can select where your Banner should appear across different domains and subdomains. This is useful when you have separate staging and production environments, or multiple web pages for different audience groups.
By default, your Banner will appear on all domains where Chameleon is installed, but you can select specific Environments from the dropdown menu.
👉 Read more about managing Experiences across different Environments.
Pick the audience
Now, you can choose which users should see your Banner by selecting or combining multiple Segments. You can use AND/OR logic to define the right audience for your message.
ℹ️ You can create Segments using the data you send to Chameleon, the default Chameleon data, or any data received from integrations.
Choose a recurrence
You can determine how often your Banner should repeat after being exited or completed by users. Multiple recurrence options are available from the dropdown menu.
ℹ️ Banners are not affected by Rate Limiting settings.
Testing
You can run A/B Tests on Banners from your Dashboard and review the performance of each Variant on the "Analytics" page.
🔐 Growth & Enterprise plans can also leverage custom events as completion Goals with A/B tests.
Go live
When you're done configuring your Banner and you're ready to go live, you can choose to:
Publish immediately: Make your Banner live for all targeted users right away
Schedule publishing: Set a specific date and time for the Banner to start displaying
Set end date: Choose when you'd like your Banner to stop appearing to users automatically. Once it reaches this date, it'll return to "Draft" status
💡 Tip: If your Banner isn't showing up as expected, use the Debugger console tool to see detailed information about its configurations and solve the issue.
You can easily make changes to a live Banner at any time. Just make sure to apply your edits so users will see the updated version.
👉 Learn more about the ways you can review changes for live Experiences.
Showing multiple Banners at once
You can show multiple Banners simultaneously, even attached to the same element (similar to an onboarding checklist). They will be displayed to users who match the target audience for each Banner, and users can complete them one by one.
To create a multi-Banner sequence:
Create each Banner individually
Use the same element when selecting a position
Set the main CTA to complete each Banner
Once published, adjust the order in which they appear by updating their "Priority" in the Dashboard
Sort your Banners "by priority" and use drag-and-drop to establish the correct sequence
ℹ️ Try adding a Dismiss to the first Banner that introduces your checklist or try logic personalization to update the content when users complete all steps and offer additional guidance.
Analyzing Banner data
Once you have live Banners, Chameleon will collect data on how users engage with them. You can then view the results in your Chameleon Dashboard or within your analytics integrations.
👉 Read this article to know which data Chameleon collects and learn more about analyzing your Experiences' performance.