You can quickly and easily set up the Feedback Button, a format of our website and in-product surveys, directly in the Survicate Panel.
A Feedback Button allows you to:
Collect spontaneous feedback from your visitors without disrupting their user journey;
Improve the experience and usability of your website & web app;
Identify struggle areas, uncover bugs that your visitors experience, or double down on success factors;
Easily keep track of all responses in the Survicate panel - just as you would with a regular survey;
Ask your website audience whether they'd like you to follow up with them.
A Feedback Button stays on your site, passively collecting feedback over time without any extra effort from your side.
Create the Feedback Button
1. To get a feedback button to show up on your website, ensure you've installed our tracking code.
2. To create the button, click on + Create new survey.
3. Pick how you'd like to continue - there are 4 options to choose from. You can either set up a survey of your own (start from scratch), select a survey from our templates library (start from template), create a survey with AI, or import questions you prepared before.
4. Pick Website or in-product survey from the menu and click Continue:
5. In the Create ➡️ Format section of your survey, switch the form to the Feedback Button:
Add questions
In the Create ➡️ Questions tab, you can customize your Feedback Button questions. You can change their text, rearrange their order, add or remove questions, and customize them to match your brand.
💡 You can use any question type with the Feedback Button, just like you would with Pop-up surveys.
Design and customize the Button
The Create ➡️ Design tab lets you use any of the ready themes for your survey, or customize the survey's look and design.
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.
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, the Font 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:
6. In the Settings tab, you can rewrite the messages that respondents answering the Feedback Button will see, decide on the position of the survey, and more:
💡 Use the preview to see if the outcome will look as desired.
Optional: Translate the Feedback Button
Decide in how many languages you'd like to display your Feedback Button. Choose Add new languages and select either manual or automatic translation.
Now, your respondents will see the Feedback Button's questions in the language of their browser.
Learn more about Translations here.
Optional: Connect integrations
The Feedback Button is now fully integrated into website surveys, so you can easily connect it with your other tools, such as Google Analytics, Intercom, Marketo, Slack, and Fullstory.
Check out all available integrations here.
What's next?
Target your Feedback Button to chosen URLs and Audiences and set it live
Display the Feedback Button on any page of your choice to ensure visitors see it at the right time.
Check out this article for step-by-step instructions on targeting and launching the Feedback Button on your website.
Analyze and Filter responses
Now, you can track NPS® and CSAT over time, use AI Insights for analysis, filter by attributes, analyze individual responses, use Word Cloud, and export results.
📞 If you have any questions about creating the Feedback Button - feel free to reach out to our team via chat or email: support@survicate.com.
Net Promoter, NPS, and the NPS - related emoticons are registered U.S. trademarks, and Net Promoter Score and Net Promoter System are service marks, of Bain & Company, Inc., Satmetrix Systems, Inc. and Fred Reichheld.