Styling Appcues with Custom CSS

Some advanced users or users looking for very special styling might want to use their own CSS. This is a guide to the Appcues-specific CSS selectors and classes that you can target. All of these selectors can also be seen in context within the browser inspector. If you're not comfortable exploring the browser inspector, we suggest you do not edit the CSS and do exercise caution if you decide to. If you do, please do not use  body or html tags in the HTML component while building your flows as it may cause your flow to break or not show when the flow has been pushed live.   

Please note that our markup is subject to change. While we test our own styling operators across browser versions, we are unable to guarantee that your custom CSS will operate as expected. If you have any questions, don't hesitate to reach out at

Flow container appcues

This element wraps an entire flow.

Progress bar .appcues-progress

A CSS progress bar that's updated as users complete each step.

Steps appcues cue

This is where the main content lives. Feel free to assign styles here as necessary.

Navigation buttons .appcues-button, .appcues-button-success

Button arrows are set using the CSS content attribute and unicode characters. You can remove/edit them by changing their CSS.

Backdrop .appcues-backdrop

This is the background that covers the page during a "lights off" flow.

Tooltip .tooltip.panel-content

This the is where tooltip content lives.

Hero Headers  appcues cue .apc-hero h1 and appcues cue .apc-hero h2

The heading (h1) and subheading (h2) for the Hero heading component.

More resources: