Web Feedback and Web 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 Feedback Button
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 Side Tab Feedback Button for
From the top navigation within the Survey, click on Build & Distribute > Distribute
Select 'Web' tab from the distribution channels
Click on 'Add Widget'
In the Configuration page, select 'Side Tab'
Once done, you can now edit the settings like Appearance, Targeting, Behavior and Segmenting of the Side Tab.
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 popup survey for
From the top navigation within the Survey, click on Build & Distribute > Distribute
Select 'Web' tab from the distribution channels
Click on 'Add Widget'
In the Configuration page, select 'Popup'
Once done, you can now edit the settings like Appearance, Targeting, Behavior and Segmenting of the Popup Survey.
Popover 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 Popover Survey for your Website
From your Dashboard, go to the Workspace and Survey you'd like to set up Popup Survey for
From the top navigation within the Survey, click on Build & Distribute > Distribute
Select 'Web' tab from the distribution channels
Click on 'Add Widget'
In the Configuration page, select 'Popup'
Once done, you can now edit the settings like Appearance, Targeting, Behavior and Segmenting of the Popup Survey.
Slide Up Survey 🆕
Slide Up Surveys are surveys that appear (slide up) from the bottom of the web page as an overlay. Similar to Popup Surveys, Slide Up Surveys can be set to appear based on user activity or time, like post transaction, visiting a new page, or after the user spends some time or browses a particular percentage of the web page.
Setting up Slide Up Survey for your Website
From your Dashboard, go to the Workspace and Survey you'd like to set up Slide Up Survey for
From the top navigation within the Survey, click on Build & Distribute > Distribute
Select 'Web' tab from the distribution channels
Click on 'Add Widget'
In the Configuration page, select 'Slide Up'
Once done, you can now edit the settings like Appearance, Targeting, Behavior and Segmenting of the Slide Up Survey.
Bottom Bar Survey 🆕
Bottom Bar Surveys are buttons that can be placed on bottom right or left side of your web page that open the survey on click. The button text of the Bottom Bar Survey can be customized.
These are great as opt-in surveys where customers and visitors can click on the button to open the survey and answer questions.
In Web Widgets, you can configure settings for Widget Appearance, Widget Targeting and Behavior to display the surveys at the right time to the right user.
Setting up Bottom Bar Survey for your Website
From your Dashboard, go to the Workspace and Survey you'd like to set up Bottom Bar Survey for
From the top navigation within the Survey, click on Build & Distribute > Distribute
Select 'Web' tab from the distribution channels
Click on 'Add Widget'
In the Configuration page, select 'Bottom Bar'
Once done, you can now edit the settings like Appearance, Targeting, Behavior and Segmenting of the Bottom Bar Survey.
Web Widget Settings
The Web Widgets can be configured with various settings including Appearance, Targeting, Behavior and Segmenting. The details of the Web Widget Settings are below.
Appearance of Web Widgets
(Available for all Web Widgets - Side Tab, Popup, Popover, Slide Up and Bottom Bar)
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.
Settings | Description | Available in which Web Widgets? |
Survey Size | Choose from Microsurvey or Large Survey | Side Tab |
Button Color or Bar Color | Choose the color of the Side Tab Button or the Bottom Bar | Side Tab |
Button Text Color or Bar Text Color | Choose the text color of the Side Tab Button or the Bottom Bar | Side Tab |
Button Font Size or Bar Font Size | Adjust the size of the side tab widget from Very Small to Very Large to fit your website’s design and visibility preferences.
| Side Tab |
Button Text or Bar Text | Add the text that should appear on the Side Tab Button or the Bottom Bar button. | Side Tab |
Button Position | Choose if the Side Tab Button or Bottom Bar should appear on the left or right side of the web page. Choose if the Slide Up should appear on the left, right or center of the web page. | Side Tab |
Show Welcome Screen | Choose if the Survey should open with a welcome screen or not | Side Tab |
Auto Close on Submit | Choose if the Web Widget should auto close once submitted. If turned off, the respondent can click on the cross button on the top right to close the widget | Side Tab |
Show Navigation | Choose if the Survey Navigation should be displayed or not | Slide Up |
Side Spacing | Specify the spacing or padding from the right or left side after which the Bottom Bar should appear | Bottom Bar |
Bottom Spacing | Specific the spacing or padding after which the Bottom Bar should appear from the bottom | Bottom Bar |
Targeting of Web Widgets
(Available for Side Tab, Popup Surveys, Slide Up and Bottom Bar)
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 — Display the Web Widgets on all the pages, wherever you have inserted your source code.
On specific pages — Display the Web Widgets on pages you specify.
You can define precisely where Web Widgets should appear or be hidden using Include Pages and Exclude Pages rules.
This option is available for the following widget types:
Bottom Bar, Slideup, Popup, Article Embed, Feedback Button
Include Pages
Control where the widget should be shown. Add multiple conditions with any of the following matching types:
Has this Word: Display on pages where the URL contains the specified word or phrase.
Exact Match: Display only on pages that exactly match the provided URL.
Match Regex: Display on pages that match a regular expression pattern. Learn more about Regex Patterns
All conditions follow OR logic — the widget will be shown if any condition matches.
Exclude Pages
Control where the widget should be hidden. Similar condition options are available:
Has this Word: Hide on pages where the URL contains the specified word or phrase.
Exact Match: Hide on pages that exactly match the given URL.
Match Regex: Hide on pages that match a regex pattern.
All conditions follow OR logic — the widget will be hidden if any condition matches.
Example Use Cases
Show Slideup on all product pages
Include Pages: Has this Word =products
Hide Feedback Button on blog section
Exclude Pages: Has this Word =/blog/
Display Bottom Bar only on the pricing page
Include Pages: Exact Match =https://example.com/pricing
Hide Popup on all thank-you and checkout pages
Exclude Pages: Match Regex =(thank-you|checkout)
Show Feedback Button on blog pages, but hide on 2 specific posts
- Include Pages: Has this Word =/blog/
- Exclude Pages: Exact Match =https://example.com/blog/post1
- Exclude Pages: Exact Match =https://example.com/blog/post2
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, Popup Surveys, Slide Up Surveys and Bottom Bar Surveys)
You can pre-set the behavior of your Web Widget with these settings.
Popup or Slideup Launch Triggers
This configuration is available in Popup or Slideup Surveys. With this, you can determine when the Popup or Slideup survey should launch. Choose from the following conditions —
As soon as the page loads - The widget appears immediately after the page loads.
After visitor scrolls X% of the page - Display the widget once the user has scrolled a defined percentage of the page.
Visitor tries to exit the page - Exit-intent behavior triggers the widget when a user is about to leave the page.
Manual Triggers - Widget is triggered programmatically using a manual JavaScript trigger.
Tracked Events (User performs certain actions or events) - Launch the widget when a specific tracked action occurs — like a button click, form submission, etc. Learn more about Event based Triggers
⏱️ On Page Delay (NEW)
Add a time delay to any widget launch condition (except "exit intent") to further refine user experience.
Configure the widget to appear X seconds after the behavior trigger is met.
Works with all triggers except “Visitor tries to exit the page.”
Example: If scroll is set to 50% and delay is 5 seconds, the widget shows 5 seconds after the visitor scrolls 50% of the page.
This helps in reducing sudden popups, offering a more natural and timed interaction.
This gives you additional control to show the widget at a well-timed moment for optimal engagement.
This setting is very important and helps you display your Popup or Slideup survey at the right time when it's relevant.
Popup or Slide Up 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.