Banners provide an unintrusive, persistent way for you to reach your customers with announcements, promotions, proactive support, and more.
Create a banner
First, go to Proactive Support from the main menu and click + New message in the top right corner.
Then, choose Banner as your content type.
You can also choose to start with a pre-made template by picking this content type in the left sidebar.
For this example we’ll start from scratch. 👌
First, give your banner a title:
Then compose the content for your banner. You can use bold, italics, links and emoji 😉
Where possible, you should personalize your banner message with data attributes like customer name, or company information:
Next, choose who the banner should come from and if you’d like to include their avatar:
Should the banner be dismissible?
Next, decide if you'd like to show a dismiss button on your banner:
A dismiss button lets your customers hide the message as soon as they've read it:
This is perfect for friendly reminders, promotions, or other non-urgent messaging.
If you choose to hide the dismiss button, the banner will persist for your customers until they no longer match the audience rules, or they have completed the action (see below)
Persistent (non-dismissible) banners are perfect for more urgent/important communications with your customers. For example:
Show a banner until a user has paid an unpaid invoice.
Remind a user that they’re working with a test workspace/data.
Show a banner related to platform maintenance for as long as the issue persists.
Choose an action
Now it’s time to choose the action best suited to your goal for the message:
If you’re sending a message to simply notify or alert your customers, and there’s no need for them to take any action, leave this as ‘None’. Otherwise, the banner can:
Depending on the action you choose, there are different options to configure.
Open a URL
This action adds a CTA (Call to action) at the end of your message, where you can define:
The link text.
The URL to open.
To open the link in a new tab, or not.
To dismiss the banner once the link has been clicked, or not.
Ask for reactions
This action lets you collect quick feedback from customers in the form of emoji. Just choose which emoji they’ll have to choose from and whether or not to dismiss the banner after they’ve made a selection.
Collect visitor emails
This action will add a field at the end of your message, to easily collect email addresses from visitors to your site.
Launch a Product Tour
This action lets your users jump straight into the Product tour of your choice, in the same tab, or a new one:
Style your banner
Finally, choose a color for your banner and whether it should be at the top or bottom of your page. You can also choose to have your banner floating or inline (read on for examples of both styles):
An inline banner is full-width, and sits between your page content and the top of the window. As you scroll, the page content moves behind the banner.
A floating banner is centered on your page, and sits above the content, covering whatever is behind it. It does not move as you scroll.
When you choose a background color for your banner, the text color is automatically adjusted for contrast and readability:
Now that you’ve composed and configured your message, define the filters for the people who should receive it.
For example, if you’re announcing a discount on your pro plan, you might target all users currently on your free plan:
To accurately measure if your banner is driving action, you should define a goal. In this example, since we’re encouraging users to upgrade their plan, a good goal is ‘Plan is Pro’:
Finally, you can schedule your banner to only send at certain times.
For example, this banner is advertising a discount for “this weekend only” so it starts sending on a Wednesday, and stops sending at midnight the following Sunday:
Inline banner overlaying navbar
If you have fixed elements on your website, it is expected that the inline banner would overlay the navbar. There is a way to resolve this by changing some HTML/CSS on your website.
The Inline banners add
margin-top: 48px to the body of the page (this is the height of banner).
If you have a navbar on your website that uses
position:sticky, then your navbar will always be on the top. That means that when you set an inline banner live, it won’t be able to “push” the navbar down as it would normally do, which results in it overlaying the navbar.
Making the following changes to your CSS will ensure the inline banner doesn’t overlay your navbar:
position:absoluteto position the navigation bar inside the body.
If you currently have
position:fixedon your site, replace this with
Alternatively, you could choose to use floating banners or position the banner to the bottom of the page.
Need more help? Get support from our Community Forum
Find answers and get help from Intercom Support and Community Experts