Customizing your widget
You can set options globally by pushing the set command. Note that order of operations is significant. Only widgets added afterward will be affected by global changes to options.
Setting global options one-by one:
UserVoice.push(['set', 'key', value]); UserVoice.push(['set', 'key', value]);
Setting multiple global options 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>
Options:
| Option key | Type | Default value | Description |
|---|---|---|---|
| trigger_style | string | 'icon' |
What the default trigger looks like. You can also use your own custom trigger.'icon''tab'
|
| trigger_position | string |
'bottom-right' for an icon trigger'right' for a tab trigger
|
Determine which position on the screen the trigger will appear. Icon-style positions: 'bottom-right''bottom-left''top-right''top-left'Additional Tab-style positions: 'right''left'
|
| trigger_color | string | 'white' |
Specify the foreground color of the trigger. Any valid CSS color value is acceptable. |
| trigger_background_color | string | 'rgba(46, 49, 51, 0.6)' |
Specify the background-color of the trigger. Any valid CSS color value is acceptable. |
| trigger_prevent_default_enabled | boolean | true |
Prevents default event from occurring when the user clicks on a trigger. Set to false to allow default events to fire in addition to the trigger click event. |
| target | string; false; DOM element |
'self' (if the widget was triggered from an element on the screen)false (if there isn’t an element that triggered the widget - appears as a toast) |
If using the popover widget style, you can choose a different element to target than the trigger used to spawn the widget. Useful if your custom trigger is inside a dropdown menu and you want the popover to point to the menu’s parent.'self' (default; popover)false (default if there is no ‘self’ element to target; toast)DOM element (popover)'#elementId' (popover) |
| position | string |
'automatic' (for popovers)'bottom-right' (for toasts)
|
Widget position. If a target is set, then the position determines which side of the target the widget appears on. Popover positions: 'automatic''top''bottom''right''left'Toast positions: 'bottom-right''bottom-left''top-right''top-left'
|
| height | string | '325px' |
If embedded inline and the containing element already has a height set via CSS, the widget will automatically match that height—otherwise it defaults to 325px. |
| width | string | '100%' (when embedded inline)'296px' (when displayed in a popover or toast) |
Widget width. |
| accent_color | string | #458dd6 | Customize the accent and highlight color for the widget to whatever color specified. It is best to use a color that white text can be displayed over. Any valid CSS color value is acceptable. |
| mode | string | 'post_idea' |
'satisfaction''contact' (HelpDesk only)
|
| locale | string | Your account’s default locale (set in the admin console) | Specify the language various UI elements will be displayed in. This does not change the language of your content. e.g., 'en' |
| forum_id | int | Your account’s default forum | Specify which forum the toolkit uses for posting suggestions. Note: private forums are not supported. |
| ticket_custom_fields | object | Pass in field:value pairs for ticket custom fields (set via your admin console). | |
| menu_enabled | boolean | true (when opening the widget via the default trigger)false (for custom triggers, 'autoprompt', 'show', and 'embed' methods) |
Determines if the first screen on the widget includes menu items for other actions. Set to true if you want to show the menu when creating custom triggers. |
| contact_enabled | boolean | true |
Set this to false to disable links to “Send us a message”. |
| screenshot_enabled | boolean | true |
Allow users to submit a screenshot of the current window when submitting a message with the contact form. |
| permalinks_enabled | boolean | true |
Disable web portal permalinks to suggestions and articles when viewing Instant Answer results. |
| post_suggestion_enabled | boolean | true |
Set this to false to prevent users from posting suggestions to your forum. |
| strings | object* | Advanced: Specify a series of string key/value pairs to override default widget text. |
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.
}
}]);
| Context | Key | Default value (string) |
|---|---|---|
| Menu items | contact_menu_label | Send us a message |
| Posting a suggestion | post_suggestion_title | Post an idea |
| post_suggestion_body | When you post an idea to our feedback forum, others will be able to subscribe to it and make comments. | |
| post_suggestion_message_placeholder | Describe your idea | |
| post_suggestion_skip_instant_answers_button | Skip and post idea | |
| post_suggestion_details_title | Additional details | |
| suggestion_title_label | Idea title | |
| suggestion_title_placeholder | Summarize your suggestion | |
| suggestion_category_label | Category | |
| post_suggestion_submit_button | Post idea | |
| post_suggestion_success_title | Thank you! | |
| post_suggestion_success_body | Your feedback has been posted to our %{link:feedback forum}. | |
| Instant Answers | instant_answers_title | Are any of these helpful? |
| instant_answers_related_suggestions_label | Related ideas | |
| suggestion_subscribe_button | I want this! | |
| post_suggestion_confirm_title | Okay. | |
| post_suggestion_confirm_body | Do you still want to submit an idea? | |
| instant_answers_success_title | Thank you! | |
| instant_answers_success_body | We take your feedback to heart. | |
| instant_answers_related_articles_label | Related articles | |
| article_pick_button | This answers my question | |
| contact_confirm_title | Awesome!!! | |
| contact_confirm_body | Do you still want to send us a message? | |
| NPS® Rating | satisfaction_message_title | Why did you pick that score? |
| satisfaction_message_placeholder | Enter your feedback | |
| satisfaction_success_title | Thank you! | |
| satisfaction_success_body | We take your feedback to heart. | |
| Contact form (HelpDesk only) | contact_title | Send us a message |
| contact_message_placeholder | Give feedback or ask for help | |
| contact_skip_instant_answers_button | Skip and send message | |
| contact_details_title | Additional details | |
| contact_submit_button | Send message | |
| contact_success_title | Message sent! | |
| contact_success_body | We’ll be in touch. | |
| Misc | email_address_label | Your email address |
| email_address_placeholder | Email address |