Sharing Surveys via HTML Widget

Whether you want to get feedback on your newsletter content or on your complaint handling process, emails are a great channel for collecting feedback.

Use our widget in your email signature to collect feedback on the quality of support or any factor of your service.

a) Availability

zurvey-html-01

Creating a widget for a survey is only available in case the survey itself includes a single interaction question: single choice, rating, scale, NPS®, CSAT, or CES question types. The first thing you need to do is choose the question they want to display in the widget from the dropdown seen below.

zurvey-html-02

Important note: the system automatically defaults to the first question in your survey order. (In this example, we’ve chosen an NPS® question to be shown in the widget.) The system will then show a preview of how the widget will look.

zurvey-html-03

Once you are happy with the look of the widget, you can get the HTML snippet by clicking on the “Get code” button below the preview. This snippet is what needs to be embedded into the desired platform/email signature by copying it directly from the popup or downloading it as an HTML file.

zurvey-html-04

zurvey-html-05

If you have URL parameters applied to a survey, the code snippet of the HTML widget contains them. The system applies placeholders for URL parameter values that make it easy to replace with your own data. Placeholder values are in between { { } }, you can find them in the following format: &urlParamName={ { urlParamName } }.

Important note: The { { } } are only used for highlighting, they should not be applied in actual use.

b) Customization

Any survey widget can be further customized by clicking on the “Customization” dropdown below the widget preview. This will open the following menu.

zurvey-customization-01

The following functions are available in the menu:

  • Background color: choose from the proposed colors, keep the background transparent, or provide an exact color code in HEX format.
  • Text color: choose from the proposed colors, keep the background transparent, or provide an exact color code in HEX format.
  • Border color: choose from the proposed colors, keep the background transparent, or provide an exact color code in HEX format.
  • Scale border color: choose from the proposed colors, keep the background transparent, or provide an exact color code in HEX format.
  • Scale button color: choose from the proposed colors, keep the background transparent, or provide an exact color code in HEX format.
  • Margin: can be set between 0 and 16px.
  • Icon spacing: can be set between 8 and 40 pixels (the default is 8). This is how the NPS® widget looks with maximum icon spacing.

zurvey-customization-02

  • Show title: by default, the title of the question is displayed, however, it can be removed for a slicker look.
  • Show labels: by default, the labels of the question are displayed (in the screenshot, the ends of the scale are shown). However, they can be removed for a slicker look.

zurvey-customization-03

Widget preview with the title and labels removed.
  • Remove Zurvey.io branding: remove the “powered by Zurvey.io” branding from the widget.

Read more about this feature on our blog:

Never miss an improvement opportunity with embedded microsurveys