Feature Availability: This feature is available with Wingify Pulse on all plans. However, certain advanced functionalities within Surveys may vary based on your subscription plan.
This article covers the following:
- Overview
- Configure the Survey Theme & Style
- Customize the CTA Button and Progress Indicator
- Apply Branding (White Labeling)
- Image Customization (Only for Link Surveys and Concept Tests)
- Next Steps
- Troubleshooting
- FAQs
Overview
After you finish adding questions to your survey, the next step is to configure how the survey will appear to your users. All appearance-related settings are available on the Design tab of the survey builder. This section enables you to customize visual elements, including theme, color palette, text styling, response field appearance, and CTA button design. Depending on the platform selected, Mobile App or Link, you may also configure platform-specific options such as background images, layout behavior, and branding preferences.
These settings help you create a polished, consistent look that aligns with your product or brand identity. By adjusting the design, you ensure that the survey feels native within your app or seamless when opened via a link, resulting in a cohesive and user-friendly experience. Customizing these settings is optional. If no changes are made, Wingify automatically applies the default appearance settings.
Note: This article outlines the steps for customizing Mobile App and Link surveys. For information on customizing surveys for a website, see Customize the Survey Appearance (Web).
To customize the survey appearance in the mobile app or link, follow these steps on the Design tab:
Configure the Survey Theme & Style
Use the Survey Theme & Style section to define the overall visual appearance of the survey, including the dialogue background, text color, and response field styling.
Select a Theme
Themes control the background color of the dialogue, text color, input field styling, and default settings for CTA buttons. You can use any of the default Wingify themes or create your own theme, depending on your Wingify subscription plan.
To use a default theme:
- Click the Theme dropdown.
- Choose a preset theme, for example, White, Night Mode, High Contrast, to apply an instant color scheme to your survey widget.
To create your own theme, see Create a Custom Theme for Wingify Pulse Surveys.
Customize Dialogue Appearance
You can further refine the survey’s appearance within the Survey dialogue section:
- Background colour - Sets the background colour of the survey panel.
- Primary text colour – Controls the color of question text, labels, and answer text.
Adjust Response Field Styling
Use the Response fields section to customize:
- Response field background – Background color of text input boxes and answer options.
- Response field border colour – Border color for text inputs and selection boxes.
These settings help ensure visibility and readability across various mobile device themes.
Customize the CTA Button and Progress Indicator
Configure CTA Button Style
Under the CTA & progress bar section, adjust the following settings to match your app’s primary button style for consistency:
- CTA background colour – Sets the background color of action buttons (Next, Submit).
- CTA text colour – Sets the text color of the CTA label.
Enable Full Width Buttons (Optional)
Toggle Full width Button to expand the CTA button to the full width of the survey container. This improves visibility and aids accessibility on smaller screens.
Show a Progress Bar
Toggle on Show Progress Bar to display the user's completion status. This improves task clarity and increases overall survey completion rates.
Apply Branding (White Labeling)
If your subscription allows white labeling, you can control whether Wingify branding appears on the survey.
Show or Hide Wingify Branding
Use the Show Wingify Branding toggle to control this setting.
- On: Wingify branding appears at the bottom of the survey (default).
- Off: Hides Wingify branding and allows you to add your own logo.
Upload Custom Logo
When branding is turned off:
- Click Upload custom branding image.
- Upload your app’s logo (PNG, JPG, or GIF, max size: 320 × 100 px).
The logo will appear in the survey dialogue across all mobile screens.
Note: White labeling is only available on the Enterprise plan.
Step 4: Image Customization (Only for Link Surveys and Concept Tests)
For link surveys, you have an option to upload a background image. This allows you to further personalize the survey page.
- Navigate to the Design section of your survey configuration.
- Scroll down to the Image customization section.
- Toggle on Show background image.
- Upload your custom background image.
Next Steps
After finalizing the visual design of your mobile app survey, click Next to proceed to the next step. In this step, you will configure delivery rules that control when the survey appears, how often it is shown, and how responses are collected. For more information, see Configure Survey Delivery (Advanced Options).
Troubleshooting
| Issue | Possible Cause | Recommended Solution |
|---|---|---|
| The survey does not reflect the updated theme on the device. | The app is using cached assets. The old survey configuration is not being pulled. The SDK is not being refreshed. | Restart the app. Clear app cache. Verify the SDK is initialized before previewing. Republish the survey after saving design changes. |
| The survey UI appears different on iOS vs. Android. | Platform-specific UI rendering differences (font scaling, component styling, spacing), or OS dark/light mode behavior. | Test the appearance on both platforms and adjust the text color, background color, and button styling to improve cross-platform contrast. |
FAQs
-
Why is my logo pixelated on some devices?
High-density screens require sharper images. Use a higher-resolution logo within the recommended size constraints (maximum 320 × 100 pixels).
-
Does modifying survey appearance on mobile affect SDK performance?
No. Customizing the survey’s appearance does not impact SDK performance.
-
Can mobile surveys look different on iOS and Android due to mobile OS-level UI differences?
The core layout and components remain consistent across iOS and Android. Minor differences can still appear due to OS-level rendering (fonts, input controls, spacing, etc.), but Pulse components are designed to adapt cleanly so the experience stays consistent.
-
Do text fields look different across devices (iOS and Android)?
There can be slight differences in how text fields look/feel across iOS and Android because each OS renders inputs a bit differently. Pulse is designed to be customizable enough to match the app’s native look and feel on both platforms.
Need more help?
For further assistance or more information, contact Wingify Support.