Theming Nudges
Nudges, like everything in Command AI, can be styled to match the underlying aesthetic of your app. Typically, nudges are styled in two levels:
- Most Command AI customers will create a default theme that captures their app's design system. This default theme will be used automatically for any nudges you create.
- Sometimes, you might want to tweak specific elements of a particular nudge. Those changes might be one-off (you want this particular nudge to look a specific way) or reusable (you want a certain type of nudge to look a specific way)
Read on to learn more about 2.
Overriding a nudge's theme
To override or customize a nudge's theme, click the "Customize" button in the top right while editing the nudge. This will open up an interface that allows you to tweak various properties of the nudge.
Custom themes can be used for all Nudges: Tours, Surveys, Announcements, HelpHub, and Spotlight.
When done, the nudge will use the properties you just set. If you want to revert the changes, you can go to the settings section of the nudge and re-select your default theme (or any other theme) from the list.
If you want to use the same theme you just created for another nudge, you can do so by going to that nudge and using the theme you just created as the nudge's custom theme.
Note that you can also edit the theme by going to the Themes section of the dashboard and editing the theme from there. This interface will also let you see which experiences the theme is being used for.
FAQs
How do fonts work in themes?
While Command AI is magical, we will not auto-magically load/add fonts to your app! We re-use the ones that are already installed.
Let's say you want to use some font "AwesomeSauce" in your theme. That's great, let's do it. The only pre-requisite is that the "AwesomeSauce" font is already installed in your app.
Why do the fonts look weird on the dashboard?
For select Google fonts, you can preview the font in the dashboard. For all other fonts, you have to install the font locally on your machine in order for the font to display as expected.