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.

Depending on which Distribution Channel you chose for your survey, different styling options are available.

Styling options per channel

Web-app & Website Surveys

In-app and website survey widgets expose the following styling options without the need of writing any custom code:

  • Predefined color theme or custom brand colors
  • Slide-in positions (Top-Left, Top-Centered, Modal, Banner, …)
  • Show or Hide Progress Bar
  • Round and squared corner style
  • Highlighted border for increases visibility
  • Text direction (Left-to-right & Right-to-left)
  • Show or hide Refiner brand
Screenshot showing Refiner’s survey design options for Web-app Survey Widgets

Depending on the brightness of your background color, 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.

Native Mobile Survey

Native mobile in-app surveys come with a similar set of styling options than web-based survey widgets. The main difference is that you can’t choose the slide-in position. Native mobile surveys will always slide in from the bottom.

Shareable Survey Pages

The design of our survey pages is quite similar to our widgets. You can choose a predefined color theme or set your own brand colors in the same way as for survey widgets.

Next to setting your brand colors, it is also possible to upload your logo. To do so, navigate to “Brand Identity” in your Refiner projects settings (see below). Once uploaded, you logo will appear on every survey page in your project.

Default branding colors

If you are planning to run multiple survey campaigns, you can define your branding colors in your project settings in the section “Brand Identity”. On this page you can also upload a logo for your survey pages.

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