Setting up Feedback Popovers on your Website 🌐 πŸ’¬

Learn all about Website Feedback Popovers and how to set them up on your website for real-time feedback from customers with Zonka Feedback.

Sonika Mehta avatar
Written by Sonika Mehta
Updated over a week ago

Popovers are a great way to attract the attention of the customers and visitors to your website. They are very commonly used on websites to post a message, a CTA, special invite, advertisement, or more. They are also very useful for displaying a survey or feedback form on the website. With Zonka Feedback, you can add Web Surveys as Feedback Popovers on your Website to engage with your Website visitors and gauge their feedback and satisfaction.

In this article

What are Website Feedback Popovers?

Popovers are creatives in embedded windows that appear on the Website, overlaying on your main page content. Popovers need interaction or input from the Website visitor before the visitor can continue browsing the website. Popovers are very prominent and can instantly grab the attention of the Website Visitor. For this reason, they're very popularly used to display ads, notices, special offers. An underused but very important use case is to display your Feedback Forms and Surveys as Website Popovers.

Simple Forms displayed as Website Feedback Popovers can ensure your Visitors engage with your form and share their feedback in real-time. These Popovers are especially useful after an interaction, event, or after some time has been spent by the visitor on your website.

How to install Website Feedback Popovers on your Website?

It is very easy to install the Website Feedback Popover on your Website using Zonka Feedback. To add Feedback Popovers, follow these steps.

  1. Navigate to Surveys (Manage > Surveys)

  2. Choose the Survey from the Survey List which you'd like to display on your Website

  3. Click on Build > Distribute from the top navigation to navigate to the Distribute Settings.


    ​


    ​

  4. From here, select Web to configure settings for Website Feedback Popover.

  5. Once inside the Web Distribute options, select Popover and click on Add to configure.
    ​

  6. You will be navigated to the Settings for the Popover from where you can manage your Settings. Read more about Launch Settings, Targeting Settings, and Widget Behavior.

  7. Give a user-friendly name to your popover button and Once done, click on Save.

  8. From here, click on View Code.

  9. Copy this code and paste it in the <head> section of your website's HTML

Website Feedback Popover Appearance & Launch Settings

While you're configuring your Website Feedback Popover, the first settings you'd see our Appearance.

  • Click on Appearance to open up the settings.

  • Give a User-friendly name to your popover button.

  • Customize the size, screen, and features appearance as per your preference.
    ​
    ​1. Show Welcome screen - You can toggle on if you want to display the welcome screen on the popover or toggle off if you want to display the first question on the screen.
    ​2. Show Logo - You can toggle on to show your company logo on the survey screen or toggle off if you don't want to display it.
    ​3. Show Progress - You can toggle on to show the progress bar at the bottom of your survey to indicate to your customers how many questions are left or you can toggle off.
    ​4. Auto-close on submit - You can toggle on this feature so that immediately once your customer responds to the survey the popover disappears.

You can choose any of the above based on how you'd like to Feedback Popover to be displayed.

Website Feedback Popover Targeting Settings

You may not want to take feedback from all your Website Visitors but from a section of Visitors. You can specify which users you'd like to display the Feedback popover to based on the Targeting Settings.

  • Target select devices: Visitors can access your website on any device - Desktop, Tablet, and Phone. You can choose if you want your Feedback Popover to display to visitors on all screens or only on select screens.

  • Target select pages: You may want to display the feedback popup only on select pages of your website, for example, on the blog pages, post-checkout page, and so on. You can choose select pages here.

  • Survey a sample: 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.


    ​

Behavior and Settings of the Website Feedback Popover

In the Behavior Settings, you can choose how the Feedback Popover Widget should behave on your website in terms of how many times should it be visible to the Visitors and when it should be visible.

Choose when you'd like to Launch the Widget

  • Immediately when the page loads: This will show the Feedback Widget as Popover on your website as soon as the visitor lands on the page.

  • After a delay of N seconds: This will show the Feedback Widget Popover after a delay of the number of seconds you put in.

  • When the user has scrolled N% of the page: This will show the Feedback Popover on your Website once the visitor has browsed a certain percentage of your webpage.

You can choose from the following options to display the feedback popover:

  • Until they submit a response: This implies that the Feedback Popover will continue to appear for the visitor every time he visits the particular Website or Webpage until they submit a response once. After the response is submitted, the same Visitor will not see the Feedback Popover again.

  • Only once, even if they submit a response: This implies that the Feedback Popover will be displayed to the visitor only once, i.e. the first time, and never again. This is irrespective of whether the visitor submits a response or not.

  • Over and over again, even if they submit a response: This implies that the Feedback Popover will be displayed to the visitor every time the Visitor visits the website or web page.

Once done, click on Save and click on View Code to Copy this code and paste it in the <head> section of your website's HTML

Did this answer your question?