You can personalise 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.
❗️ 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.
💡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.
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.
// make the survey narrower
#survicate-box .sv__survey.sv__micro-theme {
width: 300px;
min-width: 300px;
}
// make the survey wider
#survicate-box .sv__survey.sv__micro-theme {
width: 800px;
max-width: 800px;
}
Manipulate the height of the chat window of the New light theme.
#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 {
background: url("https://survicate.com/wp-content/uploads/main/man-bg.jpg");
background-size: 100%;
background-repeat: no-repeat;
color: #ecf0f1;
}
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 * {
text-align: center;
}
Modify the text on the submit button.
#survicate-box .sv__micro-theme .sv__submit-button {
font-weight: 700;
color: #29292a;
font-size: 14px;
font-family: Open sans,sans-serif;
text-transform: uppercase;
}
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 {
margin: 0;
transform-origin: left bottom;
transform: rotate(270deg) translate(75%, 333px);
}
.sv__minimized.sv__mobile {
transform: rotate(270deg) translate(50%, 360px);
}
Customising the text on a minimised widget.
#survicate-box .sv__survey.sv__minimized {
font-size: 14px;
font-weight:100;
font-family: "Times New Roman";
}
Modifications for Email or Shareable link surveys
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;
}
💡Please note that 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