You can personalise elements of your survey with the custom CSS feature on the website or in-product surveys and email or link surveys.

This feature is available from the Professional Plan. If you are interested in testing this feature, contact us at sales@survicate.com or strike up a chat conversation.

Table of content

  1. Add Custom CSS

  2. Modifications for Website or in-product surveys

  3. Modifications for email and link surveys

  4. Best practices

❗️ 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.

Add Custom CSS

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:

2. Enable Custom CSS toggle and paste your code by clicking the Add button

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.

#survicate-box .sv__survey {
  width: 290px;
}

Set up a custom background for your widget.

#survicate-box .sv-bg-bw {
  background: url("https://survicate.com/wp-content/uploads/main/man-bg.jpg") !important;
  background-size: 100%;
  background-repeat: no-repeat;
color: #ecf0f1;
}


Remove the shadow effect cast by the Survicate widget.

#survicate-box .sv__survey {

-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}


Center text on a centred widget. Text is aligned to the left by default; use the following code to change it.

#survicate-box .sv__survey.sv__position-center {
text-align: center;
}

Modify the text on the submit button.

#survicate-box .sv__submit-button {
font-weight: 700;
color: #29292a;
font-size: 14px;
font-family: Open sans,sans-serif;
}


Stick the minimised survey widget to the right border of the page. Please note that only the minimised widget will be moved. The survey will still open in the selected part of the page.

.sv__minimized {

bottom: 25% !important;
right: -38px !important;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
transform: rotate(270deg);
}

@media only screen and (max-width: 768px) {
.sv__minimized {
bottom: 25% !important;
right: -38px !important;
left: unset !important;
width: auto !important;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
transform: rotate(270deg);
}
}

Remove maximise icon on a minimised widget.

#survicate-box .sv__btn-maximize-plus { 
display:none;
}

Customising the text on a minimised widget.

#survicate-box .sv__survey.sv__minimized {
   font-size: 14px;
   font-weight:100;
   font-family: "Times New Roman";
}

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

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

Did this answer your question?