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):

UserVoice.push(['addTrigger', {}]);

You can also customize both the trigger and widget by passing in additional options:

UserVoice.push(['addTrigger', {
  trigger_position: 'bottom-right',
  trigger_color: 'white',
  trigger_background_color: 'rgba(46, 49, 51, 0.6)',
  mode: 'contact', // Modes: contact (default), smartvote, satisfaction
  accent_color: '#458dd6'
}]);

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:

<a href="mailto:test@example.com" data-uv-trigger>Contact us</a>

By default, the widget will use the contact mode, but you can change the mode to smartvote or satisfaction as well:

<a href="http://feedback.uservoice.com" data-uv-trigger="smartvote">What should we add next?</a>

You can also choose to use the addTrigger Javascript method to attach a click event to a DOM element for opening the widget:

UserVoice.push(['addTrigger', '#elementId', {}]);

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%".

<div data-uv-embed="smartvote" data-uv-height="325px"></div>

For Javascript-based apps, you may prefer to embed a widget using the embed method with element parameter:

UserVoice.push(['embed', '#elementId', {
  mode: 'smartvote',
  height: '325px',
  width: '325px'
}]);

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.

UserVoice.push(['show', {}]);

You can also target a specific element for a popover, set a specific mode for the widget, and pass other options:

UserVoice.push(['show', {
  target: '#elementId',
  mode: 'smartvote'
}]);

hide

Calling the hide method will hide any widget that’s currently visible as a popover or toast:

UserVoice.push(['hide']);

removeTrigger

To remove the standard trigger from the page:

UserVoice.push(['removeTrigger']);

To remove a custom trigger from the page, just include the same element you used when adding the trigger:

UserVoice.push(['removeTrigger', '#elementId']);