Understanding Banners

Learn how to create Banners for high-value announcements, exciting news, or downtimes

Pulkit Agrawal avatar
Written by Pulkit Agrawal
Updated over a week ago

With Chameleon, there are various ways you can engage users and keep them in the loop on your latest product changes, or most exciting news.

If you want to deliver updates, or exciting 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.


Availability & Usage

πŸ” Startup: 5 Embeddables

πŸ” Growth & Enterprise: unlimited Embedabbles

✚ Pair well with additional Actions


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".

  • 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.


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.

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, where you can pick an audience, start an A/B Test, and publish it live to users.


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 Tour, 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.

β„Ή Make sure you also add 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.

Did this answer your question?