Skip to Content
Administrators & Analysts
Create and use style themes
When creating custom CSS overrides for a web or mobile assistant, you may want to create different themes so that each touchpoint can be styled differently.
Follow the guide below to create and use style themes.
1
Add a "styles" override
If there is not already a "styles" textarea in the "CSS Overrides" section, click the "Add CSS Override" dropdown and select "styles".
2
Create the wrapper rule for the theme
CSS rules for a theme must be wrapped in a special rule that indicates which theme the rule is for.
The format is &[data-theme-id="<THEME>"] { } with the theme's name in place of "<THEME>".
For example, this override will create a theme called "mobile":
3
Add the style rules for the theme
Inside the wrapper rule, add the styles that should be in place for this theme.
For example, this override makes h2 elements have red text in the "mobile" theme.
4
Check the behavior in the preview
In the dropdowns above the preview, select the theme to test and a flow to test it on. The preview will display the selected flow in the selected theme.
For example, this flow is being previewed in the "mobile" theme in which h2 elements to have red text.
5
Save the changes
When the CSS is as desired, click "Save changes". This will push them live, and any themes that have been created will be available for use.
6
Select the desired theme in the touchpoint settings
Go to the settings for the web or mobile touchpoint that should use the theme. As long as at least one theme is saved, the "Appearance" section will have a "Theme" dropdown allowing you to pick a theme for that touchpoint to use.
You can preview the touchpoint in the selected theme, and publish the change when ready. Once published, new conversations from that touchpoint will display in the selected theme.