In GetFeedback Digital for Apps, we've set up some customization functionalities that can help give your Feedback Forms and Campaigns the look and feel of your App. These functionalities can be accessed straight from your GetFeedback Digital account and once you've set up your customization, it will be reflected in your App immediately, without having to release a new version of your App. In this article, we're going to dive deeper into these options to help you get started with customizing your Feedback Forms and Campaigns for GetFeedback Digital for Apps.
This article is split up in separate sections:
- We'll start by helping you identify the Color Groups
- Next, we're going to cover the Color Settings
- Then, we'll go through the Dark Mode Color Settings
- Last but certainly not least, the Banner Position (only for Campaings)
Color Groups
To help you identify the different elements that can be used in GetFeedback Digital for Apps Feedback Forms and Campaigns, we've divided them into groups based on their role in the interface. Below you'll find an overview of these color groups for Android and for iOS.
Note: SDK 6.0.1+ for iOS and SDK 6.0+ for Android, will contain our new cards design for your Feedback Forms and Campaigns. Each question element will be placed on a different card, which makes it easier for your users to separate the different questions resulting in a more appealing Form/Campaign with improved readability.
- Group 1, Title color: Changes the color of all question titles and headers.
- Group 2, Accent color: The color of interactive or otherwise important components like sliders, checkboxes and the submit button. This also includes the navigation bar of the feedback form.
- Group 3, Text color: The color of general text, such as user input, paragraphs, checkbox options etc.
- Group 4, Validation message color: The color that highlights fields which are either required and left blank or incorrectly filled.
- Group 5, Background color: The color of the background.
- Group 6, Text color on accent color elements: The color of the text displayed over elements in accent color, such as selected buttons and checkmarks in checkboxes.
- Group 7, Card color: The color of the card design elements.
The following images display examples of how the elements are grouped for Android and for iOS.
The different color groups in Android apps
The different color groups in iOS apps
Color settings
Now that we've identified the different Color Groups and we know what elements these groups belong to, we can continue with configuring the colors we want to have in our Forms and Campaigns. Let's start by locating the place where these settings can be configured. The color settings can be found by opening the 'Advanced' settings in your Form or Campaign:
With the 'Advanced' options open, scroll down to enter the wonderful world of the 'Color Settings':
This is where you can go ahead and customize the colors of your Form and/or Campaign to give it the look and feel you want to go for. Want to see what your Form/Campaign looks like after changing some of the colors? Feel free to give the Usabilla Preview App a try! The Usabilla Preview App can be downloaded from the Google Play Store and the App Store and it allows you to scan the QR code that's shown after saving a Form and Campaign.
Dark mode color settings
Apart from the default color settings mentioned above, we now also support a separate set of colors for dark mode. This way, you don't have to create a separate form for dark mode specifically. The colors can be set within the Advanced settings of the form/campaign editor:
Banner position
Apart from the settings for colors, we also have one setting specifically for Campaigns. The initial screen in a Campaign in GetFeedback Digital for Apps is always a banner. This banner can be used as an invitation to participate in a Campaign, it can be used to measure the NPS, how a user is feeling or to simply display a notification. With the setting related to this banner, you can control whether the banner is shown at the bottom of the screen or at the top of the screen. By default, the banner will be displayed at the bottom of the screen.
Note: This setting is only available in the iOS SDK 6.0.1+ and Android SDK 6.0+.
The banner setting can be found by opening the 'Advanced' settings in your Campaign:
Et voila:
To give you an idea of how your Campaign will look when either 'Bottom' or 'Top' is selected, we've included these two images as examples:
Additional customization
This was a complete guide to help you manage the colors of the elements in your Forms and Campaigns, and the position of the banner of your Campaigns from GetFeedback Digital. But wait, there's more! It's also possible to customize the mood rating, the star rating, the font and the color of the Header. These specific elements can be customized from the SDK. The documentation regarding this for our Android SDK can be found here. For our iOS SDK, you can find it here.
Success! You've finished the article and you're ready to take on the color customization screen in GetFeedback Digital, have fun!