With Chameleon, you can engage users in various ways and keep them informed about your latest product changes or exciting news.
If you want to deliver updates or news in a less intrusive manner, you can create a Banner. This can appear either at the top (or bottom) of your page or embedded in your UI next to other page elements.
ℹ Banners started out as Tours, but we developed them more to fit the non-intrusive in-line position, so they are now under the Embeddables type. If you previously created Banners, they will not be affected by this change and you can find them under Embeddables.
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 (in the past) intrusive style -- full-width at the top (or bottom) of a page, which makes them hard to miss. They are essential components to drive engagement towards messages that users will benefit from seeing, no matter their goal in your app.
But Banners also shine with less intrusive communication as you can embed them in-line for contextual announcements, or personalized messages. This fosters better engagement and reduces the noise-to-value ratio between all your in-app announcements.
Here are some ways you can use Banners :
announcing downtimes -- prevent incoming queries by notifying users about expected disruptions and how this can affect them; this is how you set expectations and show off your well-maintained product instead of interrupting users without notice.
driving renewals -- remind users about account limits, or even better, to renew their subscription to continue to enjoy your product and crush their goals with their team. You can stand by to help them figure out what's best for their needs.
invite to high-interest events -- announce and enable users to sign up for popular events they won't want to miss. Invested users will love the possibility to learn more in just 3 clicks: "Sign up" - "Join" - "Leave webinar".
conduct user research -- offer users the possibility to engage with upcoming feature improvement prototypes and offer to book a meeting for more insight.
offer exclusive offers -- engage users with relevant offers that are soon to expire, so they will never miss a great deal ever again.
share exciting company news -- for news you can't keep to yourself, where else to blast it than from the top of your app? Share your latest company wins, funding announcements, or impactful turns that users will be happy to celebrate with you.
How do I create a Banner?
In Chameleon, you can create a native Banner and deploy it to users in minutes. From the Dashboard, pick Embeddables and select the Banner type. You'll go on to configure it onto your application using the Builder.
✨ Explore our Banner Templates to set your message live even faster.
In the Builder, you'll have a few useful options to configure your Banner:
Set a position -- control where the Banner should appear on the page.
Configure the CTA -- choose a position for your main CTA and add an additional Action to connect users to a relevant resource or action.
Add a Dismiss -- allow users to return to your announcement later and snooze your Banner.
Positioning your Banner
Depending on your message and its urgency, you have different Position options to control how your banner appears to users:
Push down -- this option pushes your app content below so the Banner won't hide any essential components, such as navigation.
Cover top/bottom -- you can place it above, or below your app's main content
Embedded -- pick an on-page element and place your Banner before or after that element for a native placement. With this option, you can also adjust the Banner margins.
ℹ You can adjust the 4 margins at once, or click the 🔲 and adjust the values for each individual side.
Once you're done with the Builder options, head back to the Dashboard, to finalize your configuration and publish your Banner.
Choosing an Environment
If you have your Environments set, next, you can choose where you want your Banner to show up out of multiple domains and subdomains. This is useful when you have staging and production environments. Or when you have multiple web pages that cater to different audience groups.
By default, your Banner will appear on all domains where Chameleon is installed, but you can pick specific Environments from the dropdown.
👉 Read more about managing Experiences across different Environments.
Pick the audience
Next, select the audience that should see your Banner. You can combine multiple Segments that you create in Chameleon and use the AND/OR logic to define the right audience.
ℹ You can create Segments using the data you send to Chameleon, the default Chameleon data, or any data received from integrations.
Choose a recurrence
From the Dashboard, you can also pick how often your Banner should repeat after being exited or completed by users. You have multiple recurrence options you can pick from the dropdown.
ℹ Banners are not affected by Rate Limiting.
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: Banner is immediately live for all targeted users
Schedule publishing: set a date and time for the Banner to start being displayed
Set end date: set a date and time for the Banner to stop being shown to your users; they will switch to a "Draft".
💡 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.
Whenever you want to make changes to a live Banner you can easily do so, just make sure you apply your edits so users get to see the final version too.
👉 Learn more about the ways you can review changes for live Experiences.
Showing multiple Banners at once
You can also show multiple Banners at once, even attached to the same element, similar to an onboarding checklist. They will show up to users who fall in the target audience you set for each Banner, and users can complete them one by one.
Simply create each Banner and use the same element when selecting a position. You can set the main CTA to complete the Banner, so users will see the remaining steps they have to complete.
Once you set them live, you can adjust the order in which they appear by updating their "Priority" in the Dashboard. Sort your Banners "by priority" and simply drag and drop to establish the right order.
ℹ 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.