You can personalize elements of your survey with the custom CSS feature. Click Add custom CSS and fill the box with your custom properties. 

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

💡After you modify your CSS properly, don't forget to save your changes from Save Theme.

❗️ We can't provide support for the issues which are connected to the usage of custom CSS. Please consult your onboard developer team or try searching for a solution online.


CSS modifications for surveys

Here are some examples of available customizations and ready to use CSS codes:

1. Modifications for Website surveys

2. Modifications for Email and link surveys


Modifications for Website 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 centered widget. Text is aligned to the left by default, to change it use the following code.

#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 minimized survey widget to the right border of the page. Please note that only the minimized 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 minimize icon on a minimized widget

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

Customizing the text on a minimized widget

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

Modifications for email and link surveys

Use a chosen font, and change font size and weight in your survey page.

#survicate-box * {
font-family: Open Sans,sans-serif;
font-size: 14px;
font-weight: 300;
color: #29292a;
}

Set up a custom background for your survey page

#survicate-box {
background: url("https://survicate.com/wp-content/uploads/main/man-bg.jpg");
background-size: contain;
height: 100%;
color: #ecf0f1;
}


Change the progress bar size and background color

#survicate-box .sv__progress-bar {
height: 7px;
background-color: #eff3f5;
}

Move survey elements to a lower part of the page

#survicate-box .survicate_body_K3qRM {
margin-top: 10%;
}

Change the size of your company logo

#survicate-box .sv__logo img {
max-width: 500px;
max-height: 400px;
}

@media only screen and (max-width: 768px) {
#survicate-box .sv__logo img {
width: 100%;
max-width: 200px !important;
}}

Expand the text area in your text question

#survicate-box .sv__text-question {
height: 34px;
}

Did this answer your question?