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

Coming Soon

NPM packages are currently in development. Check back soon for availability on npm.

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.