You can personalise elements of your widget with a custom CSS feature. To use custom CSS you need to go to the Design section of your survey, click Add custom CSS and fill the box with your custom properties. 

After you modify your CSS properly, your widget in the preview should change it's look immediately. 

Ready-to-use CSS modifications

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

Manipulate the size of your chat window and make it wider or narrower

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

Set up a custom background for your widget.

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

Changing the minimize icon from a long dash ( — ) to a close ( X )

#survicate-box .surv-close {
  visibility: hidden;
  margin-top: 5px;
  position: absolute;
  right: 0;
  cursor: pointer;
  z-index: 10;
}

#survicate-box .surv-close:after {
  visibility: visible;
  content: '';
  color: #DA0069;
  margin-right: 8px;
  padding-top: 14px;
}

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 center of the page.

#survicate-box.survicate-widget.surv-hidden {
  bottom: 50% !important;
  right: -107px !important;
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
}

Remove the shadow effect cast by the Survicate widget.

#survicate-box .surv-window{
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

Use your own font in our widgets.

#survicate-box{
  font-family: "Times New Roman", Georgia, Serif !important;
}

Change the size of the text in our widgets.

#survicate-box{
  font-size: 20px;
}

Change the text to bold in our widgets.

#survicate-box{
  font-weight:600;
}

Centering text on a centered widget. Text is aligned to the left by default, to change it use the following code.

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

Customizing the “+” icon on a minimized widget

#survicate-box.surv-hidden .surv-closed{
   background-image: url();
   background-size: 20px;
   background-repeat: no-repeat;
   background-position: 97% 50%;
}
#survicate-box .surv-closed .surv-maxbtn{
   visibility:hidden;
}

Customising the text on a minimized widget

#survicate-box.surv-hidden .surv-closed{
   font-size: 20px;
   font-weight:600;
   font-family: "Times New Roman";
}

Did this answer your question?