Classic Widget Guide
This article will walk you through how to set it up:
- Setup the Classic Widget
- Use a link to open the widget
- Embed the Classic Widget into a page
- Custom the widgets HTML & CSS using Templates (available on Pro)
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"
- 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 changesWidget 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
- 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.]
- Choose the “Widgets” from the menu.
- Choose Classic Widget Popup
- Configure your settings in Step 1
- In Step 2 choose the middle option "From a link"
- 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
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
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:
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.
- Select the "Use a custom template" checkbox
- Choose "New template" from the drop-down menu
- Give it a name, apply your custom CSS/HTML
- 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.