Skip to main content

Theming overview

Appearances matter. In life and in user assistance. For users to find value in the user assistance experiences you build with Command AI, we believe they must:

  1. Look engaging and inviting
  2. Feel like a native extension of your product (not a spammy layer grafted on top of it)

To achieve these goals, Command AI includes a pretty cool theming system. You can find it on the bottom left of your dashboard, under “Themes”.

How are themes structured in Command AI​

In Command AI, a Theme (capital T) represents how experiences you create with Command AI will look to your end users. Themes are distinct objects from experiences. You can have one theme that informs how every one of your Command AI experiences (Copilot, HelpHub, Spotlight, and all your Nudges) appear. Or you can have individual themes that control the appearance of one or a subset of your experiences.

The way themes are structured in Command AI is meant to mimic a typical design system. There are two parts to every theme:

  • Base values: things like brand color, font family, border radii, general padding and gap sizes, etc. A small number of values that control the look and feel of everything. You specify base values once, and then they flow through to many places.
  • Components: various UI elements that appear in one or multiple places in Command AI. things like buttons, survey inputs, etc. These inherit base values but can be overridden to achieve specific style goals. They can be edited visually or with CSS, including all states (hover, focus, etc).

Editing themes​

Once you click into the Themes section of the Dashboard, you’ll see a list of your current themes. Click one to edit, or create a new one. You’ll find your Default theme situated at the top of this screen. Each theme will also show you the experiences that are currently using it, so you can differentiate between themes that are being used for testing and those used for live experiences.

Once you click into a theme, you’ll see two tabs: one for editing the Base values and one for editing Components.

The Base view contains a cool screen we call the tableau (we are fancy like that). The tableau shows you a view of every possible experience. You’ll find Copilot, HelpHub, Spotlight, and Nudges that feature various blocks. The goal of the Tableau is to showcase how changes to base value flow through to the various experiences. Note that the elements you see in the Tableau are not “your” experiences (they don’t include your content); they’re placeholders. They’re interactive so you can experience how styles appear in different interactions states. For example, they’re hover-able (i.e. you can see hover states when you hover).

(Side note: if you want to get inspired by what Command AI can do, especially the different types of nudges you can build, the tableau is a great place to seek it!)

The Component view shows you every component and lets you edit their values on the right. You can toggle between the different states of a component (default, hover, focus, etc) with the menu in the top right of each.

Editing tips​

A few tips to keep in mind.

Note that once you edit component values, you will break the inheritance relationship between Component values and Base values. However, you can re-establish it using the handy reset button.

Changes are saved automatically; you’ll need to publish those changes (big blue 🚀 Publish button) before they’ll be live for end-users.

If you ever want to revert a field to its previous value, you can do that with the little “rewind” icon that appears next to a property after you’ve edited it (it will revert to the last value that was saved).

FAQ: Can I have multiple themes?​

Yes, go crazy! You’ll need at least one theme at any time to be your Default theme. That’s the theme that will be used by default for your Assist experiences (Copilot, Spotlight, HelpHub) and will be used by default when you create a new Nudge.

Beyond the Default theme, you can create any number of themes. Here are some common reasons you might want to create multiple themes.

  1. You can use your non-default themes either to experiment with new theming ideas in a way that won’t leak through to your live experiences (like a sandbox theme).
  2. You can create individual themes for the purpose of styling some experience. For example, maybe you want to style Copilot independently of your nudges. You could create a Copilot theme and a Nudges theme. Or, you might want a certain set of nudges to be styled differently. For example, “we want upsell or conversion oriented nudges to have a specific look and feel that is distinct from our other nudges”.
  3. You have multiple products / environments with distinct underlying themes.

FAQ: Can I customize the positioning of HelpHub/Copilot?​

By default, HelpHub/Copilot opens up in the bottom right (regardless of where you position your launcher). While users can drag it around to wherever they want, there are some cases where you want to control its exact positioning.

This is possible with a little help from your code! You can take advantage of the unique ID helphub-modal for HelpHub/Copilot and position it wherever you want.

#helphub-modal {
  /* custom styling */
}