Customizing your Widget

Here you'll find information on how to perform more advanced customization of the In-App Widget. 

You can configure settings globally by pushing the set command.

Note: Order of operations is significant. Only widgets added afterward will be affected by global changes to options.

Setting Global Settings One-by-One

UserVoice.push(['set', 'key', value]);
UserVoice.push(['set', 'key', value]);

Setting Multiple Global Settings at Once

Pass a valid Javascript object to set multiple keys:

UserVoice.push(['set', {
  key: value,
  key: value
}]);

Local (per-widget) Options

You can also override global options for a specific widget:

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

If creating a custom trigger or embedding a widget using HTML attributes, you can set local options using HTML attributes:

<a href="mailto:test@example.com" data-uv-trigger data-uv-key="value">Leave Feedback</a>

Example

UserVoice.push(['set', {
  // Options can also be set on specific widgets instead of globally
  height: '325px', // Widget height
  width: '100%', // Widget width
  accent_color: '#458dd6', // Widget accent color
  locale: 'en', // Defaults to your account’s localization
  forum_id: '209871', // Defaults to your account’s default forum
  post_suggestion_enabled: true,
  // Customize widget text
  // (see documentation below for all options)
  strings: {
    post_suggestion_title: 'Post an idea'
  }
}]);

UserVoice.push(['addTrigger', {
  // Options can also be set globally instead of on specific widgets
  trigger_position: 'bottom-right',
  trigger_color: 'white',
  trigger_background_color: 'rgba(46, 49, 51, 0.6)',
  trigger_prevent_default_enabled: true,
  mode: 'post_idea', // or satisfaction
  menu_enabled: true, // Defaults to false for custom triggers, embedded widgets, autoprompts, and the show method
}]);

Settings Reference

Customizing Widget Text (Advanced)

DISCLAIMER: You should always test the widget when overriding the default text. Strings are meant to be customized within reason, and really long strings may break the layout of the widget.

To override default widget text, pass the key/value pairs of the strings you want to change via the strings object:

UserVoice.push(['set', {
  // (include other options here)
  strings: {
    key: 'value',
    key: 'value'
    // Etc.
  }
}]);

Customizable Text