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. You build Banners in the extension.

Create a Banner

Start a Banner from the Appcues App or from the Chrome extension.

From the Appcues App:

1. Click Experiences > New experience.
2. Select Web, then Banner.
3. Enter a Name and the URL of the page where the Banner should appear. Optionally, pick a Campaign Tactic.
4. Click Continue. The Chrome extension opens on that page.

From the Chrome extension: Go 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.

Both paths open the builder, where a settings panel appears on the right side. To edit a Banner later, open its menu in Experiences and click Edit in extension.

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.

Name the Banner for screen readers

Under Accessibility, enter a Screen reader name. A screen reader announces it when it reaches the Banner, and it labels the Banner in the page's list of landmarks. Name the Banner instead of repeating its text, for example "Site maintenance notice".

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

Each text block includes a font selector. Set it to Auto to inherit the font from your application's page — use Preview to see the inherited font in action. You can also choose a specific font from the dropdown to override it for that block.

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. Expand Additional options to find both.

When you update a user property, pick an existing property or type a new name and click Create "[name]" to add it to your account. A new property works in the builder right away, but it won't appear in targeting conditions and segments until it has been recorded on at least one user.

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. Use the Advanced styling options to add CSS rules to your Banner. See Advanced Styling for more.

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.

Set who sees it, then publish

1. In the Appcues App, click Experiences and open the Banner. Its Settings tab opens.
2. Set Who sees this and Where this appears. See Configure an experience's settings.
3. Publish the Banner, or schedule a start and end time. See Publish, schedule, and unpublish an experience.

Confirm it worked

• In the Builder, click Preview to walk through the Banner as an end user would.

After you publish to a staging domain or to internal testers, also check:

• Inline pushes page content down, and Overlay sits on top of it. With sticky scrolling on, the Banner stays at the top as you scroll. With the slide-in animation, it slides in from the top.
• User property tokens, such as {{name}}, show your test user's values. If the user has no value for a property, check what the Banner shows instead.
• Go to a URL buttons open the right page, in a new tab if you set one. Trigger a Flow buttons launch the Flow. Tracked events show in your test user's activity.
• If dismissing is on, clicking the X hides the Banner, and it stays hidden after you reload. If dismissing is off, there's no X and the Banner shows on every page load.

For how to publish to testers and check who qualifies, see Preview and test an experience.

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, the Banner's Experience ID (on its Settings tab, in Who changed this), User ID of the affected user then contact support.