Style Options Overview

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.

Screenshot showing Refiner’s survey design options for Web-app Survey Widgets

Available styling options

Depending on the type of survey you’ve created, different styling options are available.

Web-based survey widgets launched on Desktop or Tablet devices offer various styling options as shown in the table below.

Surveys launched on mobile devices (web & native) come with a similar set of options, but always slide in from the bottom of the screen.

Survey links offer the additional option to display your logo on the survey page.

Surveys widgets on Desktop & TabletSurvey widgets on MobileSurvey Links
Custom accent & background color✔︎✔︎✔︎
Slide-in positions (Top-Left, Top-Centered, Modal, Banner, …)✔︎BottomCentered
Progress Bar✔︎✔︎✔︎
Round or square button styles✔︎✔︎✔︎
Highlighted border for increases visibility✔︎
Text direction (Left-to-right & Right-to-left)
✔︎✔︎✔︎
Hide Refiner Branding✔︎✔︎✔︎
Banner Images✔︎✔︎
Upload Logo✔︎

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.

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”.

Furthermore, you’ll find an input field to to add custom CSS code. Adding custom CSS code is currently only available to customers on an Enterprise plan (see further below).

Advanced white-label styling options

For most of our customer, the styling options mentioned above provide enough flexibility to deliver a great on-brand user experience.

For customers subscribed to an Enterprise plan, we can also provide more advanced customization options, such as uploading Cascading Style Sheets (CSS). Please contact our team to get more information.

Was this helpful? Let us know with a quick a vote