Use this article to create, configure, and launch a banner message. You'll learn how to compose the banner content, choose a dismissal option, add a call-to-action, target an audience, set a goal, schedule delivery, and preview before going live. Banners are available on the Essential, Advanced, and Expert plans.

First, go to Outbound 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.

This walkthrough starts from a blank banner.

First, give your banner a title.

Then compose the content for your banner. You can use bold, italics, links and emoji 😉

Smart links are deep links to specific Intercom content (such as articles or product tours). They can only be inserted by highlighting text in the banner editor and using the link inserter to select the target content. The target content must be set to live — paused or unpublished content won't be available to link to.

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.

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 configured in the Choose an action section.

Persistent (non-dismissible) banners are perfect for more urgent/important communications with your customers. For example:

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.

This action adds a call-to-action (CTA) link at the end of your banner message. You can define:

This action adds a call-to-action (CTA) button at the end of your banner message. You can define:

You can also select a color for your button:

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.

This action will add a field at the end of your message, to easily collect email addresses from visitors to your site.

This action lets your users jump straight into the Product Tour of your choice, opening in the same tab or a new one.

In the Style section of the banner editor, choose a background color for your banner and whether it should appear at the top or bottom of your page. You can also choose between two layout styles: inline or floating.

The two layout options for banner placement are described below.

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:

In the Choose your audience step, define the filters that determine which customers will see your banner. Audience rules are evaluated dynamically, so customers who stop matching the rules will no longer see the banner.

For example, if you're announcing a discount on your Pro plan, you might target all customers currently on your Free plan:

If a customer matches the audience rules for multiple banners, they'll be shown the banner that was first set live. Once the customer dismisses that banner, they'll then be shown the next one in order of when each banner was set live.

Defining a goal lets Intercom measure whether your banner is driving the intended action. A goal is a condition that, when met, is counted as a conversion for that banner.

For example, if you're encouraging customers to upgrade their plan, a suitable goal is Plan is Pro. Intercom will track how many customers who saw the banner subsequently meet that condition:

To set a goal, go to the Goal step in the banner editor and define the condition you want to track. In the example below, the goal is set to Plan is Pro:

You can also schedule your banner to only display during a specific date range or at specific times of day. Use the Schedule step to set a start date, end date, or both. Outside the scheduled window, the banner won't be shown even to customers who match the audience rules.

Once you've finished configuring your banner, click Save and Close. A Preview button will appear in the top right corner of the banner editor. Use this to see how the banner will look on your site before it goes live.

When you're satisfied with the preview, click Set live. The banner will immediately start showing to customers who match your audience rules. You can pause or edit the banner at any time from the Outbound page.

By default, banners display through the web Messenger. If you're building a native mobile app, kiosk, or other embedded experience where the Messenger isn't present, the Contacts Banners API lets you fetch and display banners server-side, and record dismissals, so your customers see the right message regardless of the surface.

The API provides two endpoints:

The Contacts Banners API is available under Intercom-Version: Preview. See the API reference for full endpoint details.

The Contacts Banners API is designed for:

If you're displaying banners in a standard web app where the Messenger is already installed, you don't need this API — banners will display automatically for customers who match the audience rules.

To use the Contacts Banners API:

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 position:relative and 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:fixed or 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:

Alternatively, you could choose to use floating banners or position the banner to the bottom of the page.

Before launching a banner to your entire customer base, you can test its behavior in a live environment by restricting the audience to just yourself or a team member.