Widgets

Widgets are the feedback interfaces your users interact with.

What is a Widget?

A widget is the actual feedback interface that appears on your website. There are two types:

• Feedback widgets: Modal forms for collecting detailed text feedback
• Reaction widgets: Inline buttons for quick sentiment (thumbs, emoji, rating)

Creating a Widget

1. Select an app from your dashboard
2. Click Create Widget
3. Configure your widget:
   • Name: Internal reference name
   • Type: Feedback (modal form) or Reaction (inline buttons)
   • Position: Where the widget appears on the page

Widget Configuration

Appearance

• Position: bottom-right, bottom-left, top-right, top-left, center
• Primary Color: Button and accent color
• Text Color: Form text color
• Background Color: Widget background color

Content

• Title: Header text for the feedback form
• Placeholder: Input placeholder text
• Submit Button: Button text
• Success Message: Shown after submission

Behavior

• Close on Submit: Auto-close after submission

Embedding a Widget

Script Tag (Simplest)

Copy the embed code from your widget settings:

<script
  src="https://cdn.feedvalue.com/widget.js"
  data-widget-id="YOUR_WIDGET_ID"
  async
></script>

INFO

Widget IDs are UUIDs (e.g., a1b2c3d4-e5f6-7890-abcd-ef1234567890). Copy the exact ID from your dashboard.

NPM Packages (Full Control)

For React, Vue, or Next.js apps, use our NPM packages for programmatic control:

npm install @feedvalue/react  # React / Next.js
npm install @feedvalue/vue    # Vue / Nuxt
npm install @feedvalue/core   # Vanilla JS

Packages Available

These SDK packages are published on npm. Use the script tag for the simplest embed, or switch to the package that matches your framework when you need programmatic control or headless mode.

With NPM packages you can:

• Open/close the widget programmatically
• Submit feedback via API
• Track user identity with feedback
• Use headless mode for custom UI

See the Installation guide for details.