Survey Styles is a code-free way to set a style consistent with your brand. As of today it's available across all your survey channels: web, email, iOS, Android and survey links.
BUT nothing has changed yet! You need to create a new style and enable it first. Until you do, your survey will look the same. So let's get you setup.
Managing Survey Styles
Step 1 - Create your first survey style
Go to your Settings and there should be a new page called Manage Survey Styles. There you can either create a new style or edit an existing one.
As you can see from below, if you create a style and don't use it, it's still saved and available.
Note: a style can be deleted only if it's not currently applied to a survey.
Step 2 - Styles, colors, and previews
This is your survey preview and style management page. This will allow you to see what your survey will look like before it goes live.
For the overall style of the survey, the goal is to use a best-practice clean design that works in all products and channels. We have some advanced additions planned for the styling, but we wanted this highly requested feature out as soon as we can before we adjust it to make it better.
Lite or Filled
The first option are selecting from two styles Lite or Filled. The main difference you'll notice is the first page of the survey. Lite keeps the survey subtle as many users like. While the Filled leads with your brand colors and draw attention. It's really up to your taste.
Primary Color and/or Secondary Color
Your survey can work perfectly well with just your main brand color. Or if you wish, you can add a secondary color. The purpose of the secondary color is a call-to-action for your open-ended feedback, and the 3rd page button.
Depending on the color you've set the font will automatically be black or white to maximize its readability and accessibility.
Some colors that are right between dark and lite may not be WCAG AAA accessible and we recommend you check the readability of your survey if you're concerned about the contrast: https://webaim.org/resources/contrastchecker/.
Survey Preview
Select the survey and language you'd like to preview in the top left. This is only to see it in the preview. It does not assign the survey style to the survey yet. That is done in Customize Survey.
*The preview you're seeing will not reflect any specific settings that you've enabled in your in-app SDK code, email template, or iOS/Android setup.
*iOS and Android are interactive designs that will update with your color, but they do not use your customize survey language.
Step 3 - Assign a style to your surveys
To start using one of your styles, go to Settings > Customize Survey. At the top of the page is a section for setting the Custom Style. The style works across all languages within this survey.
Styles are set on the survey level. So each survey can have it's own style if you'd like. Your iOS app survey can use a different style than your web app and different than your email survey.
After you save your survey with this new style, it will become active. If you'd like to keep your survey the same, the System Default is an option you can always choose from in th Custom Style dropdown.
🎉 That's it. Your new style is live!
FAQ
Can I set each components to use its own color?
In the iOS and Android survey, yes. Within the In-app web and email surveys this feature is not available yet, but is in the upcoming roadmap.
Do the styles work for the dark style of the survey?
Not yet. The dark style will come with it's own option to also change the background color and is planned for a future update.
Survey Styles are available on all paid plans.
Questions about your Survey Styles? Please create an issue here or email support@inmoment.com. 👩💻