# 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',
	avatar: 'https://example.com/avatar.png', // optional
	attributes: { plan: 'pro', role: 'admin' }, // optional, for segmentation
	company: { id: 'company_123', name: 'Acme Inc' }, // optional
});

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  |
| Live Chat | `'liveChat'` | 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();

// Live Chat
const liveChat = sdk.createLiveChatWidget({
	position: 'bottom-right',
	teamName: 'Support Team',
	enableHelp: true,
	enableChangelog: true,
});
liveChat.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',
	avatar: 'https://...', // optional
	attributes: { plan: 'pro', role: 'admin' }, // optional, for segmentation
	company: {
		// optional
		id: 'company_123',
		name: 'Acme Inc',
		monthly_spend: 99.99,
	},
});
```

---

## 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)