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">Contact us</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 'contact' 'contact'
'smartvote'
'satisfaction'
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 SmartVote and posting suggestions.

Note: private forums are not supported.
smartvote_category_ids array (All categories) Limit suggestions compared in SmartVote to specific categories.

Array of category ids.
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”. If SmartVote is enabled, it will become the default mode.
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.
smartvote_enabled boolean true Set this to false to disable SmartVote. If post_suggestion_enabled is true, users can still post suggestions to your forum.
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
smartvote_menu_label Help us decide what to add next
Contact form 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.
SmartVote smartvote_title What should we add next?
post_suggestion_menu_label Post your own idea
smartvote_pick_button Pick
smartvote_subscribe_button Pick + Subscribe
suggestion_subscribe_title Great stuff!
suggestion_subscribe_body Do you want updates about this idea?
suggestion_subscribed_body We’ll update you as this idea progresses.
smartvote_success_title Your pick
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}.
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.
Instant Answers instant_answers_title Are any of these helpful?
instant_answers_related_articles_label Related articles
instant_answers_related_suggestions_label Related ideas
article_pick_button This answers my question
suggestion_subscribe_button I want this!
contact_confirm_title Awesome!!!
contact_confirm_body Do you still want to send us a message?
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.
Misc email_address_label Your email address
email_address_placeholder Email address

Related topics