Branding

Branding options let you adapt the look and feel of your survey to match your product and brand. You can customize colors, add a banner image or avatar, and choose a font style that fits your user experience. This is especially important for in-app surveys, where a consistent design helps the survey feel like a natural part of your product instead of a disconnected third-party widget.

All branding options are part of themes. Set them once in a theme to reuse them across surveys, or change them for a single survey in the Custom Design view of the survey editor’s Design tab.

Color scheme

Refiner allows you to choose an Accent Color and Background Color for your surveys, with an optional second set of colors for dark mode.

A theme holds separate colors for in-app surveys, Survey Pages and Email Surveys. Each survey uses the colors that match its delivery method. The button colors of Email Survey embed codes are part of the theme as well.

Both the Accent and Background Colors are used in different shades in your surveys for input fields and buttons.

In the Color Scheme setting, the colors next to the sun icon are used in light mode and the colors next to the moon icon in dark mode. In each set, the left field is the Accent Color and the right field is the Background Color. Click on a field to open the color picker, where you can pick a color or enter a hex code.

Depending on the brightness of background colors, Refiner will automatically set the text color either to Black or White. This mechanism ensures that your survey widget has enough contrast between text and background elements and that your survey is easy to read.

Dark mode colors

The colors next to the moon icon are used when your users are in dark mode. Until you pick dark mode colors, the survey keeps its light colors in dark mode, so existing surveys don’t change. The preset themes come with matching dark mode colors.

Dark mode is available for Web App Surveys, Survey Pages and embedded surveys. Support for the Mobile SDKs will follow soon. Email Survey embed code buttons have no dark mode variant.

To see how your survey looks in dark mode, click the moon button above the survey preview in the survey editor or theme editor. The sun button switches back to light mode. When you change a dark mode color, the preview switches to dark mode automatically.

On the web, Refiner detects the color scheme automatically:

• Web App Surveys and embedded surveys follow the color scheme of your website or app and the user’s system settings. If your app has its own appearance setting, you can set the color scheme explicitly with setColorScheme in the JavaScript SDK.
• Survey Pages follow the respondent’s system settings. You can force a color scheme with the color_scheme URL parameter.

Banner images

Banner images are a great way to mirror your brand inside a Refiner survey. The option to upload custom banner images is available for In-product surveys on web and mobile.

You can set one banner image for the whole survey, either in a theme or in the Design tab of the survey editor. You can also choose to upload specific banner images for each question individually.

As an alternative to banner images you can also include images in the body text of your survey using Markdown syntax.

Avatar image

Adding an avatar, name and job-title to the top section of your survey widget will instantly give it a personal touch and make it more relatable. This usually results in higher response rates and overall better response data quality.

Upload logo

Survey Pages and Email Surveys let you upload a logo that is displayed in the top section of the survey page. You can also upload a page icon which is used by web browsers.

Font style

The default font of our surveys blends in nicely with most user interfaces and is optimized for high readability. By default, we are using the Roboto with a base font size of 16px.

You can choose to use other popular fonts provided by Google Fonts, such as Inter, Poppins, Montserrat etc. You can also choose a smaller or bigger base font size. If you can’t find your preferred font in our list, please don’t hesitate to reach out to us.

You can also switch the text direction from Left-to-Right (LTR) to Right-to-left (RTL). This setting might get overwritten for specific languages when using our Translations feature.