Installation

FeedValue works with any website. Choose your preferred installation method below.

Script Tag (Simplest)

The quickest way to add FeedValue to any site:

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

Add this code before the closing </body> tag on any page.

NPM Packages

Coming Soon

NPM packages are currently in development. Check back soon for availability on npm. In the meantime, use the script tag method above.

For framework integration with full TypeScript support:

React / Next.js

npm install @feedvalue/react
# or
pnpm add @feedvalue/react

See React Integration or Next.js Integration.

Vue / Nuxt

npm install @feedvalue/vue
# or
pnpm add @feedvalue/vue

See Vue Integration.

Core (Vanilla JavaScript)

For advanced usage or custom frameworks:

npm install @feedvalue/core
# or
pnpm add @feedvalue/core

import { FeedValue } from '@feedvalue/core';

const widget = FeedValue.init({ widgetId: 'your-widget-id' });

widget.on('ready', () => {
  console.log('Widget ready!');
});

widget.open();

Package Comparison

Package	Use Case	Features
Script tag	Any website	Drop-in, no build step
@feedvalue/react	React/Next.js apps	Hooks, Provider, TypeScript
@feedvalue/vue	Vue/Nuxt apps	Composables, Plugin, TypeScript
@feedvalue/core	Custom integration	Base SDK, events, API

Framework Integrations

For detailed setup guides:

• WordPress
• React
• Next.js
• Vue

Content Security Policy (CSP)

If your site uses a Content Security Policy, allow these domains:

script-src: https://cdn.feedvalue.com
connect-src: https://api.feedvalue.com

Example CSP header:

Content-Security-Policy: script-src 'self' https://cdn.feedvalue.com; connect-src 'self' https://api.feedvalue.com;

INFO

This is only required if your site has a restrictive CSP. Most sites don't need this.

Verifying Installation

After installation:

1. Visit your website
2. Look for the feedback button (default: bottom-right corner)
3. Click it to verify the modal opens

TIP

Use your browser's developer tools (F12) to check for any console errors if the widget doesn't appear.

Headless Mode

All NPM packages support headless mode for complete UI control:

// React
<FeedValueProvider widgetId="..." headless>

// Vue
createFeedValue({ widgetId: '...', headless: true })

// Core
FeedValue.init({ widgetId: '...', headless: true })

In headless mode:

• No DOM elements are injected
• You build your own trigger button and modal
• All API methods and events still work
• Dashboard config is still fetched (for validation, etc.)

See the framework-specific guides for headless examples.