Personalize your survey with custom CSS

When you want to take the design of your survey a step further or if you want to align it with the internal house style, you can make use of custom CSS.

PAID MODULE Please note that custom CSS is a paid module. In case you want to know more about this, contact your customer success manager or email to support@hellocustomer.com.

IN THIS ARTICLE

Why custom CSS?

Custom CSS in the platform

Writing the custom CSS

1. Why custom CSS?

With custom CSS rules you can override the base styling of the survey. This option creates a lot of freedom to restyle the survey according to your company’s desires. Keep in mind that the custom CSS will only be applied to the survey page itself, but not for invitation and reminder emails.

Sounds good, right? However, custom CSS comes with some risks! We recommend always avoiding custom CSS if another option to apply the styling you want is readily available.

... back to top

2. Custom CSS in the platform

Custom CSS can be found both in the touchpoint set-up wizard (which opens automatically when you add a new touchpoint) and in the touchpoint settings.

Touchpoint set-up wizard

Go to the second step Template
Open the design section. There you will find the option to activate custom CSS for your survey.

Touchpoint settings

Step 1: Open the touchpoint settings overview

Option 1:

From the home screen of your Hello Customer account, click directly on the touchpoint settings icon of the touchpoint of your choice

In case of tiles: below the touchpoint name

In case of list: next to the touchpoint name

Option 2:

On the home page of your Hello Customer account, click Touchpoints on the left side

Step 2: Open the Survey design section by clicking on the lock symbol. A warning appears that your touchpoint will be temporarily out of production. Do not forget to re-activate your touchpoints after your updates are done!

... back to top

3. Writing the custom CSS

Before the custom CSS can be applied to the survey it of course needs to be written. Depending on the state of the touchpoint that can be done in the touchpoint-wizard, or in the template-design page. Once the new styling has been saved and the survey-preview has been refreshed or opening in a new browser, the custom styling will be applied to the page automatically.

When writing the custom CSS there are some things that you need to keep in mind:

Do not use the copy / paste functionality as this will not work
The custom CSS needs to be written as plain CSS.
Standard rules for CSS can be found here

There are a number of element-ids, classes and a number of cases attributes to help access the different parts of the survey. These can be used when writing the CSS. Also, using your developer's tools, usually accessible via F12, is a must!

Following list is an overview of CSS rules, using only ids and classes, that have an effect on the styling of the survey. These can of course be extended by using the relevant elements in the CSS rule.

#survey-footer .footer-container .powered-by p{ background-color:green; } <br>// example of a CSS-rule using id (#), class (.) and an element (p).

The list is not exhaustive, nor is it necessarily the sole option, but it should help to get you started.

Main page

#survey-background{}<br>#survey-background .wrapper{}<br>#survey-background .wrapper.popupstyle{ // only when using websiteIntegration type = popup}
#survey-background .wrapper .languageSelector // leads to a dropdown that has its own set of classes 
#survey-background .wrapper .progress-bar-container{} 
#survey-background .wrapper .progress-bar-container .progress-bar{} 
#survey-background .wrapper .line{} 
#survey-background .wrapper .body{} 
#survey-background .wrapper .body .question-items{} 
#survey-background .wrapper .body .question-items .question-item{} 
#survey-background .wrapper .submit-button{} 
#survey-background .wrapper .submit-button.popupStyle{} // only when using websiteIntegration type = popup #survey-background .footer{}

Page Items

#already-answered{} 
#already-answered .already-answered-container{} 
#already-answered .already-answered-container #already-answered-text{} 
 
#survey-footer{} // does the same as #survey-background .footer{} 
#survey-footer .footer-container{} 
#survey-footer .foooter-container .footer-text{} 
#survey-footer .footer-container .powered-by{} 
#survey-footer .footer-container .powered-by .image-container{} #survey-footer .footer-container .policies{}  

#survey-header{} 
#survey-header .image-container{} 

#survey-out-of-production{} 
#survey-out-of-production .out-of-production-container{}
#survey-out-of-production .out-of-production-container #out-of-production-text{}  

#survey-thank-you{} 
#survey-thank-you .thank-you-container{} 
#survey-thank-you .thank-you-container .image-container{} 
#survey-thank-you .thank-you-container #thank-you-title{} 
#survey-thank-you .thank-you-container #thank-you-text{} 
#survey-thank-you .thank-you-container #thank-you-html{} // leads to the HTML that can be optionally added in the survey design  

#survey-unsubscribe{} 
#survey-unsubscribe .unsubscribe-container{} 
#survey-unsubscribe .unsubscribe-container .unsubscribe-text{} 
#survey-unsubscribe .unsubscribe-container .unsubscribe-subtext{}  
#survey-unsubscribing{} #survey-unsubscribing .unsubscribing-container{} 
#survey-unsubscribing .unsubscribing-container .unsubscribing-title{} 
#survey-unsubscribing .unsubscribing-container .unsubscribing-text{} 
#survey-unsubscribing .unsubscribing-container .recaptcha-container{} // leads to the recaptcha widget 
#survey-unsubscribing .unsubscribing-container .button.navigation-button{} 
#survey-unsubscribing .unsubscribing-container .button.navigation-button.disabled{}

Question Items

The majority of the parts utilized to load the questions into the browser are largely standardized. This implies that you can choose to customize individual components or the majority of these items simultaneously using a single set of CSS rules. The following components follow that principle (they are mentioned by the prefix to be used in the CSS rules):

hc-questions-nps
hc-questions-ces
hc-questions-csat
hc-questions-department
hc-questions-multi-choice
hc-questions-open
hc-questions-profile
hc-questions-yes-no
hc-questions-zero-to-ten

Alternatively, we’ve added a custom attribute called data-name, which has a value of question-## where the hashtags represent the page and question. The numbering is index-based so it starts at zero (i.e. 00, 01, 10, etc.)

Usage according to the following example:

// general usage that affects all question-blocks using this class 
.question-score{} 
// specific usage that only affects that question-block 
hc-questions-nps .question-score{} 
// usage when utilizing the data-attribute 
hc-questions-zero-to-ten[data-name='question-01'] .question-score{} 
// or 
[data-name='question-00'] .question-score{} //with this notation every question can be reached without the need for the prefix

// for '.question', '.low-score-label', '.high-score-label', '.score-labels', '.footer' 
// it'll be required to use '!important' when using color and font-family properties

.question-score{} 
.question-score .question{} 
.question-score .question .isMandatory{} 
.question-score .score{} 
.question-score .score .score-buttons{} 
.question-score .score .score-buttons.useMobileButtonsLayout{} 
.question-score .score .score-buttons.useMobileButtonsLayout .mobile-score-label-group{} //only when the survey uses the vertical layout 
.question-score .score .score-buttons.useMobileButtonsLayout .mobile-score-label-group .low-score-label{} 
.question-score .score .score-buttons.useMobileButtonsLayout .mobile-score-label-group .high-score-label{} 
.question-score .score .score-labels{} //only when the survey uses the horizontal layout 
.question-score .score .error{} 
.question-text{} 
.question-text .question{} 
.question-text .question .isMandatory{} 
.question-text .answer{} 
.question-text .answer .input-field{} 
.question-text .answer .counter{} 
.question-text .answer .error{} .question-text .footer{} 

 // next block is mostly used in the profile question 
.question-text .input-group{} // will affect all input-groups 
.question-text ul li:nth-of-type(#) .input-group //this example will affect specific input-group on the profile question 
.question-text .input-group .input-label{} 
.question-text .input-group .input-label .isMandatory{} 
.question-text .input-group .input-field{} 
.question-text .input-group .error{} 
 
//for the datepicker question 
section .container{}  
section .container .date-question{} 
section .container .date-question .isMandatory{} 
section .container .date-container{} 
section .container .date-container .error{}  

// for the multiple-choice checkboxes.  
// it might be useful to prefix these with hc-questions-multi-choice or the correct attribute (data-name) 
.question-text .answer .container{} 
.question-text .answer .container .wrapper{} // :nth-of-type(#) can be used here 
.question-text .answer .container .wrapper.active{} 
.question-text .answer .container .wrapper input[type='checkbox']{} 
.question-text .answer .container .wrapper label{}   

// for the radio buttons 
// here too the prefix might be useful, especially if for example the multiple choice is also present 
.question-text .answer .container{} 
.question-text .answer .container .wrapper{} // :nth-of-type(#) can be used here 
.question-text .answer .container .wrapper.active{} 
.question-text .answer .container .wrapper input[type='radio']{} 
.question-text .answer .container .wrapper label{}   

// for the score buttons in questions 
// color and background-color will require '!important' to override the inline coloring 
// font-family will also need to be overwritten. 
hc-questions-nps button .survey-button{} 
hc-questions-nps button:nth-of-type(#) .survey-button{} // to change a specific button 
hc-questions-nps button .survey-button.isSelected{} 
hc-questions-nps button .survey-button.useMobileButtonsLayout{} // only when vertical layout is active   

// for the buttons that switch pages and handle submit 
// buttons with the class '.basic-button' will require the color and background-color  
// to use '!important' to override the inline styling 
hc-questions-submit-button-group .btn-container{} 
hc-questions-submit-button-group .btn-container .button.navigation-button{} 
hc-questions-submit-button-group .btn-container .button.basic-button{} 
hc-questions-submit-button-group .btn-container .button.basic-button.pressed{}  

// for the dropdowns 
#survey-background .wrapper .languageSelector // prefix that accesses the language-selector 
hc-questions-department .question-text .answer // prefix that accesses the dropdown 
[data-name='question-##'] .question-text .answer // prefix that accesses the dropdown using the data-name attribute 
.container{} 
.container .selection{} 
.container .selection .input-field{} 
.container .selection img{} // leads to the image of the chevron, you can overwrite via CSS 
.container .options li{} // :nth-of-type(#) accesses specific items in the list

Responsiveness

For responsiveness the survey uses the following standard widths to change visuals, but nothing prevents the user to define a specific width

@media only screen and (min-width: 320px/414px/744px/1400px)

Enforcing style

In some cases, the custom CSS may appear to be missing because of the hierarchy that CSS rules use. You'll likely need to override the styling that is being applied to the survey. You can enforce your styling by using the keyword "!important" to the styling rule.

For example:

.container{   
background-color: red !important; 
}