Embed UserVoice feedback widgets in Webflow | Webflow blog

User voice offers customer feedback collection, idea voting, and product roadmap features via JavaScript widgets that integrate with Webflow sites.

This guide covers the Widget Integration Pattern: the fastest path to embedding UserVoice feedback functionality into your Webflow site using client-side JavaScript. For custom deployments that require server-side API access, CMS sync, or webhook integrations, see the accompanying guide: Build custom feedback portals with UserVoice API and Webflow.

What makes this integration possible

By embedding the UserVoice widget in Webflow, visitors can submit feature requests, vote on ideas, and view product roadmaps without leaving your site. The widget approach requires minimal configuration and works entirely on the client side: no server infrastructure is required.

Main capabilities:

• Floating feedback buttons or custom trigger elements
• Idea submission forms with customizable fields
• Voting interface for existing suggestions
• Satisfaction surveys and NPS collection
• Multilingual support via locale configuration

Architecture overview

The widget pattern uses the UserVoice JavaScript SDK embedded in Webflow’s footer code via Site Settings. The widget works in a pure client-side architecture, with the JavaScript SDK handling authentication and initiating API communication with UserVoice servers directly from the browser.

This pattern is ideal if you need:

• Fast deployment without backend development
• Standard functionality for collecting feedback and votes
• Minimal maintenance overhead

Limits: The widget approach does not provide access to the UserVoice Admin API, meaning you cannot programmatically create suggestions, sync data with Webflow CMS, or implement custom business logic. See the API Integration Guide for these use cases.

Requirements

Before deploying the widget, you’ll need accounts and credentials from both platforms.

Set up your UserVoice account

1. Create a UserVoice account and set up a forum via the Admin console settings
2. Find your widget key in the Admin console under Settings → Integrations → Widget
3. Make a note of your forum ID (visible in the forum URL or settings)
4. Make a note of your subdomain (de yourcompany part of yourcompany.uservoice.com)

Configure your Webflow workspace

1. Make sure your workspace uses a plan that supports custom code (Core, Growth, Agency, Freelancer subscription or active site subscription required)
2. Check if you have permission to edit site settings (required to add custom code)

Add the UserVoice widget to Webflow

Place the UserVoice JavaScript SDK in the footer code section of your Webflow site.

Step 1: Access custom code settings

Navigate to Site Settings → Custom Code → Footer Code in your Webflow project.

Step 2: Add the initialization snippet

// UserVoice JavaScript SDK initialization
(function(){
  var uv=document.createElement('script');
  uv.type='text/javascript';
  uv.async=true;
  uv.src='//widget.uservoice.com/YOUR_ACCOUNT_KEY.js';
  var s=document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(uv,s)
})();

// Widget configuration
UserVoice.push(['set', {
  accent_color: '#458dd6',
  locale: 'en',
  forum_id: 209871,
  post_suggestion_enabled: true,
  strings: {
    post_suggestion_title: 'Post an idea'
  }
}]);

// Add floating trigger button
UserVoice.push(['addTrigger', {
  trigger_position: 'bottom-right',
  trigger_color: 'white',
  trigger_background_color: 'rgba(46, 49, 51, 0.6)',
  trigger_prevent_default_enabled: true,
  mode: 'post_idea',
  menu_enabled: true
}]);

Replace YOUR_ACCOUNT_KEY with your UserVoice widget key and forum_id with your target forum ID.

Step 3: Publish your site

Save the custom code settings and publish your Webflow site to activate the widget.

Widget configuration options

Global settings

Pass these parameters to UserVoice.push(['set', {...}]):

Trigger settings

Pass these parameters to UserVoice.push(['addTrigger', {...}]):

Custom trigger elements

Instead of using the standard floating button, you can activate the widget from any element on your page.

HTML attribute method

Add the data-uv-trigger attribute to each clickable element:

"#" data-uv-trigger>Share your feedback

JavaScript method

For advanced operation, use the addTrigger method with a target element:

UserVoice.push(['addTrigger', {
  target: '#feedback-button',
  mode: 'post_idea'
}]);

This binds the widget to an element with id="feedback-button" in your Webflow design.

Widget style

UserVoice offers customization via multiple methods:

Remark: Translation only applies to widget UI elements, not to user-generated content or custom fields.

Verification and testing

After adding the widget code:

1. Preview your site: Go to Webflow preview mode to check if the widget is displayed correctly
2. Check for errors: Open your browser’s developer console (F12) and look for JavaScript errors
3. Test submission: Submit a test idea via the widget
4. Verify in UserVoice: Confirm that the test submission appears in your UserVoice management console
5. Publish and retest: Publish to your production domain and repeat the tests

Domain configuration

The widget requires domain validation. Make sure your domain-restricted configurations include:

• .webflow.io (staging/preview)
• .canvas.webflow.com (canvas example)
• Your production domain

Troubleshooting

Additional Resources

Custom code is considered an advanced change, and Webflow support does not cover custom code troubleshooting.

‍