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

#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 size of your chat window and make it wider or narrower

//Make the survey narrower

#survicate-box .sv__survey.sv__micro-theme {
width: 900px;
min-width: 500px;
}

// Make the survey wider

#survicate-box .sv__survey.sv__micro-theme {
width: 800px;
max-width: 8
}

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

#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.

Center text on a centered widget

#survicate-box .sv__micro-theme .sv__point .sv__point-text.sv__point-question { text-align: center; }

Please note text is aligned to the left by default.

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.

Customizing the text on a minimized widget

#survicate-box .sv__survey.sv__micro-theme.sv__minimized .sv__minimized__text { 
font-size: 18px; 
font-family: monospace; 
font-weight: 900; 
}

Change the size for minimized Feedback Button

#survicate-box .sv__survey.sv__micro-theme {width: 250px;min-width: 100px;}

Rotate the second thumbs icon in the rating scale

#survicate-box .sv__survey.sv__micro-theme .sv__rating__buttons .sv-rating.sv__button[data-value="2"] svg {
  transform: rotateX(180deg)
}

#survicate-box .sv__survey.sv__micro-theme .sv__rating__buttons .sv__rating__number {
  display: none
}

Change Smiley scale order

#survicate-box .sv__survey .sv__smiley-scale__buttons, .sv__smiley-scale .sv__labels { flex-direction: row-reverse; }

Modifications for Email or Shareable link surveys

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 progress bar size and background color

#survicate-box .sv__footer-container,
#survicate-box .sv__progress-bar-container {
  background-color: #D6B4FC;
}

Change the size of your company logo

#survicate-box .sv__logo img {
  max-height: 100px;
  max-width: 200px;
}

Expand the text area in your text question

#survicate-box .sv__text-question .sv__textarea {
  min-height: 200px;
}

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

#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;
}

Change the color of the rating buttons when selected

#survicate-box .sv__rating__wrapper .sv__buttons .sv__button--selected svg {
fill: #171d1a
}

#survicate-box .sv__rating .sv__button svg:hover {
fill: #171d1a
}

Rotate the second thumbs icon in the rating scale

#survicate-box .sv__survey .sv__rating__buttons .sv-rating.sv__button[data-value="2"] svg {
  transform: rotateX(180deg)
}

#survicate-box .sv__survey .sv__rating__buttons .sv__rating__number {
  display: none
}

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.

Design your survey look and colors

Design your website survey theme and settings

Design your survey page and embedding code, and set up survey settings

Create and customize a survey for your mobile app

Screenshot feature for Website surveys