npm package: @product7/product7-js
Description: JavaScript SDK for integrating Product7 feedback widgets into any website
Author: Product7 Team
Latest version: 0.3.9

# Product7 JS

[![npm version](https://badge.fury.io/js/%40product7%2Fproduct7-js.svg)](https://badge.fury.io/js/%40product7%2Fproduct7-js)
[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@product7/product7-js)](https://bundlephobia.com/package/@product7/product7-js)

The official JavaScript SDK for [Product7](https://product7.io). Embed feedback collection, live chat, surveys, and changelogs into any web app.

---

## Installation

**npm**

```bash
npm install @product7/product7-js
```

**CDN**

```html
<script src="https://cdn.jsdelivr.net/npm/@product7/product7-js@latest/dist/product7-js.min.js"></script>
```

---

## Quick Start

### npm / framework

```javascript
import { Product7 } from '@product7/product7-js';

const sdk = new Product7({
	workspace: 'your-workspace',
});

await sdk.init();
await sdk.identify({
	user_id: 'user_123',
	email: 'user@example.com',
	name: 'Jane Doe',
	custom_fields: { plan: 'pro' },
});

const widget = sdk.createFeedbackWidget({ position: 'bottom-right' });
widget.mount();
```

### CDN

```html
<script src="https://cdn.jsdelivr.net/npm/@product7/product7-js@latest/dist/product7-js.min.js"></script>
<script>
	const sdk = new window.Product7.Product7SDK({
		workspace: 'your-workspace',
	});

	await sdk.init();
	await sdk.identify({
		user_id: 'user_123',
		email: 'user@example.com',
		name: 'Jane Doe',
	});

	const widget = sdk.createFeedbackWidget({ position: 'bottom-right' });
	widget.mount();
</script>
```

> Use `window.Product7.Product7SDK` on CDN. `window.Product7` is a plain object, not a constructor.

---

## Widgets

| Widget    | Type string   | Description                                           |
| --------- | ------------- | ----------------------------------------------------- |
| Feedback  | `'feedback'`  | Floating button that opens a feedback panel or modal  |
| Messenger | `'messenger'` | Live chat, help articles, and changelog in one widget |
| Survey    | `'survey'`    | NPS, CSAT, CES, and custom multi-step surveys         |
| Inline    | `'inline'`    | Embed feedback directly into a page element           |

```javascript
// Feedback
const feedback = sdk.createFeedbackWidget({
	position: 'bottom-right',
});
feedback.mount();

// Messenger
const messenger = sdk.createMessengerWidget({
	position: 'bottom-right',
	teamName: 'Support Team',
	enableHelp: true,
	enableChangelog: true,
});
messenger.mount();

// Survey: fetch active surveys and show on load
const surveys = await sdk.getActiveSurveys({ includeEligibility: true });
if (surveys.length > 0) {
	sdk.showSurveyById(surveys[0].surveyId, { position: 'center' });
}
```

```javascript
// Headless feedback widget with your own trigger
const feedback = sdk.createFeedbackWidget({
	headless: true,
	boardName: 'feature-requests',
});
feedback.mount();

document
	.querySelector('#leave-feedback')
	?.addEventListener('click', () => feedback.open());
```

Legacy compatibility is still available through `sdk.createWidget('button', ...)`, but new integrations should prefer `sdk.createFeedbackWidget(...)` or `sdk.createWidget('feedback', ...)`.

---

## Key Options

```javascript
new Product7({
	workspace: 'your-workspace', // required
	debug: false, // enable console logging
	mock: false, // run without a backend (dev/testing)
});
```

```javascript
await sdk.identify({
	user_id: 'user_123', // required: user_id or email
	email: 'user@example.com',
	name: 'Jane Doe',
	custom_fields: { plan: 'pro' },
});
```

---

## Cleanup

```javascript
sdk.destroy(); // call on app unmount to prevent memory leaks
```

---

## Docs & Support

- Full documentation: [docs.product7.io](https://docs.product7.io)
- Issues: [GitHub Issues](https://github.com/product7/product7-js/issues)
- Email: [support@product7.io](mailto:support@product7.io)

---

Made by the [Product7 Team](https://product7.io)