Classic Widget Developer Documentation

How to invoke the Classic Widget

There are multiple ways to use the Classic Widget. In all cases, you’re going to need two things: some widget options, and an API call that uses those widget options.

If you want to use our Tab, which, when clicked, will launch the widget:

UserVoice.push(['showTab', 'classic_widget', my_options]);

You can launch the widget from within your own JavaScript event handlers:

UserVoice.push(['showLightbox', 'classic_widget', my_options]);

You can place a simple HTML link on your page, and it will automatically launch the classic widget when clicked. Note that the options are encoded as data attributes, and keys are “dasherized”:

<a href="javascript:void(0)" data-uv-lightbox="classic_widget" data-uv-mode="full" data-uv-primary-color="#cc6d00" data-uv-link-color="#007dbf" data-uv-default-mode="support" data-uv-forum-id="34190">Feedback &amp; Support</a>

You can place the widget inline in your page. Note that the options are encoded as data attributes, and keys are “dasherized”:

<div data-uv-inline="classic_widget" data-uv-mode="full" data-uv-primary-color="#cc6d00" data-uv-link-color="#007dbf" data-uv-default-mode="support" data-uv-forum-id="34190" data-uv-width="100%" data-uv-height="550px"></div>

Classic Widget Options

The widget options are a JavaScript object. Example:

  var my_options = {
    mode: 'full',
    primary_color: '#cc6d00',
    link_color: '#007dbf',
    default_mode: 'support',
    forum_id: 34190,
    tab_label: 'Feedback & Support',
    tab_color: '#cc6d00',
    tab_position: 'middle-right',
    tab_inverted: false
  }

Keep in mind that once you specify the options, you need to use them, as described above. Example:

UserVoice.push(['showTab', 'classic_widget', my_options);

Here are the possible keys and their corresponding values:

Option Data Type Default Description
mode String ‘full’ Possible values: [“support”, “full” “feedback”]. Sets the widget to be a contact form (support), an idea collection widget (feedback), or both (full).
primary_color String ‘#CC6D00’ CSS color value. Affects the color of the widget.
link_color String ‘#007dbf’ CSS color value. Affects the color of links in the widget.
forum_id Integer (your default forum) A forum_id in UserVoice. Feedback submitted via the widget will be saved to this forum, and instant answers will be from this forum.
topic_id Integer (none) A topic_id in UserVoice. Determines which articles to show in the Classic Widget sidebar by default.
feedback_tab_name String ‘Give Feedback’ Affects the text of the feedback tab within the widget.
support_tab_name String ‘Contact Support’ Affects the text of the support tab within the widget.
tab_label String ‘feedback’ Affects the text shown inside the tab. Only relevant if your widget is using a tab.
tab_color String ‘#CC6D00’ CSS color value. Affects the color of the tab. Only relevant if your widget is using a tab.
tab_position String 'middle-right' Possible values: ['top-right', 'top-left', 'middle-right', 'middle-left', 'bottom-right', 'bottom-left']. Affects where the tab is shown within the browser. Only relevant if your widget is using a tab.
tab_inverted Boolean false Affects the colors of the tab. Only relevant if your widget is using a tab.
width String ‘100%’ CSS dimensional value. Specifies the width of the widget. Only relevant to the inline widget.
height String ‘550px’ CSS dimensional value. Specifies the height of the widget. Only relevant to the inline widget.

Other Options

If you want to log in your users via SSO when using the Classic Widget, we have this call:

UserVoice.push(['setSSO', '856487b34737e837347f738339aab837cf']);

If you want to set the locale of your user:

UserVoice.push(['setLocale', 'en']);

If you want to pre-populate the contact form with particular custom field values:

UserVoice.push(['setCustomFields',{“Product Area”:”Admin”, “Type”:”Bug”}]);


Feedback and Knowledge Base