Styling Options
Introduction
Refiner offers various styling options to make your survey blend perfectly with your brand and product.
Getting your survey design right is not just a matter of respecting your brand guidelines or providing a pleasant experience to your users though. A well designed survey also yields higher completion rates and thus better customer insights.
Available styling options
Depending on the type of survey you’ve created, different styling options are available as shown in the table below. More information for each option can be found further below on this page.
| Surveys widgets on Desktop & Tablet | Survey widgets on Mobile | Survey Links | |
| Adaptive color palettes | ✔︎ | ✔︎ | ✔︎ |
| Slide-in positions (Top-Left, Top-Centered, Modal, Banner, …) | ✔︎ | Bottom | Centered |
| Rounded corners | ✔︎ | ✔︎ | ✔︎ |
| Progress bar | ✔︎ | ✔︎ | ✔︎ |
| Highlighted border | ✔︎ | – | – |
| Banner images | ✔︎ | ✔︎ | – |
| Upload logo | – | ✔︎ | ✔︎ |
| Hide close button | ✔︎ | ✔︎ | – |
| Backdrop close | Centered | – | – |
| Back navigation | ✔︎ | ✔︎ | ✔︎ |
| Text direction | ✔︎ | ✔︎ | ✔︎ |
| Hide Refiner Branding | ✔︎ | ✔︎ | ✔︎ |
Adaptive color palettes
Refiner allows you to choose an Accent Color and Background Color for your surveys. Both, the Accent and Background Colors, are used in different shades in your surveys for input fields and buttons.
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.
Slide-in position
In-Product surveys can have different layout options when viewed on a desktop or tablet device.
Which layout you choose for your survey has not just an impact on the user experience, but might also impact survey response rates. As a rule of thumb: the more intrusive and visible a survey is (e.g. centered layout), the higher the response rates.
Slide-in layouts (bottom centered, bottom left, bottom right, top centered, …) are a popular choice.
Another popular choice are centered surveys with a backdrop overlay.
Lastly, you can also use our banner layout to make use of the entire screen.
When viewed on a mobile device, Web-app Surveys are always displayed bottom centered to ensure a good user experience. The same is true for mobile app surveys.
Progress Bar
If you surveys contains more than 2-3 questions, it might be helpful to display a progress bar. The progress bar shows users how many questions a survey has in total and how many are left.
Rounded corners
To better match the style of your application, you can choose between rounded or straight corner style.
Highlighted border
Banner images
Banner images are a great way to mirror you brand inside a Refiner survey. The option to upload custom banner images is available for In-product surveys on web and mobile.
You can upload one banner image per survey in the Design tab. You can also choose to upload specific banner images for each question individually.
Upload logo
Survey Links 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 used by web browsers.
Text-direction
You can 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.
You can choose to hide the “x” close button which is otherwise displayed in the top right corner of an in-product survey.
We usually recommend to keep the close button visible to guarantee a good user experience. There are however various situations where hiding the close button makes sense. For example, when you running on onboarding survey with a centered modal layout and completing the survey is mandatory.
Some survey question types will display a “Back” button when they are placed after the first element. As the name suggests, the button allows a user to navigate back to the previous question and modify their response. You can choose to disable back navigation for all questions in your survey. If disabled, users can’t modify a response once given.
Backdrop close
When using a centered modal layout for your in-product survey, you can choose whether or not a click on the half-transparent backdrop overlay will close the survey or keep it open.
Hide Refiner branding
Customers on a paid subscription can hide the Refiner branding from their surveys entirely. Surveys from users on a free plan will show a small link to Refiner in the bottom.
Default branding settings
Colors can be set for each survey individually. If you are planning to run multiple survey campaigns, you can define your branding colors in your project settings in the section “Brand Identity”.
White-labeling with custom CSS code
Customers on an Enterprise plan can tweak the survey design with custom Cascading Style Sheet (CSS) code. Using custom CSS code opens up virtually endless styling possibilities, such as resizing the survey widget, changing the font-family, adjust button styles, etc. Please contact our team to get more information.