Survey design and preview

To provide some personal touch to your survey, in the Design tab, you can:

  • Preview your survey
  • Add your company's logo
  • Change the colors and theme
  • Edit the survey buttons and messages for language flexibility
  • Add your custom CSS

1. Preview your survey

When you are done with adding your survey questions and setting your logic, on the right side of the design tab you can test your surveys’ experience like a respondent.

💡 If you are creating an email embedded survey, you can also switch between the page and email previews.

You can also test your survey's experience in different devices by switching between desktop, vertical and horizontal phone views using these buttons:

To add your logo to your survey, Click Add company logo and upload the file from your computer.

The picture will be added at the very top of the landing page,

You can also embed your surveys in email with your logo:

Design survey landing page theme

  • You can change the main color of your survey's page
  • Enable the progress bar to inform your users about the length of your survey.
  • Enable navigation button to let them return to their pass responses.
For your changes to take effect, don’t forget to “save your theme” before saving your survey.

Edit the text of the survey buttons and messages

You can alter the buttons and messages of your surveys under the text settings you will see at the bottom of your design tab. This will give you flexibility to survey your users in your desired language.

4. Website survey look

Design survey colors

It's very easy to adjust your survey's look to your website just by changing the colors with selector tool. Here is the list of customizable survey elements and their correspondence:

For your changes to take effect, don’t forget to “save your theme” before saving your survey.

Change button texts, position and survey overlay settings

  • If you are running a survey on a different language, you might want to change the text of your survey buttons. You can do this under Text Settings at the bottom of your design section.
  • It's also possible to define how your survey will start on different devices. You can set this by checking the tick boxes under Start minimized on. You can also customize this text for to add catchy message for your visitors by changing the Text on minimized survey box.
  • By default, website survey controls are set to appear at the bottom. This position is proved to improve response rate on your widgets. However, if you wish to change it you can see this settings under the "Other settings" at the bottom of your design page.
  • You can also disable and enable Close (x) and Minimize (-) buttons by checking their tick boxes.
  • If you are running surveys on full page, you might want to add a website fade out. You can set this in the drop down menu background overlay to dark overlay or light overlay.

5. Add your custom CSS

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

This feature available from the Professional Plan.
After you modify your CSS properly, your widget in the preview should change its look immediately. 
Ready-to-use CSS modifications

Here are some examples of available customization 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;
}

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

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

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

Customize the text on a minimized widget

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

Add a comment to the question

.surv-title::after { 
  content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
  display:block;
  font-size: 13px;
  color: #b6b6b6;
}

Add a disclaimer at the bottom of a survey

.surv-footer::after { 
  content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
  display:block;
  font-size: 13px;
  color: #b6b6b6;
}

💬 If you have any questions or need help, please feel free to reach out to our team.


Do you find this helpful?