If you would like to evaluate Guides and Surveys, please reach out to a member of your account team.
Who can use this feature?
- Part of Guides and Surveys, an add-on for Business, Advanced, and Enterprise plans.
- Requires an Admin, Architect, or Standard role to configure.
Guides and Surveys is in active development. Product functionality and documentation may change without notice.
Guides and Surveys themes let you customize the visual appearance of your in-app content to match your brand, providing a unified user experience. Themes control the styling of tours, smart tips, checklists, banners, and surveys.
This article covers the following:
- Theme editor overview
- Creating a theme
- Predefined themes
- Setting a default theme
- Assigning themes to content
- CSS customization
- Frequently Asked Questions
Theme editor overview
The theme editor gives you complete control to customize tours, smart tips, checklists, and other Guides and Surveys elements. You can modify the primary colors, fonts, button positioning, or apply custom CSS to match your brand.
On the right side of the screen, a preview allows you to visualize your customized theme in real-time, with the option to switch between previews quickly.
There are common colors and styles applied across different content types to maintain a consistent look and feel. In addition, each content type supports its own specific color customization options, allowing more tailored visual adjustments.
Creating a theme
To create a new theme in Guides and Surveys:
- Navigate to Guides and Surveys > Themes.
- Click + Create new theme in the top-right corner.
Predefined themes
Guides and Surveys offers a selection of predefined themes. These themes let you select a ready-to-use design that suits your product's branding.
Setting a default theme
Umbrella managers can set a default theme across all Guides and Surveys content. Setting a default ensures that all new content — such as tours, smart tips, checklists, or surveys — automatically adopts this theme.
To set the default theme, click the 3 dots (…) next to the theme and choose Set as default theme.
Note: For Umbrella accounts, Umbrella Managers have additional theme capabilities. Umbrella Managers can set a default theme and make themes available to other Fullstory accounts within the Umbrella. To make a theme available across accounts, open the theme editor and click Settings to select the accounts where the theme should be available. For more details on role permissions, see Guides and Surveys: User Roles and Permissions.
Assigning themes to content
Once your theme is ready, assign it to specific content (such as tours, smart tips, checklists, and surveys) through the content settings section.
CSS customization
The theme editor covers common styling options, but to fully match your brand you'll likely need custom CSS — for example, adjusting transparency, corner rounding, pointer styles, or other details that aren't exposed in the editor. Custom CSS gives you full control over the appearance of your Guides and Surveys content.
To add custom CSS, open a theme and navigate to the bottom of the Edit theme panel on the left side. Click the Custom CSS button. You can edit the existing CSS or append new CSS to the bottom.
In the CSS examples below, #{$classNamePrefix} is the SCSS interpolation variable that references the CSS class name prefix used by Guides and Surveys components. Use this variable in your custom CSS to target specific UI elements.
Note: The values highlighted in the examples below (such as colors, pixel values, and opacity) are customizable. Replace them with your own values to match your brand.
Background color and transparency
| CSS | Preview |
|---|---|
.#{$classNamePrefix}-modal-inner,
.#{$classNamePrefix}-bubble,
.#{$classNamePrefix}-slideout-inner,
.#{$classNamePrefix}-notification-inner {
background: rgba(255, 255, 255, 0.4);
}
.#{$classNamePrefix}-bubble.top .pointer-below {
border-top-color: rgba(255, 255, 255, 0.4);
}
.#{$classNamePrefix}-bubble.left .pointer-below {
border-left-color: rgba(255, 255, 255, 0.4);
}
.#{$classNamePrefix}-bubble.right .pointer-below {
border-right-color: rgba(255, 255, 255, 0.4);
}
.#{$classNamePrefix}-bubble.down .pointer-below {
border-bottom-color: rgba(255, 255, 255, 0.4);
}
.#{$classNamePrefix}-content {
background: transparent;
}
|
Fully-rounded buttons
| CSS | Preview |
|---|---|
.#{$classNamePrefix}-button {
border-radius: 20px;
}
|
Elements without rounded corners
| CSS | Preview |
|---|---|
.#{$classNamePrefix}-modal,
.#{$classNamePrefix}-modal-inner,
.#{$classNamePrefix}-bubble,
.#{$classNamePrefix}-bubble-inner,
.#{$classNamePrefix}-slideout,
.#{$classNamePrefix}-slideout-inner,
.#{$classNamePrefix}-notification,
.#{$classNamePrefix}-notification-inner,
.#{$classNamePrefix}-title {
border-radius: 0 !important;
}
|
Change border color of pointer (bubble arrow)
| CSS | Preview |
|---|---|
.#{$classNamePrefix}-bubble { |
To customize button positioning, see the button positioning documentation (link to additional documentation to be updated when available).
Frequently Asked Questions
What does #{$classNamePrefix} mean in the CSS examples?
#{$classNamePrefix} is an SCSS interpolation variable that references the CSS class name prefix used by Guides and Surveys UI components. The examples throughout this article use this variable to target specific elements like modals, bubbles, slideouts, and notifications.