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.
💡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.
Please note that we do not provide support for custom CSS-related issues. We recommend consulting your onboard development team or exploring online resources for possible solutions.
Add Custom CSS
Move to Create ➡️ Design tab of your survey and pick the template you'd like to add the CSS.
Enable the Custom CSS toggle and paste your code with the Add button.
After you modify your CSS, save your changes by clicking Update Theme.
Save your changes with the Publish button.
📌 When adding CSS for the first time, remember to remove the example provided in the field.
Modifications for Website or in-product surveys
Use a chosen font and change the font size and weight in your widget
Use a chosen font and change the font size and weight in your widget
#survicate-box * {
font-family: Monospace;
font-size: 14px;
font-weight: 100;
}
If you want to change the size of the text Not likely and Very likely , you can use the code below:
#survicate-box .sv__nps .sv__labels .sv__label--left,
#survicate-box .sv__nps .sv__labels .sv__label--right {
font-size: 16px; }
Manipulate the height of the widget for the New light theme
Manipulate the height of the widget for the New light theme
#survicate-box.survicate-box-WidgetSurvey .sv__micro-theme.sv__survey {
max-height: unset;
}
#survicate-box .sv__micro-theme .sv__point-wrapper .sv__scroll-container {
max-height: 500px;
}
Set up a custom background for your widget
Set up a custom background for your widget
#survicate-box .sv__survey {
/* Add a custom logo as the background */
background: url("https://developers.survicate.com/logoDark.svg") no-repeat center center;
/* Set the background image size to 80% of the survey */
background-size: 30%;
}
Don't forget to customize the background-size
according to your needs.
Modify the color on the submit button
Modify the color on the submit button
🪄 You can also modify the font with this code.
Pop-up format - without navigation button:
#survicate-box.survicate-box-WidgetSurvey .sv__micro-theme .sv__submit-button:not(.sv__navigation-button--back) {
font-weight: 700;
color: white;
background-color: green !important;
font-size: 19px;
font-family: Open sans,sans-serif;
text-transform: uppercase;
};
Pop-up format - with navigation button:
#survicate-box.survicate-box-WidgetSurvey .sv__micro-theme.sv__survey .sv__navigation-button {
font-weight: 800;
color: white;
background-color: green;
border-color: green;
font-size: 16px;
font-family: Open sans, sans-serif;
text-transform: uppercase;
};
Feedback button format - without navigation button:
#survicate-box.survicate-box-FeedbackButton .sv__micro-theme .sv__submit-button:not(.sv__navigation-button--back) {
font-weight: 700;
color: white;
background-color: blue !important;
font-size: 14px;
font-family: Open sans,sans-serif;
text-transform: uppercase;
};
Feedback button format - with navigation button:
#survicate-box.survicate-box-FeedbackButton .sv__micro-theme.sv__survey .sv__navigation-button {
font-weight: 800;
color: white;
background-color: green;
border-color: green;
font-size: 16px;
font-family: Open sans, sans-serif;
text-transform: uppercase;
};
Enabling survey navigation will let your respondents return to their past responses and change their response submissions.
To add this button open Create ➡️ Settings ➡️ Navigation.
Modifications for Email or Shareable link surveys
Use a chosen font, and change font size and weight on your survey page
Use a chosen font, and change font size and weight on your survey page
@import url('https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Arrows:wght@400..700&display=swap');
#survicate-box * {
font-family: "Edu AU VIC WA NT Arrows", cursive;
font-optical-sizing: auto;
font-size: 14px;
font-weight: 300;
color: #29292a;
}
If you want to change the size of the text Not likely and Very likely , you can use the code below:
#survicate-box .sv__nps .sv__labels .sv__label--left,
#survicate-box .sv__nps .sv__labels .sv__label--right {
font-size: 16px;
}
Change the size of your company logo
Change the size of your company logo
#survicate-box .sv__logo img {
max-height: 100px;
max-width: 200px;
}
Edit the button NPS® colors of the survey
Edit the button NPS® colors of the survey
#survicate-box .sv__nps button:first-child,
#survicate-box .sv__nps button:nth-child(2) {
background-color: #B72125;
}
#survicate-box .sv__nps button:nth-child(3),
#survicate-box .sv__nps button:nth-child(4) {
background-color: #F15223;
}
#survicate-box .sv__nps button:nth-child(5),
#survicate-box .sv__nps button:nth-child(6) {
background-color: #FAA824;
}
#survicate-box .sv__nps button:nth-child(7),
#survicate-box .sv__nps button:nth-child(8) {
background-color: #EDDC13;
}
#survicate-box .sv__nps button:nth-child(9),
#survicate-box .sv__nps button:nth-child(10) {
background-color: #C5D92E;
}
#survicate-box .sv__nps button:nth-child(11) {
background-color: #64B64D;
}
Make an NPS® border colorful
Make an NPS® border colorful
#survicate-box .sv__nps .sv__button:first-child {
border: 2px solid red;
}
#survicate-box .sv__nps .sv__button:nth-child(2) {
border: 2px solid red;
}
#survicate-box .sv__nps .sv__button:nth-child(3) {
border: 2px solid red;
}
#survicate-box .sv__nps .sv__button:nth-child(4) {
border: 2px solid red;
}
#survicate-box .sv__nps .sv__button:nth-child(5) {
border: 2px solid red;
}
#survicate-box .sv__nps .sv__button:nth-child(6) {
border: 2px solid red;
}
#survicate-box .sv__nps .sv__button:nth-child(7) {
border: 2px solid yellow;
}
#survicate-box .sv__nps .sv__button:nth-child(8) {
border: 2px solid yellow;
}
#survicate-box .sv__nps .sv__button:nth-child(9) {
border: 2px solid green;
}
#survicate-box .sv__nps .sv__button:nth-child(10) {
border: 2px solid green;
}
#survicate-box .sv__nps .sv__button:nth-child(11) {
border: 2px solid green;
}
How to make changes to the Email template of the survey?
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.