Adding the UserVoice widget to your site
There are three ways to add a widget to your page:
- Standard trigger (user clicks the trigger to open the widget)
- Custom HTML trigger
- Embed widget directly in your page
Standard trigger
The quickest way is to include UserVoice on your site is to add the standard trigger (by default this is positioned on the bottom-right corner of the page):
1
|
|
You can also customize both the trigger and widget by passing in additional options:
1 2 3 4 5 6 7 |
|
Custom HTML trigger
To use your own custom HTML to show the widget, simply add the data-uv-trigger
HTML attribute to the element. For example:
1
|
|
By default, the widget will use the contact
mode, but you can change the mode to smartvote
or satisfaction
as well:
1
|
|
You can also choose to use the addTrigger
Javascript method to attach a click event to a DOM element for opening the widget:
1
|
|
Embed the widget inline
To embed a widget directly on your page (with an iframe), add data-uv-embed="smartvote"
(you can specify a different mode) to the container element you would like the widget to appear in. By default, the iframe will fill the width of the container element, but you can set specific height/width with data-uv-height="325px"
and data-uv-width="100%"
.
1
|
|
For Javascript-based apps, you may prefer to embed a widget using the embed
method with element
parameter:
1 2 3 4 5 |
|
To improve widget scaling on mobile browsers, the following meta tag can be added to the head of the page:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Advanced JS methods
show
The show
method allows you to show the widget on the screen. If you’ve already added the standard trigger to the page, then it will show the widget as a popover to that trigger. Otherwise, it will default to a toaster view.
1
|
|
You can also target a specific element for a popover, set a specific mode for the widget, and pass other options:
1 2 3 4 |
|
hide
Calling the hide
method will hide any widget that’s currently visible as a popover or toast:
1
|
|
removeTrigger
To remove the standard trigger from the page:
1
|
|
To remove a custom trigger from the page, just include the same element you used when adding the trigger:
1
|
|