# Installation

## Package Installation

### npm

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

### Yarn

```bash
yarn add @product7/product7-js
```

### CDN

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

---

## Quick Setup

### 1. Create the SDK

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

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

### 2. Initialize the session

```javascript
await sdk.init();
```

### 3. Identify the current user

```javascript
await sdk.identify({
	user_id: 'user_123',
	email: 'user@example.com',
	name: 'John Doe',
	custom_fields: {
		plan: 'pro',
		role: 'admin',
	},
});
```

### 4. Create and mount a widget

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

---

## Installation Methods

### Method 1: npm / ESM

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

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

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

const widget = sdk.createFeedbackWidget();
widget.mount();
```

### Method 2: CDN

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

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

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

	bootProduct7();
</script>
```

### Method 3: Headless Feedback

Use `headless: true` when you want to control opening from your own UI instead of rendering the default floating trigger.

```javascript
const widget = sdk.createFeedbackWidget({
	headless: true,
	boardName: 'feature-requests',
});

widget.mount();

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

---

## Framework Examples

### React

```jsx
import { useEffect, useRef } from 'react';
import { Product7 } from '@product7/product7-js';

function App() {
	const sdkRef = useRef(null);
	const widgetRef = useRef(null);

	useEffect(() => {
		let disposed = false;

		(async () => {
			const sdk = new Product7({
				workspace: 'your-workspace',
				boardName: 'feature-requests',
			});

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

			if (disposed) {
				sdk.destroy();
				return;
			}

			sdkRef.current = sdk;
			widgetRef.current = sdk.createFeedbackWidget({
				position: 'bottom-right',
			});
			widgetRef.current.mount();
		})();

		return () => {
			disposed = true;
			widgetRef.current?.destroy();
			sdkRef.current?.destroy();
		};
	}, []);

	return <div>Your App</div>;
}
```

### Vue

```vue
<script setup>
	import { onMounted, onUnmounted, ref } from 'vue';
	import { Product7 } from '@product7/product7-js';

	const sdk = ref(null);
	const widget = ref(null);

	onMounted(async () => {
		sdk.value = new Product7({
			workspace: 'your-workspace',
			boardName: 'feature-requests',
		});

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

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

	onUnmounted(() => {
		widget.value?.destroy();
		sdk.value?.destroy();
	});
</script>
```

### TypeScript

```typescript
import {
	Product7,
	type FeedbackConfig,
	type FeedbackWidget,
} from '@product7/product7-js';

const config: FeedbackConfig = {
	workspace: 'your-workspace',
	boardName: 'feature-requests',
	theme: 'light',
};

const sdk = new Product7(config);
await sdk.init();
await sdk.identify({
	user_id: 'user_123',
	email: 'user@example.com',
	name: 'John Doe',
});

const widget: FeedbackWidget = sdk.createFeedbackWidget({
	headless: true,
});
widget.mount();
```

---

## Troubleshooting

### SDK not initializing

Check that `workspace` is set:

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

### Identify not working

Call `identify()` after `init()` and pass at least `user_id` or `email`:

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

### Widget not showing

Make sure you initialize first, then mount the widget:

```javascript
await sdk.init();
const widget = sdk.createFeedbackWidget();
widget.mount();
```

### Custom trigger does nothing

If you use `headless: true`, you still need to call `mount()` before `open()`:

```javascript
const widget = sdk.createFeedbackWidget({ headless: true });
widget.mount();
widget.open();
```

### CDN usage fails

Use `window.Product7.Product7SDK` for the class-based API:

```html
<script>
	const sdk = new window.Product7.Product7SDK({
		workspace: 'your-workspace',
	});
</script>
```