Web Feedback and Survey Widgets are tools that you add to your website or app to enable customers and visitors to give feedback and reviews. They enable you to take contextual feedback or contact information with forms that can placed on your website or can be automated and targeted to the right user at the right time.
Why use Web Feedback Widgets?
Besides the obvious benefit of being able to take in-moment, in-context feedback, there are many reasons why Web Survey Widgets are very helpful for businesses.
They involve minimal coding and efforts
You can get real-time customer feedback and understand customer needs
You can get product rating, feature rating and reviews
You can turn positive reviews to testimonials
You can prevent churn by automating workflows for negative feedback
You can collect customer information and do lead capture
You can run marketing campaigns based on data collected via Web Widget forms
In this article
Types of Web Survey Widgets
Side Tab
Side Tabs are feedback buttons that can be placed on the right or left side of your website or app. Side Tabs allow customers to give feedback whenever they like by simply clicking on the button. The form slides open from the right or left side allowing customers and website visitors to give feedback.
Side Tabs are ideal for Website or App experience feedback, for lead generation, as contact us forms, for bug reporting, and more.
Setting up Side Tab for your Website
From your Dashboard, go to the Workspace and Survey you'd like to set up feedback button from
From the top navigation within the Survey, click on Build & Distribute > Distribute
Select 'Web' tab from the distribution channels
Choose Side Tab and go to the Configuration page
In the Configuration page, you can edit the settings for Appearance, Behaviour and Targeting of the Popup Survey.
Popup Survey
Pop-up are forms and surveys that are displayed on a web page or app based on an event or time for users to give feedback and share information. Since pop ups surveys appear on the page in between a user's journey, they encourage users response, but can also be obstructive.
Pop-Up Surveys are great to use as exit intent surveys, cart abandonment surveys, post transaction and post booking surveys, lead generation forms, or time-based surveys.
Setting up Popup Surveys for your Website
From your Dashboard, go to the Workspace and Survey you'd like to set up feedback button from
From the top navigation within the Survey, click on Build & Distribute > Distribute
Select 'Web' tab from the distribution channels
Choose 'Popup' and go to the Configuration page
In the Configuration page, you can edit the settings for Appearance, Behavior and Targeting of the Popup Survey.
Pop-over Survey
Popover Surveys are surveys that open in an overlay on a web page on a click of a button or link. Unlike Pop-up Surveys that are triggered by an event or time, Popover Surveys are triggered by user action of clicking a button or a link. Also, unlike Pop-up surveys that opens the survey in the center of the screen, the Popover Surveys open right to the button or link where they're placed.
Popover Surveys are ideal for in-context feedback like feature feedback, article or blog feedback, CTAs and more.
Setting up Popup Surveys for your Website
From your Dashboard, go to the Workspace and Survey you'd like to set up feedback button from
From the top navigation within the Survey, click on Build & Distribute > Distribute
Select 'Web' tab from the distribution channels
Choose 'Pop-over' and go to the Configuration page
In the Configuration page, you can edit the settings for Appearance of your Pop-over Survey
Slide Up
Slide-out survey campaigns allow you to easily and subtly survey visitors via a large or small slide-out on your web page. It appears from the bottom of the screen when the page loads or after a delay as per the settings created by the owner.
Slide up can be triggered by adding a manual trigger to any element in your web page, such as click or scroll action. Once the user submits the responses to i, it stays or disappears as per the behaviour set up by the owner.
Setting up Side Tab for your Website
From your Dashboard, go to the Workspace and Survey you'd like to set up feedback button from
From the top navigation within the Survey, click on Build & Distribute > Distribute
Select 'Web' tab from the distribution channels
Choose Side Tab and go to the Configuration page
In the Configuration page, you can edit the settings for Appearance, Behaviour and Targeting of the Popup Survey.
Appearance of Web Widgets
(Available for Side Tab, Popup and Pop-over Surveys)
You can customize the appearance and look & feel of your Web Widget to match your web page or app design, your brand colors and attract more users and visitors to fill out the form and surveys.
In Web Widget Appearance, you can configure the following.
Setting | Description | Available in which Web Widgets? |
Type of Survey | Choose from Microsurvey or Large Surveys | Side Tab, Popup, Pop-over |
Button Color | Choose the color of the Side Tab Button | Side Tab |
Button Text Color | Choose the text color of the Side Tab Button | Side Tab |
Button Position | Choose if the Side Tab Button should appear on the left or right side of the web page | Side Tab |
Show Welcome Screen | Choose if the Survey should open with a welcome screen or not | Side Tab, Popup, Pop-over |
Show Navigation | Choose if the Survey Navigation should be displayed or not | Side Tab, Popup, Pop-over |
Targeting of Web Widgets
(Available for Side Tab and Popup Surveys)
You don't always want all your visitors and users to view the surveys. With the Targeting Settings, you can target specific devices and specific types of users to view and fill the surveys.
In Web Widget Targeting, you can configure the following.
Target Devices
Visitors can access your website on any device — Desktop, Tablet, and Phone. However, in some situations, you may want your users to not view the surveys on specific devices.
In this, you can choose from Desktop, Tablet and Mobile.
Target Pages
Surveys are not relevant on all pages. For example, if you've introduced a new page and would like to gauge user experience on that page or you have introduced a new feature and would like users to give feedback specifically on that feature page or you want feedback or form to be filled on your blog page, you will need to specifically target and place your surveys on those pages.
Choose displaying Web Widget —
On all pages
On specific pages
Target Pages
Once you are done with the device setting. There comes a question in which page would you like to see the feedback button/popover on? There are 2 possibilities for this,
It can be on all the pages, wherever you have inserted your source code.
It can be on the page you specify. You can set conditions like those pages in your website which has your specified words or those pages whose URL has been defined. Based on the selected word/page, your Widget would be visible.
For example, on the blog pages, post-checkout pages, and so on.
Target Users
You have an option to set the visibility of the Widget based on the number of users. Instead of surveying and taking feedback from all the visitors, you can choose if you'd like the feedback form to be displayed to a select percentage of users as a sample.
All users: All the people who visit your website irrespective of their purpose of landing. All your customers are valued.
Percentage of users: You can set what percentage of users can see this Widget.
Behavior of Web Widgets
(Available for Side Tab and Popup Surveys)
You can pre-set the behavior of your Web Widget with these settings.
Popup Launch
This configuration is available in Popup Surveys. With this, you can determine when the popup survey should launch. Choose from the following conditions —
As soon as the page loads
After a delay of N seconds
After a visitor scrolls N% of the page
Visitor tries to exit the page
This setting is very important and helps you display your popup survey at the right time when it's relevant.
Popup or Side Tab Display
This setting helps you determine how often should the survey be displayed to the users, customers and visitors. Choose from the following—
Until they submit a response: This means that the survey will continue to be displayed to the user until they submit one response
Only once, even if they don't submit a response: This means that the survey will be displayed only one time to the user irrespective of whether or not they submit a response
Every time, even if they submit a response: This means that every time the user visits the page and meets the condition, the survey will be display always.
Identifying Users with Web Widgets
While you can take surveys and feedback without capturing any information about the respondents, we recommend you identify them whenever possible.
Identifying your Users allows you to link your Survey Responses to your customers, visitors or users of your product or app. For example, if you're running an eCommerce Website and are taking feedback after a purchase is completed, identifying a respondent can help you connect and link the survey response and satisfaction to the shopper on your website and the items they purchased.
Identifying Users also allows you to better segment and target the user and sync the responses to other tools and systems you use.
When you're copying the code from the Install JS Client Code section, you can choose from Anonymous Mode or Identify User. The following code block is responsible for identifying your users. When using the Identify User code, make sure that you replace the static code values with dynamic user data.
_zf('variables', {
contact_email: "abc@somecompany.com", // Replace with User Email
contact_name: "Robert Hopkins", // Replace with User Name
})
Passing Additional Data with Web Widgets
In addition to identifying the users, you can also pass other variables (Contact Variables, Survey Variables or Hidden Variables) in the code like country, subscription plan, user ID and more.
_zf('variables', {
contact_email: "abc@somecompany.com", // Replace with User Email
contact_name: "Robert Hopkins", // Replace with User Name
subscription_plan: "Professional",
subscribed_date: "August 1, 2022",
country: "United States",
gender: "Male"
})
Passing variables in Web Surveys enriches your responses and reports, and these variables are available as filters in the platform.
Anonymous Feedback with Web Widgets
There are many situations when you cannot or don't want to identify the users who are giving feedback and filling surveys. For instance, if you're taking Website Experience Feedback for visitors, you may not want to know the visitor details and the visitors may not be comfortable sharing the same. For such scenarios, you can run your surveys in Anonymous Mode.
Anonymous Mode means no personal identifiable information about your users, respondents, customers will be shared with Zonka Feedback. Once the respondent fills out the survey, their response will be available in Zonka Feedback without any identifiable information like email address, phone number, name.
You can switch between the Anonymous Mode and the Identify User mode in the bottom of the code. When using Anonymous Mode, identifyUser call from the code snippet will get removed.
Adding Web Widgets on your Website or App
To display and trigger Zonka Feedback Surveys and Forms on your Website, or within your app or product, you need to install the Zonka Feedback JS Client Code (a JavaScript code) to your website (or in-app).
There is one JS Client Code available for each workspaces.
All surveys of one workspace will run on your website or app using a single JS Client Code and multiple codes don't need to be added.
Here's how you can add the JS Client Code to your Website or App.
Navigate to 'Settings'
In the Settings menu, go to 'Developers' section from the left navigation
In Developers, click on 'Install JS Client Code' or go here
Choose the Workspace for which you'd like to view the code
From the Install JS Client Code, choose the Workspace for which you'd like to get the JavaScript Code Snippet for.
Once you've got the code, all you need to do is copy the code and paste it in the HTML of your Website or within your app.
Place this code after the <head> tag or before the </head> tag in your HTML.
Save and publish your changes to get the surveys working.
Need more help? Learn all about the JS Client Code and how to install it.