Embedded (inline) Widget

~ minute read

Product Availability

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.

 

This will walk you through how to embed the widget as part of the page instead of having it open when a user clicks the "trigger".

The Basic Implementation

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>

The text between quotation marks is what determines which widget is displayed regardless of your widget settings when you generated the code. This means you can swap it out for these options:

  • satisfaction 
  • post idea

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}]);

 


 

Related articles