CSS for Surveys
Brief Overview
Cascading Style Sheets (CSS) allows you to apply advanced customization to Surveys including elements such as the font, background, and border.
CSS can be used to customize Surveys and NPS Surveys:
- Action and Close buttons
- Text for Title
- Text
- “X” button
How It Works
Cascading Style Sheets (CSS) is a style sheet language used for describing the formatting of a document written in a markup language. When writing CSS, you will need to refer to the different components (technically known as elements) of the Survey. When typing into the Custom CSS window, WalkMe displays autocomplete options for selectors, properties, and values.
Settings Breakdown
Configuring Balloon Components
Each Survey includes a number of components (elements) that can be customized with CSS. For example, you can target the title section of a Survey by using this class: .wm–survey-title (see below for a full list of classes).
Global Rules
Global CSS for surveys can be added in the Customize menu:
Finding Survey ID
- Hover over the name of your Survey
- Navigate to the Pencil Icon
- Click on “Copy ID”
Using !important
By default, the WalkMe theme design overrides any other design changes to a balloon or app. In order for CSS to be applied, the CSS rule must contain “!important” to ensure that it overrides the default styling.
For example:
#walkme-survey-balloon-37897 .walkme-survey-title {
color: #000 !important;
}
Configurable Survey Components
| DIV | EDITABLE FEATURES | |
| 1 | #walkme-survey-balloon-37897 | This element is the main portion of the survey. You’ll be able to edit:
|
| 2 | .walkme-survey-title | This element is the main title for the survey. You’ll be able to edit:
|
| 3 | .walkme-survey-question-title | This element is the Survey question(s). You’ll be able to edit:
|
| 4 | #walkme-survey-answer-text-XXXXXX | This element is the survey answers. You’ll be able to edit:
|
| 5 | #walkme-survey-answer-radiobutton-110079 | This element is the radio buttons for the answers. You’ll be able to edit:
|
| 6 | .walkme-click-and-hover.walkme-custom-balloon-close-button.walkme-action-close.walkme-inspect-ignore | This element is the Close button. You’ll be able to edit:
|
| 7 | .walkme-custom-balloon-content-wrapper | This element is the general selector for all the content/text in the survey. You’ll be able to edit:
|
Configurable NPS Survey Components
| DIV | EDITABLE FEATURES | |
| 1 | .walkme-survey-question-nps-answers | This element are all the answers in your NPS survey (typically from 0-10). You’ll be able to edit:
|
| 2 | .walkme-survey-nps-answer selected .walkme-survey-answer-label-nps-radiobutton | This element is the selected NPS answer. You’ll be able to edit:
|
| 3 | .walkme-survey-low-score-div span or walkme-survey-high-score-div span | This element is the high and low score labels on either end of the balloon. You’ll be able to edit:
|
| 4 | .walkme-custom-side-border | This element is the side border for the survey. You’ll be able to edit:
|
Common Survey CSS Customizations
Change the font size of Survey Title
#walkme-survey-id-XXXXXX .walkme-survey-title {
font-size: XXpx !important;
}
Change Color of Sidebar and Submit button
#walkme-survey-balloon-XXXXX .walkme-custom-side-border{
background-color: #XXXXXX !important;
}
#walkme-survey-balloon-XXXXX .walkme-custom-balloon-submit-button{
background-color: #XXXXXX !important;
}
Change or Fix Margin of the NPS choices (1-10)
#walkme-survey-question-nps-answers-XXXX .walkme-survey-nps-answer {
margin: Xpx !important;
}
Change the font of the survey questions
#walkme-survey-balloon-XXXXX .walkme-custom-balloon-content {
font-family: (font here) !important;
}
Change the color of NPS survey answers
.walkme-survey-question-nps-answers.selected .walkme-survey-nps-answer.selected label {
background: XXX !important;
border-color: XXX !important;
}
Change the color of NPS survey answers when hovered over
.walkme-survey-answer-label-nps-radiobutton.walkme-survey-answer-label-nps-radiobutton-unchecked:hover {
background: XXX !important;
border-color: XXX !important;
}
