Moving to our new home! For the latest documentation, please visit help.wingify.com .

Start Free trial

Articles in this section

See more →

Customize the Survey Appearance (Web)

Shweta Ajwani
  • Updated
Share:
close this to read article
Feature Availability: This feature is available with VWO Pulse on all plans. However, certain advanced functionalities within Surveys may vary based on your subscription plan. For more details, see VWO Pricing & Plans.

This article covers the following:

Overview

After adding questions to your survey, the next action is to configure its appearance on the Design tab of the survey builder. Here, you can adjust the survey widget to match your website's aesthetic and maximize visibility. You can also customize its initial state, position, theme, and branding to create a polished, consistent experience.

Note: This article outlines the steps for customizing Website surveys. For information on customizing surveys for mobile applications, refer to Customize the Survey Appearance (Mobile App).

To customize the survey appearance, perform the following steps on the Design tab.

Configure the Web Layout

The Web Layout section controls how and where the survey widget initially appears on the visitor’s webpage. 

web-survey-design-layout.png

Customize the layout using the following options:

Configure the Initial Survey State

Choose how the survey appears when it loads on the visitor’s screen. This setting defines whether the survey is collapsed or fully visible when the trigger condition is met. You can choose between:

  • Open: Select Open to display the survey in its fully expanded state, displaying the survey questions immediately.
  • Closed: Select Closed to display the survey in its collapsed (minimized) state, which the user can expand by clicking on it.

Configure the Survey Widget's Position

Select where the survey should appear on the visitor’s screen. By default, the survey is positioned at the bottom-right of the page. Using the options in the Position section, you can change its placement to the right, left, or center of the screen.

This setting determines the fixed location of the survey widget for all visitors.

Configure the Survey Theme and Style

Use the Survey Theme & style section to control the visual appearance of your survey pop-up, including its color scheme, button style, progress indicators, and branding.

web-surveys-theme.png

Select a Theme

You can use any of the default VWO themes or create a custom theme, depending on your VWO subscription plan.

  1. Click the Theme dropdown.
  2. Select a preset theme, for example, White, Purple Berry, Nightly, to instantly apply a consistent look and feel to your survey widget.

Create a Custom Theme

To create a custom theme:

  1. Scroll down in the Theme dropdown and select New Theme. This opens the Save New Theme modal.
    web-surveys-custom-theme-pop-up.png
  2. Enter a name for your custom theme.
  3. [Optional] Select the Make this my default theme checkbox if you want this theme to be applied automatically in future surveys.
  4. Choose a base theme using the Base Theme dropdown. The CSS for that base theme is automatically loaded into the editable code sections. By default, it is set to White.
  5. Modify the theme by making your changes directly in the code editor. The initial content is pre-populated with commented sections (such as General Styling for Survey Container Frame), helping you identify where to modify specific elements. Modify the code using the available code tabs:
     
    1. Container CSS: Controls the styling of the survey container, frame, layout, and positioning.
    2. Content CSS: Controls the appearance of inner elements such as questions, text fields, buttons, and options.
    3. Content JS: Allows you to add custom JavaScript to modify the behavior or styling of the survey.
       
  6. Click Save to save your custom theme.

Saved themes appear in the Theme dropdown for use in any future survey.

Enable Full Width Buttons

Toggle on Full width Button to make the action buttons (Next/Submit) span the entire width of the survey dialog. This helps improve visibility and accessibility.

Show a Progress Bar

Toggle on Show Progress Bar to display a visual indicator that helps users understand their progress in the survey. Including a progress bar in the survey encourages completion.

Customize Branding (White Labeling)

The White label section allows you to remove VWO branding and use your own logo. Use the Show VWO Branding toggle to control the survey branding.

  • On: Displays VWO branding by default.
  • Off: Hides VWO branding, allowing you to add your own logo or keep the widget unbranded. Once VWO branding is removed, select Upload custom branding image. Upload your logo file (PNG, JPG, or GIF, max 320 x 100 pixels) to personalize the survey.

Next Steps

Once you have configured the visual design, position, and branding, click Next to proceed to the Advanced Options tab. Here you can configure final operational details such as survey frequency, repeat frequency, response collection, and other advanced options. For more information, see Configure Survey Delivery (Advanced Options).

Troubleshooting

Issue

Possible Cause

Recommended Solution
The survey widget is not appearing in the expected position.
  • Incorrect position selected under Web Layout.
  • Overlapping page elements.
  • Conflicting custom CSS.
  • Verify the selected position.
  • Check for overlapping elements, such as chat widgets and cookie banners.
  • Adjust the custom CSS as needed.
The survey loads in the incorrect initial state (Open/Closed).
  • Incorrect configuration under Initial Survey State.
  • Custom JS may be overriding the settings.
  • Cached assets may be loading old behavior.
  • Confirm that the correct state is selected.
  • Review the Content JS for toggle logic.
  • Clear the browser cache, or test in incognito mode.
Custom theme changes do not reflect in the survey.
  • Theme not saved or reselected.
  • Browser caching issues.
  • CSS/JS syntax errors.
  • Save and reapply the theme.
  • Clear browser cache.
  • Validate CSS/JS for syntax issues.

FAQs

  • What happens if I change the theme after publishing the survey?
    If you change the theme and publish the update, the survey will automatically start using the newly selected theme for future impressions.
     
  • Can I apply different themes to different questions?
    No. Themes apply at the survey level. All questions inherit the same styling for visual consistency.
     
  • What if my website uses dark mode?
    Choose or create a theme that aligns with your site's dark mode color scheme. You can fully customize backgrounds, text color, and components through Container CSS and Content CSS.

Need more help?

For further assistance or more information, contact VWO Support.

Was this article helpful?

Return to top

Related articles