Build a Banner to display a persistent, full-width message at the top of your users' screens. This article covers creating a Banner, configuring its display settings, adding content blocks, and styling.

Prerequisites

• Appcues installed on your site

• The Appcues Chrome Extension installed in your browser (if creating from your app).

Create a Banner

You can start a Banner from your app or from Appcues Studio.

From your app: Navigate to the page where the Banner should appear, open the Chrome Extension, select Add a Banner, then choose Create New. Pick a preset or start from scratch.

From Studio: Go to Experiences > Banners and click Create a Banner.

Both paths open the Builder, where a settings panel appears on the right side.

Configure Banner settings

Set the display mode

The display mode controls how the Banner sits on the page.

• Inline — pushes your site content down beneath the Banner. Use this when you want top navigation to remain accessible.
• Overlay — floats the Banner above your content.

Enable sticky scrolling

Toggle Sticky on to keep the Banner pinned to the top of the screen as users scroll. When off, the Banner scrolls with the page content.

Choose an animation

• Slide-in — the Banner slides down from the top of the page.
• None — the Banner appears immediately with no animation.

Adjust alignment and spacing

Use the Alignment and Spacing options to control content alignment, margin, and padding. Padding adjustments also control the overall height of the Banner.

Configure dismiss behavior

Toggle Allow this banner to be dismissed to add an X button to the Banner. When a user clicks the X, the Banner is dismissed permanently — it does not reappear for that user.

If dismiss behavior is disabled, the Banner remains visible until you unpublish it or its scheduled end time passes.

Add content blocks

Click a + icon in the Banner to add content.

Add text

Add one or more text blocks. For each text block you can set font size, color, alignment, and style. You can also insert a link (with an option to open in a new tab).

Personalize text with user properties: Type two curly braces around the property name — for example, {{name}} or {{userId}}. The property name must exactly match what you send to Appcues. See Personalize Flows for formatting details.

Add buttons

Add one or more buttons to drive action. Double-click a button to edit its label. Configure these options for each button:

• Colors — default and hover background color, text color.
• Spacing and corner radius — control button size and shape.
• Advanced CSS — add custom CSS rules in the Advanced tab.

Set button actions

Each button supports these actions:

• Go to a URL — opens a URL, optionally in a new tab. For dynamic URLs, use curly braces with a user property (e.g., {{dashboardUrl}}).
• Trigger a Flow — launches a Flow on the current page or a different URL.

You can also configure a button to track a custom event or update a user profile property on click. See Buttons in Flows for full details on button actions.

Style the Banner

Select the Banner container to access styling options: background color, border, shadow, and opacity. Use these settings to match the Banner to your brand.

Localize the Banner

Banners support localization so you can serve your content in multiple languages. You can translate content manually in the builder, upload XLIFF files for bulk translation, or use AI translation to auto-translate into your configured languages.

To set up localization, click the language dropdown in the builder to enable your target languages and start translating.

For full setup instructions — including configuring languages, working with XLIFF files, and AI translation — see Localize experiences.

Confirm it worked

• In the Builder, click Preview to walk through the Banner as an end user would.
• Verify the display mode (inline vs. overlay), sticky behavior, and dismiss button all work as expected.

If the Banner doesn't look right

• Confirm the Chrome Extension is up to date and that Appcues is installed on the page.
• Check that your content blocks are not overlapping — adjust spacing and padding in the settings panel.
• Buttons set to trigger Flows don't work in Preview. Use live testing to confirm the behavior.
• Personalization tokens (e.g., {{name}}) do not show up in Preview. Use live testing to confirm.
• If the issue persists, collect a screenshot, your Banner ID (from the Studio URL), User ID of the affected user then contact support.