Customize the Survey Appearance (Mobile App & Link)

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, VWO automatically applies the default appearance settings.

To customize the survey appearance in the mobile app or link, follow these steps on the Design tab:

Configure the Survey Theme and 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 VWO themes or create your own theme, depending on your VWO subscription plan.

To use a default theme:

1. Click the Theme dropdown.
2. 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 VWO Pulse Surveys.

Customize Dialogue Appearance

You can further refine the survey’s appearance within the Survey dialogue section:

• Background colour - Sets the background color 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

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 VWO branding appears on the survey.

Show or Hide VWO Branding

Use the Show VWO Branding toggle to control this setting.

• On: VWO branding appears at the bottom of the survey (default).
• Off: Hides VWO branding and allows you to add your own logo.

Upload Custom Logo

When branding is turned off:

1. Click Upload custom branding image.
2. 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.

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.

1. Navigate to the Design section of your survey configuration.
2. Scroll down to the Image customization section.
3. Toggle on Show background image.
4. 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

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 VWO Support.