Getting Started with the Widget

~ minute read
This is available in UserVoice Discovery Pro and Premium.

Not included in your plan? Want to learn more about the benefits? Leave us a message! If you're viewing this on our Help Center, click the Support bubble in the lower-right of this page.

 

We will walk through how to set up and use the Post Idea Widget. You can also use these instructions to set up the NPS widget to collect NPS scores (add-on feature).  For more customizable options of the widget, view this article. To learn how to pass User & Account traits via the Widget, see this article.

 

 

Set up the Post Idea Widget

The Post Idea widget allows your users to post ideas directly to a public forum. When they type in their idea and click "Next", they'll be prompted with matching ideas from your specified forum. If they find an existing idea that matches they'll have the option to become a voter. 

 Setting up the Post Idea Widget Code

  1. In your settings menu, navigate to the "Widgets" tab.
  2. In Step 1, set the starting experience to Post Idea
  3. Select a trigger position, accent color, and trigger color
  4. Copy the code in Step 2
  5. Add the widget code to your website
  6. Add the code to your website right before the final </body>
    body.png

Explanation of Code

mhm.png

Specifying a Forum

You have the option to specify a forum for the post idea widget. This will determine which relevant ideas are displayed in the instant answers feature, and also which forum that the user's idea will post to. If you do not specify a forum, the widget will use your default forum which is set in your settings. 

To specify a forum, add the forum ID to the widget code as shown below. 
forum_id: '209871', // Defaults to your account’s default forum
Please note: If you want to use the post idea widget with a private forum, or you have a private site, you will need to use a token-based single sign-on (JWT) and pass an SSO token in the widget. Learn more about this option here.

 

Embedding your Widget (Inline)

Add your widget code into the HTML of your page inside this div tag:

<div data-uv-embed=""post_idea"">Widget code goes here!</div>

Setting the widget dimensions

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

Example: 

<div data-uv-embed="contact" data-uv-height="325px" data-uv-width="100%">Widget code goes here!</div>

Preventing iOS Zoom

Add the following meta tag to the head of your website or app.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Disabling Auto-focus

By default, the widget's text field will be in focus when your page is loaded (the cursor will automatically be in the text box). You can disable this by adding "autofocus: false" to your widget code, like this:
 
UserVoice.push(['set', {autofocus: false}]);
 

Custom Trigger Setup Options

When setting up the basic code for the widget, you can select a trigger position, accent color, and trigger color to implement within your code. The default setup will cause the link to open the widget mode despite the configurations you chose when you created the widget initially.  

Next, add the data-uv-trigger HTML attribute to your element.  For Example:

<a href="https://back-up-url-goes-here.com" data-uv-trigger>Feedback</a>

Alternatively you can use a JS approach:

UserVoice.push(['addTrigger', '#custom-trigger-element', {
  mode: 'post_idea'
}]);

 

Advanced widget implementation

Related to

Related articles