Skip to Content
Support Hub
Administrators & AnalystsCustomize the assistant's appearance

Administrators & Analysts

Customize the assistant's appearance

These instructions only apply to web and mobile assistants. For customizations to a Site, see Customize your site.

1
Navigate to Settings by clicking the hamburger menu in the top left and selecting "Settings".

2
Under "Assistant", select "Appearance".

3
This will take you to the assistant appearance page. The settings are on the left side and a preview of the assistant is on the right.

Button Settings

When not open, the Mavenoid assistant shows a floating button that can be clicked to open the assistant. The appearance of this button can be changed in several ways:

  • You can specify hex codes for the background and icon colors to use.

  • Several default icons and text labels are provided. You can edit, remove, or add ones in SVG format.

Assistant greeting

If toggled on, this will cause a configurable greeting message to be displayed after a set period of time if the assistant has not been interacted with.

CSS Overrides

Specify custom CSS to change the assistant's appearance to fit your branding and style guide.

Much of the assistant uses machine-generated classnames that look like ma-default-1anileb. We do not recommend using these classnames for custom CSS as they can change unpredictably between Mavenoid releases.

Human-readable classnames are safer to use. The following classnames are officially supported and can safely be used in custom CSS; other human-readable classnames are not officially supported and may (rarely) change. If you have any questions about which classnames are safe to use, contact support.

  • "button"

  • "button--secondary"

  • "button--tertiary"

  • "checkbox"

  • "chip"

  • "link-button"

  • "choice-button"

  • "choice-button--text"

  • "choice-button--img"

  • "choice-button--inline-img"

  • "choice-button--primary"

  • "choice-button--grid"

  • "choice-button--list"

  • "choice-button__subtitle"

  • "native-select"

  • "show-more-button"

  • "switch"

  • "text-area"

  • "text-input"

  • "text-input--regular"

  • "text-input--round"

  • "upload-button"

  • "card"

  • "card--live-support"

  • "card--external-script"

  • "card--fts"

  • "card--session-restore"

  • "card--session-summary"

  • "card--spinner"

  • "card--loader"

  • "card--live-support-loader"

  • "card--live-support__welcome-image"

  • "card--question"

  • "card--product-picker"

  • "card--session-feedback"

  • "card--cookie-fence"

  • "card--copy-content"

  • "card-wrapper"

  • "card-outer"

  • "card-outer--retrieval"

  • "card-outer--solution"

  • "card-outer--session-feedback"

  • "card-outer--live-support"

  • "card-wrapper--aggregated"

  • "card-inner"

  • "conversation-bubble"

  • "fts-search-input"

  • "fts-search-input--default"

  • "fts-search-input--sparkly"

  • "card-inner__title"

  • "card-outer__title"

  • "card__image-button-grid"

  • "options-title"

  • "markdown"

  • "powered-by"

  • "guide-linear-steps"

  • "guide-step"

  • "guide__title"

A few advanced things you can do with CSS overrides:

Note that CSS overrides only affect the assistant's contents. if you need to change how the assistant interacts with the rest of the page, you will likely need to apply those changes in the context of the containing page instead.

Need more help?

Ask a different questionAdministrators & Analysts
Select a different product
© 2025 Mavenoid ABSitemap
Terms of servicePrivacy policyCookie policyData processing agreement