Customize the Survey Appearance (Web)

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 Web Layout
• Configure the Survey Theme and Style
• Next Steps
• Troubleshooting
• FAQs

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.

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 Survey Theme and Style

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

Select a Theme

You can use any of the default Wingify themes or create your own theme, depending on your Wingify 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 for Wingify Pulse Surveys

To create your own custom theme:

1. Select the New Theme option from the dropdown. This opens the Save New Theme modal.
2. Enter a name for your custom theme.
3. [Optional] Select Make this my default theme 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.
   Note: 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:
6. Container CSS: Controls the styling of the survey container, frame, layout, and positioning.
7. Content CSS: Controls the appearance of inner elements such as questions, text fields, buttons, and options.
8. Content JS: Allows you to add custom JavaScript to modify the behavior or styling of the survey.
9. 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 Wingify branding and use your own logo. Use the Show Wingify Branding toggle to control the survey branding.

• On: Displays Wingify branding by default.
• Off: Hides Wingify branding, allowing you to add your own logo or keep the widget unbranded. Once Wingify 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

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