In the Create tab, you can prepare the layout for your survey by adding your questions, changing its theme, and setting up survey settings. In this article, we will walk you through altering your survey look by:

changing the theme colors to ensure it's completely in line with your company's branding;
adjusting your survey settings, such as positioning your survey on different parts of the page, setting up overlay options, or customizing survey message copy.

This article shows how to customize the widget survey design. If you want to learn first how to create the survey or install the Survicate tracking code on your website, please navigate to one of the sections below.

Install tracking code

Standard themes

It's very easy to adjust your survey's look to your website just by playing with the selector tools in the Design tab. There, you'll find our standard themes for your survey.

Feel free to use any of the ready themes for your survey, or keep reading to learn how to customize the survey's look and design.

Customize a theme for your survey

1. To create your own theme, click the Create new button.

You can also use and edit an existing theme:

💡 If the theme you are using is currently used in any other surveys, you will see a notification:

In this case, please remember that any changes you make to this template will apply to all surveys running on that particular template.

If you don't wish to update all the surveys but only your particular survey, then you can easily duplicate your theme and make changes to this theme instead.

2. You can name your theme and see the color selectors. You can adjust the colors of specific elements (questions, answers, background, and so on):

As you can see, it's possible to add both a Light and a Dark theme to your survey.

❗ If you're using the Survicate NPM package to add surveys to your website, this feature is available starting from version 28.16.0.

On your website, the survey's design (dark vs. light) will align with the browser preference of your respondent.

If, for any reason, you'd like to override it, you can do so via code, as described in this documentation and here.

In the main view of the Create tab, you can switch not only between desktop and mobile views, but between dark and light modes as well:

To stop using the Light or Dark theme in your survey, toggle it off:

3. In the Font section, you will see some fonts available to select:

They are divided into 3 categories:

System fonts
General-purpose fonts
Language-specific fonts

When any of those fonts is selected in the theme settings, it’s applied automatically to the live survey, without the need for additional code work.

If you would rather apply a font that is not on the list, you can do so via custom CSS (adding Custom CSS is explained in the next paragraph).

CSS code to add custom font.

a. If the font is already on your site

If the font is already loaded on your page (e.g. in your main stylesheet), you only need to reference it in Custom CSS. No @font-face is required:

#survicate-box * {
  font-family: 'Rubik Storm', 'Open Sans', sans-serif;
}

b. If the font is not on your site

Add your font via `@font-face` in the survey’s Custom CSS, with `url()` pointing to your font files, then apply the font to the survey box. Use the full example:

/* cyrillic-ext */
@font-face {
  font-family: 'Rubik Storm';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubikstorm/v1/eLGYP-_uPgO5Ag7ju9JaotL3RWTD98Ql4tc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Rubik Storm';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubikstorm/v1/eLGYP-_uPgO5Ag7ju9JaotL-RWTD98Ql4tc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* hebrew */
@font-face {
  font-family: 'Rubik Storm';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubikstorm/v1/eLGYP-_uPgO5Ag7ju9JaotL4RWTD98Ql4tc.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
  font-family: 'Rubik Storm';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubikstorm/v1/eLGYP-_uPgO5Ag7ju9JaotL0RWTD98Ql4tc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Rubik Storm';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubikstorm/v1/eLGYP-_uPgO5Ag7ju9JaotL6RWTD98Ql.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


#survicate-box * {
  font-family: 'Rubik Storm', 'Open Sans', sans-serif;
}

💡 We recommend always adding fallback fonts (e.g. 'Open Sans', sans-serif) so text still displays if the custom font fails to load.

❗ If you're using the Survicate NPM package to add surveys to your website, this feature is available starting from version 28.18.0.

This should be added separately for Light and Dark themes.

4. Further in the theme setup, you can enable Customization to add your company logo, enable custom CSS, add a short text message, or an avatar image to your survey:

To edit custom CSS, paste in your CSS code and click update your theme:

These settings should also be added separately for Light and Dark themes.

5. Once you are ready with your template, click Update to save your settings:

Adjust your survey settings

Once you have finished with the theme setup, click on Settings in the left sidebar. There, you'll see the Survey experience and Messages tabs.

Survey experience

The survey experience section allows you to decide on your survey's look and behaviour. Here, you can adjust how you would like the survey to appear on the screen, its details, and its position. You can also disable and enable the Close and Minimize buttons by checking their toggles:

Navigation: Allow respondents to go back to the previous questions to adjust their answers.

Progress bar: The progress bar lets your respondent see at which point of the survey they are and informs them about the length of your survey. It's located at the very top of your survey.

Remove branding: In some of the paid plans, you have the option to remove the Powered by Survicate footer from your survey. You can see a list of our pricing and features here.

Start minimized on desktop: It's possible to define how your survey will start on the desktop. You can decide to start your survey minimized and extend it only when a visitor clicks on the widget.

Start minimized on mobile: Define how your survey will start on mobile devices; by enabling this toggle, you can start your survey on the minimized setting and extend it only when a visitor clicks on the widget.

Close button in full view: You can enable or disable the close button, to prevent the survey from being closed. If the survey starts minimized on your website, the visitor needs to open it to see the close button.

Close button in minimized view (available in pop-up and Braze in-app formats): A visitor will be able to dismiss the minimized version of the survey without having to open it first.

Minimize button: Let your visitors minimize the survey instead of closing it.

Layout: You can position your survey in different locations on the page, upper left or right, center, or lower left or right.

Background overlay: If you would like to add a website fade out, you can set this in the drop-down menu to dark overlay or light overlay.

Default language: It can influence the survey questions you see in the Question Library. For example, saving your questions to the Library from a survey with Default language set to English, will only let you use those questions in other surveys with the same Default Language.

Additionally, this language will the one that the survey results are translated to.

Messages

The Messages tab allows you to change the text of your survey buttons or customize the text on a minimized survey invitation to add a catchy message:

Preview your survey

On the right side of the page, you can preview your survey as if you were a respondent before launching it on your website. Every change to your survey appears here in real time, and you will be able to test the look and feel of your survey as you go on creating it.