Classic Widget Guide

 photo ClassicWidgetExperience_zps7f2f4262.png

Our Classic Widget (not to be confused with the newer UserVoice widget) can be shown on your site from a tab or embedded directly into a page (inline).  It works with Private forums and Single Sign On. On the left, it displays instant answers and on the right users can switch between Contact Support and Give Feedback.

This article will walk you through how to set it up:

Setup the Classic Widget


  • Click the icon in the bottom left corner [If you’re on an old version of UV, your settings will be accessed from the admin header.]
  • Click "Widgets"
You have two options:  
  • Pop up the Classic Widget with our feedback tab or custom link (click for example)
  • Embed the Classic Widget directly into the page

Pop up widget instructions below. - Embed setup instructions are found here

Step 1: Customize your widget design

Colors:  Click Primary or Link to display a color picker (use Full-Screen preview to see the changes

Widget Mode: Choose if you want to include the Feedback or Contact Support forms or both!

Default Tab Selection: Allows you to specify if the default view is Feedback or Contact Support

Forum:  Allows you to specify which forum you want feedback to be sent to

Sidebar:  Choose which KB Article topic to show by default

Custom Template:  If you're on our Pro plan you can create templates that contain your custom CSS and HTML modifications.  To edit a template simply select it from the drop-down and click edit to the right of the drop-down menu.

Custom Labels:  Allows you to change the text of the tabs inside the widget

Step 2: Choose how you want to open the widget


Select whether you want to use the Feedback Tab, a link or javascript to open the widget. If you choose the Feedback Tab, you'll be prompted to customize the wording, position, and color of the tab.

Tab Settings


 Tab Settings: Here you can change the label of the tab, the position on your site, and the tab color.  

Step 3: Installing the widget on your website


Classic Widget Popup From a Tab: Copy the code at the bottom of the widget configuration page and paste that code into the HTML of your website.  Specifically, the best location is directly before the closing </body> tag.

Classic Widget Popup From a link: Copy the code and place anywhere in the HTML of your site that you want a link to show up allowing users to spawn the widget.

Classic Widget Popup With JavaScript: This option is primarily used for folks familiar with JavaScript.  You can use this function to call the widget more creatively.

Use a link to open the Classic Widget


  1. Click the icon in the bottom left corner [If you’re on an old version of UV, your settings will be accessed from the admin header.]
  2. Choose the “Widgets” from the menu.
  3. Choose Classic Widget Popup
  4. Configure your settings in Step 1
  5. In Step 2 choose the middle option "From a link"
  6. Use the code at the bottom of the page and insert it into the HTML of your site where you'd like the link to appear

Embed the Classic Widget in a page


Settings" --> "Widgets" --> Click "Embed the Classic Widget directly on your page." 

Step 1: Customize Your Design


Colors:  Click Primary or Link to display a color picker (use Full-Screen preview to see the changes

Width/Height:  You can set width to a percentage and both height and width can also change between px, em, and rem

Widget Mode: Choose if you want to include the Feedback or Contact Support forms or both!

Default Tab Selection: Allows you to specify if the default view is Feedback or Contact Support

Forum:  Allows you to specify which forum you want feedback to be sent to

SideBar:  Choose which KB Article topic to show by default

Custom Template:  If you're on our Pro plan you can create templates that contain your custom CSS and HTML modifications.  To edit a template simply select it from the drop-down and click edit to the right of the drop-down menu.

Custom Labels:  Allows you to change the text of the tabs inside the widget

Step 2: Copy the Embed Code and add it to your page


Simply copy the code provided in step 2 and add it to the HTML of the web page where you want the widget embedded.

Customize the widget's HTML & CSS using Templates



Templates allow you to apply your own custom CSS or HTML to your widget.  
You'll find template options by navigating to Settings > Widgets and selecting either Classic Widget Popup or Classic Widget Inline.  

[Please note: some legacy plans may not include this option.]





Create a new template: 
  1. Select the "Use a custom template" checkbox
  2. Choose "New template" from the drop-down menu
  3. Give it a name, apply your custom CSS/HTML
  4. Click Save to officially save the template to your saved templates and apply it to the widget you're currently generating


How to modify the CSS/HTML in a template of an existing widget:

To update an existing widget on your site with new or updated CSS/HTML you'll want to follow the above steps but instead of selecting "New template" you'll need to select the existing template and then click edit.  Once you're done with your changes click save and you'll see your widget update in no more than 15 minutes.

Embedding the widget into a page instead?

Simply create a page or edit an existing one then open up the Text tab versus the Visual tab and paste the full widget code anywhere you want it to show up.

Opening the widget from a link?

Follow the instructions for Use a link to open the Classic Widget and add the code anywhere in your page, post, or template files.

You Might Find Helpful:


Feedback and Knowledge Base