You can personalize elements of your survey with the custom CSS feature on the Website or in-product surveys and Email or Shareable link surveys.
📌 This feature is available on some of the plans. Please visit our Pricing page or reach out to us to learn more.
❗️ We can't provide support for the issues connected to the usage of custom CSS. Please consult your onboard developer team or try searching for a solution online.
💡To find the class of the survey element you wish to modify with CSS, open Devtools by clicking on the preview of the survey on the right side of the Create tab and find the name of the class in Devtools by inspecting the element.
Add Custom CSS
Step 1. To add your Custom CSS, move to Create ➡️ Design tab of your survey and pick the template you'd like to add the CSS:
Step 2. Enable Custom CSS toggle and paste your code by clicking the Add button
Step 3. After you modify your CSS, save your changes by clicking Update Theme.
Modifications for Website or in-product surveys
Use a chosen font, and change font size, weight, and color in your widgets.
#survicate-box * {
font-family: Open Sans,sans-serif;
font-size: 14px;
font-weight: 100;
color: #29292a;
}
Manipulate the size of your chat window and make it wider or narrower.
// make the survey narrower
#survicate-box .sv__survey.sv__micro-theme {
width: 300px;
min-width: 300px;
}
// make the survey wider
#survicate-box .sv__survey.sv__micro-theme {
width: 800px;
max-width: 800px;
}
Manipulate the height of the chat window of the New light theme.
#survicate-box .sv__micro-theme .sv__point-wrapper .sv__scroll-container {
max-height: 500px;
}
Set up a custom background for your widget.
#survicate-box .sv__survey {
background: url("https://survicate.com/wp-content/uploads/main/man-bg.jpg");
background-size: 100%;
background-repeat: no-repeat;
color: #ecf0f1;
}
Center text on a centered widget. Text is aligned to the left by default; use the following code to change it.
#survicate-box .sv__survey * {
text-align: center;
}
Modify the text on the submit button.
#survicate-box .sv__micro-theme .sv__submit-button {
font-weight: 700;
color: #29292a;
font-size: 14px;
font-family: Open sans,sans-serif;
text-transform: uppercase;
}
Customizing the text on a minimized widget.
#survicate-box .sv__survey.sv__minimized {
font-size: 14px;
font-weight:100;
font-family: "Times New Roman";
}
To make the NPS® scale in a Website or in-product survey appear horizontally when opened on a mobile device, use this code:
#survicate-box .sv__micro-theme .sv__nps .sv__buttons {
display: flex;
flex-direction: row;
}
To target a specific number of the NPS question, feel free to use the below code, changing the number in the bracket:
#survicate-box .sv__micro-theme .sv__nps button:nth-child(1)
Modifications for Email or Shareable link surveys
Use a chosen font, and change font size and weight on your survey page.
#survicate-box * {
font-family: Open Sans,sans-serif;
font-size: 14px;
font-weight: 300;
color: #29292a;
}
Change the progress bar size and background color.
#survicate-box .sv__progress-bar-fill {
height: 7px;
background-color: #eff3f5;
}
Move survey elements to a lower part of the page.
#survicate-box .sv_body {
margin-top: 10%;
}
Change the size of your company logo.
#survicate-box .sv__logo img {
max-width: 500px;
width: 500px;
max-height: 400px;
}
@media only screen and (max-width: 768px) {
#survicate-box .sv__logo img {
max-width: 500px;
width: 500px;
max-height: 400px;
}}
Expand the text area in your text question.
#survicate-box .sv__text-question {
height: 34px;
}
Edit the button NPS colors of the survey.
#survicate-box .sv__nps button:first-child { background-color: #B72125; } #survicate-box .sv__nps button:nth-child(2) { background-color: #D62127; } #survicate-box .sv__nps button:nth-child(3) { background-color: #F15223; } #survicate-box .sv__nps button:nth-child(4) { background-color: #F36F22; } #survicate-box .sv__nps button:nth-child(5) { background-color: #FAA824; } #survicate-box .sv__nps button:nth-child(6) { background-color: #FFCA28; } #survicate-box .sv__nps button:nth-child(7) { background-color: #EDDC13; } #survicate-box .sv__nps button:nth-child(8) { background-color: #E8E83D; } #survicate-box .sv__nps button:nth-child(9) { background-color: #C5D92E; } #survicate-box .sv__nps button:nth-child(10) { background-color: #AFD236; } #survicate-box .sv__nps button:nth-child(11) { background-color: #64B64D; } #survicate-box .sv-col-fa { color: #ffffff; }
💡Please note that the above CSS modifications will be visible in your Email or Shareable link survey when it's opened in a browser on any device.
However, these changes will not be reflected in the survey's first question if it's embedded in an email's body with the HTML code.
To apply advanced design modifications to the HTML code (and, with that, to the embedded question), first, copy the code from the survey's Share tab.
Then, paste the code into your email editor and modify the parts of the code you wish to change, such as font-family, text-align, and so on.
❗️Please remember not to delete any part of the survey links in the <a href="..."> parts of the code, as it may prevent the survey responses from being saved.
Best Practices
Customise your survey questions
Add images to your survey to maximise visual clues and design your survey look and colors to make your survey stand out and match your brand.
Personalise your survey template
Learn how to design your survey and adjust the template to suit your brand.
📞 If you have any questions or need assistance - feel free to reach out to our team via chat or email: support@survicate.com.
Net Promoter, NPS, and the NPS - related emoticons are registered U.S. trademarks, and Net Promoter Score and Net Promoter System are service marks, of Bain & Company, Inc., Satmetrix Systems, Inc. and Fred Reichheld.