@product7/product7-js 0.2.4 → 0.2.6

package/dist/README.md

@@ -1,9 +1,9 @@
-# Feedback Widget SDK
+# 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)
 
-A lightweight, customizable JavaScript SDK for collecting user feedback on any website. Built for the Product7 feedback platform.
+The official JavaScript SDK for Product7. Collect feedback, chat with users, run surveys, and share changelogs — all through lightweight, embeddable widgets.
 
 ---
 
@@ -30,23 +30,29 @@ A lightweight, customizable JavaScript SDK for collecting user feedback on any w
 
 ## Quick Start
 
-### CDN Installation (Recommended)
+### CDN Installation
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@product7/product7-js/dist/product7-js.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@product7/product7-js@latest/dist/product7-js.min.js"></script>
 <script>
-	const feedback = new Product7({
+	const sdk = new window.Product7.Product7SDK({
 		workspace: 'your-workspace-name',
-		boardName: 'your-board-id',
+		metadata: {
+			user_id: 'user_123',
+			email: 'user@example.com',
+			name: 'Jane Doe',
+		},
 	});
 
-	feedback.init().then(() => {
-		const widget = feedback.createWidget('button');
-		widget.mount();
-	});
+	await sdk.init();
+
+	const widget = sdk.createWidget('button', { position: 'bottom-right' });
+	widget.mount();
 </script>
 ```
 
+> `window.Product7.Product7SDK` is the constructable class exposed by the CDN bundle. Do not use `new window.Product7(...)` directly — `window.Product7` is a plain object, not a class.
+
 ### NPM Installation
 
 ```bash
@@ -56,32 +62,20 @@ npm install @product7/product7-js
 ```javascript
 import { Product7 } from '@product7/product7-js';
 
-const feedback = new Product7({
+const sdk = new Product7({
 	workspace: 'your-workspace-name',
-	boardName: 'your-board-id',
+	metadata: {
+		user_id: 'user_123',
+		email: 'user@example.com',
+		name: 'Jane Doe',
+	},
 });
 
-await feedback.init();
-const widget = feedback.createWidget('button');
+await sdk.init();
+const widget = sdk.createWidget('button', { position: 'bottom-right' });
 widget.mount();
 ```
 
-### Auto-Initialization
-
-```html
-<script>
-	window.Product7Config = {
-		workspace: 'your-workspace',
-		boardName: 'your-board-id',
-		autoCreate: {
-			type: 'button',
-			position: 'bottom-right',
-		},
-	};
-</script>
-<script src="https://cdn.jsdelivr.net/npm/@product7/product7-js/dist/product7-js.min.js"></script>
-```
-
 ---
 
 ## Documentation
@@ -98,7 +92,7 @@ widget.mount();
 **Button Widget with Side Panel**
 
 ```javascript
-const widget = feedback.createWidget('button', {
+const widget = sdk.createWidget('button', {
 	position: 'bottom-right',
 	displayMode: 'panel', // Slides in from the side
 	size: 'medium',
@@ -109,7 +103,7 @@ widget.mount();
 **Button Widget with Modal**
 
 ```javascript
-const widget = feedback.createWidget('button', {
+const widget = sdk.createWidget('button', {
 	position: 'bottom-right',
 	displayMode: 'modal',
 	size: 'large',
@@ -123,14 +117,14 @@ widget.mount();
 **Inline Widget**
 
 ```javascript
-const inline = feedback.createWidget('inline');
+const inline = sdk.createWidget('inline');
 inline.mount('#feedback-container');
 ```
 
 **Messenger Widget**
 
 ```javascript
-const messenger = feedback.createWidget('messenger', {
+const messenger = sdk.createWidget('messenger', {
 	position: 'bottom-right',
 	theme: 'light',
 	teamName: 'Support',
@@ -165,7 +159,7 @@ messenger.mount();
 | `position`        | string | 'bottom-right' | Button position (see below)                    |
 | `backgroundColor` | string | '#ffffff'      | Panel/modal background color                   |
 | `textColor`       | string | '#1F2937'      | Text color                                     |
-| `primaryColor`    | string | ''#21244A      | Button and accent color                        |
+| `primaryColor`    | string | '#21244A'      | Button and accent color                        |
 
 ### Position Options
 
@@ -192,11 +186,11 @@ messenger.mount();
 Instead of predefined themes, use direct color values for full flexibility:
 
 ```javascript
-const widget = feedback.createWidget('button', {
+const widget = sdk.createWidget('button', {
 	displayMode: 'modal',
 	backgroundColor: '#1a1a2e', // Dark background
-	textColor: '#ffffff', // White text
-	primaryColor: '#e94560', // Red accent
+	textColor: '#ffffff',       // White text
+	primaryColor: '#e94560',    // Red accent
 });
 ```
 
@@ -213,18 +207,23 @@ This approach works better than predefined themes because:
 Hide the default floating button and trigger from your own UI:
 
 ```javascript
-window.Product7.onReady((sdk) => {
-	const widget = sdk.createWidget('button', {
-		displayMode: 'modal',
-		size: 'medium',
-	});
-	widget.mount();
-	widget.hide(); // Hide the floating button
+const sdk = new Product7({
+	workspace: 'your-workspace',
+	metadata: { user_id: 'user_123', email: 'user@example.com', name: 'Jane Doe' },
+});
 
-	// Trigger from your own button
-	document.getElementById('my-feedback-btn').addEventListener('click', () => {
-		widget.openPanel();
-	});
+await sdk.init();
+
+const widget = sdk.createWidget('button', {
+	displayMode: 'modal',
+	size: 'medium',
+});
+widget.mount();
+widget.hide(); // Hide the floating button
+
+// Trigger from your own button
+document.getElementById('my-feedback-btn').addEventListener('click', () => {
+	widget.openPanel();
 });
 ```
 
@@ -235,14 +234,17 @@ window.Product7.onReady((sdk) => {
 For development without a backend connection:
 
 ```javascript
-window.Product7Config = {
+const sdk = new Product7({
 	workspace: 'demo',
 	mock: true, // No backend required
 	metadata: {
 		user_id: 'test_user',
 		email: 'test@example.com',
+		name: 'Test User',
 	},
-};
+});
+
+await sdk.init();
 ```
 
 Mock mode simulates:
@@ -264,9 +266,9 @@ The SDK supports multiple environments for development and production use.
 ### Production (Default)
 
 ```javascript
-const feedback = new Product7({
+const sdk = new Product7({
 	workspace: 'your-workspace',
-	environment: 'production', // Default, can be omitted
+	env: 'production', // Default, can be omitted
 });
 ```
 
@@ -278,9 +280,9 @@ const feedback = new Product7({
 ### Staging
 
 ```javascript
-const feedback = new Product7({
+const sdk = new Product7({
 	workspace: 'your-workspace',
-	environment: 'staging',
+	env: 'staging',
 });
 ```
 
@@ -294,7 +296,7 @@ const feedback = new Product7({
 For self-hosted or custom deployments:
 
 ```javascript
-const feedback = new Product7({
+const sdk = new Product7({
 	workspace: 'your-workspace',
 	apiUrl: 'https://your-custom-api.com/api/v1',
 });
@@ -308,8 +310,7 @@ Configuration values merge in this order (later overrides earlier):
 
 1. **Default values** — Built-in SDK defaults
 2. **Backend config** — Returned from `/widget/init` API
-3. **SDK config** — `window.Product7Config`
-4. **Widget options** — Passed to `createWidget()`
+3. **Widget options** — Passed to `createWidget()`
 
 This allows backend-managed defaults while permitting per-widget customization.
 
@@ -318,11 +319,11 @@ This allows backend-managed defaults while permitting per-widget customization.
 ## Events
 
 ```javascript
-feedback.eventBus.on('feedback:submitted', (data) => {
+sdk.eventBus.on('feedback:submitted', (data) => {
 	console.log('Feedback submitted:', data);
 });
 
-feedback.eventBus.on('feedback:error', (error) => {
+sdk.eventBus.on('feedback:error', (error) => {
 	console.error('Submission failed:', error);
 });
 ```
@@ -404,7 +405,7 @@ The SDK includes a full-featured messenger widget for real-time customer convers
 ### Quick Start
 
 ```javascript
-const feedback = new Product7({
+const sdk = new Product7({
 	workspace: 'your-workspace',
 	metadata: {
 		user_id: 'user_123',
@@ -413,9 +414,9 @@ const feedback = new Product7({
 	},
 });
 
-await feedback.init();
+await sdk.init();
 
-const messenger = feedback.createWidget('messenger', {
+const messenger = sdk.createWidget('messenger', {
 	position: 'bottom-right',
 	theme: 'light',
 	teamName: 'Support Team',
@@ -486,16 +487,16 @@ messenger.setUnreadCount(3);
 
 ```javascript
 // Message sent
-feedback.eventBus.on('messenger:messageSent', (data) => {
+sdk.eventBus.on('messenger:messageSent', (data) => {
 	console.log('Message sent:', data.message);
 });
 
 // Messenger opened/closed
-feedback.eventBus.on('messenger:opened', () => {
+sdk.eventBus.on('messenger:opened', () => {
 	console.log('Messenger opened');
 });
 
-feedback.eventBus.on('messenger:closed', () => {
+sdk.eventBus.on('messenger:closed', () => {
 	console.log('Messenger closed');
 });
 ```
@@ -524,13 +525,13 @@ The SDK automatically detects the environment based on the hostname:
 
 ```javascript
 // Auto-detection (recommended)
-const feedback = new Product7({
+const sdk = new Product7({
 	workspace: 'your-workspace',
 	// env is auto-detected from window.location.hostname
 });
 
 // Manual override
-const feedback = new Product7({
+const sdk = new Product7({
 	workspace: 'your-workspace',
 	env: 'staging', // Force staging environment
 });
@@ -554,18 +555,21 @@ The SDK includes a powerful survey widget for collecting structured user feedbac
 ### Quick Start
 
 ```javascript
-const feedback = new Product7({
+const sdk = new Product7({
 	workspace: 'your-workspace',
-	boardName: 'your-board-id',
+	metadata: {
+		user_id: 'user_123',
+		email: 'user@example.com',
+		name: 'Jane Doe',
+	},
 });
 
-await feedback.init();
+await sdk.init();
 
 // Show NPS survey
-feedback.showSurvey({
+sdk.showSurvey({
 	surveyType: 'nps',
-	description:
-		'To what extent do you agree or disagree that our tools support the work you do?',
+	description: 'To what extent do you agree or disagree that our tools support the work you do?',
 	ratingScale: 5,
 	showTitle: false,
 	showDescription: true,
@@ -581,22 +585,22 @@ feedback.showSurvey({
 ### Survey Configuration Options
 
 ```javascript
-feedback.showSurvey({
+sdk.showSurvey({
 	surveyId: 'backend-survey-id', // Optional: links response to backend survey
-	surveyType: 'nps', // 'nps' | 'csat' | 'ces' | 'custom'
-	position: 'bottom-right', // 'bottom-right' | 'bottom-left' | 'center' | 'bottom'
-	theme: 'light', // 'light' | 'dark'
+	surveyType: 'nps',             // 'nps' | 'csat' | 'ces' | 'custom'
+	position: 'bottom-right',      // 'bottom-right' | 'bottom-left' | 'center' | 'bottom'
+	theme: 'light',                // 'light' | 'dark'
 	title: 'Your survey title',
 	description: 'Optional description',
-	ratingScale: 5, // NPS scale (default 5, set 11 for 0-10)
-	showTitle: false, // default false for single-step rating surveys
-	showDescription: true, // default true for single-step rating surveys
-	showFeedbackInput: false, // default false for single-step rating surveys
-	showSubmitButton: false, // default false for single-step rating surveys
-	autoSubmitOnSelect: true, // default true for single-step rating surveys
-	lowLabel: 'Not likely', // Low end label (NPS/CES)
-	highLabel: 'Very likely', // High end label (NPS/CES)
-	customQuestions: [], // For custom surveys
+	ratingScale: 5,               // NPS scale (default 5, set 11 for 0-10)
+	showTitle: false,             // default false for single-step rating surveys
+	showDescription: true,        // default true for single-step rating surveys
+	showFeedbackInput: false,     // default false for single-step rating surveys
+	showSubmitButton: false,      // default false for single-step rating surveys
+	autoSubmitOnSelect: true,     // default true for single-step rating surveys
+	lowLabel: 'Not likely',       // Low end label (NPS/CES)
+	highLabel: 'Very likely',     // High end label (NPS/CES)
+	customQuestions: [],          // For custom surveys
 	onSubmit: (response) => {},
 	onDismiss: () => {},
 });
@@ -610,8 +614,8 @@ For surveys configured in the Product7 dashboard, use `showSurveyById()` to fetc
 
 ```javascript
 // Show a specific survey by its backend ID
-await feedback.showSurveyById('survey_abc123', {
-	position: 'center', // Override position if needed
+await sdk.showSurveyById('survey_abc123', {
+	position: 'center',
 	onSubmit: (response) => {
 		console.log('Survey completed:', response);
 	},
@@ -624,29 +628,17 @@ Retrieve surveys that match the current user's targeting criteria:
 
 ```javascript
 // Get all active surveys for the current context
-const surveys = await feedback.getActiveSurveys();
+const surveys = await sdk.getActiveSurveys({ includeEligibility: true });
 
 console.log('Available surveys:', surveys);
-// [{ id: 'survey_123', type: 'nps', title: '...', ... }]
+// [{ surveyId: 'survey_123', surveyType: 'nps', title: '...', ... }]
 
 // Show the first matching survey
 if (surveys.length > 0) {
-	await feedback.showSurveyById(surveys[0].id);
+	await sdk.showSurveyById(surveys[0].surveyId, { position: 'center' });
 }
 ```
 
-With custom targeting context:
-
-```javascript
-const surveys = await feedback.getActiveSurveys({
-	url: '/dashboard/settings', // Override current URL
-	userProperties: {
-		plan: 'enterprise',
-		feature_usage: 'high',
-	},
-});
-```
-
 ---
 
 ### Survey Types
@@ -654,10 +646,9 @@ const surveys = await feedback.getActiveSurveys({
 #### NPS Survey (Net Promoter Score)
 
 ```javascript
-feedback.showSurvey({
+sdk.showSurvey({
 	surveyType: 'nps',
-	description:
-		'To what extent do you agree or disagree that our tools support the work you do?',
+	description: 'To what extent do you agree or disagree that our tools support the work you do?',
 	ratingScale: 5,
 	showTitle: false,
 	showDescription: true,
@@ -677,7 +668,7 @@ feedback.showSurvey({
 #### CSAT Survey (Customer Satisfaction)
 
 ```javascript
-feedback.showSurvey({
+sdk.showSurvey({
 	surveyType: 'csat',
 	title: 'How satisfied are you with our service?',
 	position: 'center',
@@ -691,7 +682,7 @@ feedback.showSurvey({
 #### CES Survey (Customer Effort Score)
 
 ```javascript
-feedback.showSurvey({
+sdk.showSurvey({
 	surveyType: 'ces',
 	title: 'How easy was it to complete your task?',
 	position: 'bottom',
@@ -704,7 +695,7 @@ feedback.showSurvey({
 #### Custom Survey
 
 ```javascript
-feedback.showSurvey({
+sdk.showSurvey({
 	surveyType: 'custom',
 	title: 'Quick Feedback',
 	customQuestions: [
@@ -743,7 +734,7 @@ Trigger surveys based on user actions:
 document.getElementById('checkout-btn').addEventListener('click', async () => {
 	await processPayment();
 
-	feedback.showSurvey({
+	sdk.showSurvey({
 		surveyType: 'csat',
 		title: 'How was your checkout experience?',
 		position: 'center',
@@ -752,7 +743,7 @@ document.getElementById('checkout-btn').addEventListener('click', async () => {
 
 // After closing support chat
 chatWidget.on('close', () => {
-	feedback.showSurvey({
+	sdk.showSurvey({
 		surveyType: 'ces',
 		title: 'How easy was it to get help?',
 		position: 'bottom-right',
@@ -763,7 +754,7 @@ chatWidget.on('close', () => {
 document.addEventListener('mouseleave', (e) => {
 	if (e.clientY < 0 && !sessionStorage.getItem('exit_survey_shown')) {
 		sessionStorage.setItem('exit_survey_shown', 'true');
-		feedback.showSurvey({
+		sdk.showSurvey({
 			surveyType: 'nps',
 			title: 'Before you go...',
 			description: 'How likely are you to recommend us?',
@@ -778,7 +769,7 @@ document.addEventListener('mouseleave', (e) => {
 ```javascript
 // Show after 60 seconds on page
 setTimeout(() => {
-	feedback.showSurvey({
+	sdk.showSurvey({
 		surveyType: 'nps',
 		title: 'Enjoying our product?',
 		position: 'bottom-right',
@@ -790,7 +781,7 @@ const pageViews = parseInt(localStorage.getItem('page_views') || '0') + 1;
 localStorage.setItem('page_views', pageViews);
 
 if (pageViews === 5) {
-	feedback.showSurvey({
+	sdk.showSurvey({
 		surveyType: 'csat',
 		title: 'How are you finding things so far?',
 	});
@@ -825,17 +816,11 @@ function useSurvey() {
 	}, []);
 
 	const showNPS = (options = {}) => {
-		sdkRef.current?.showSurvey({
-			surveyType: 'nps',
-			...options,
-		});
+		sdkRef.current?.showSurvey({ surveyType: 'nps', ...options });
 	};
 
 	const showCSAT = (options = {}) => {
-		sdkRef.current?.showSurvey({
-			surveyType: 'csat',
-			...options,
-		});
+		sdkRef.current?.showSurvey({ surveyType: 'csat', ...options });
 	};
 
 	return { showNPS, showCSAT };
@@ -881,13 +866,9 @@ function CheckoutSuccess() {
 	});
 
 	const showSurvey = (type, options = {}) => {
-		sdk.value?.showSurvey({
-			surveyType: type,
-			...options,
-		});
+		sdk.value?.showSurvey({ surveyType: type, ...options });
 	};
 
-	// Trigger on button click
 	const handleFeedbackClick = () => {
 		showSurvey('nps', {
 			title: 'How likely are you to recommend us?',
@@ -903,13 +884,13 @@ function CheckoutSuccess() {
 
 ```javascript
 // Survey displayed
-feedback.eventBus.on('survey:shown', (data) => {
+sdk.eventBus.on('survey:shown', (data) => {
 	console.log('Survey displayed:', data.type);
 	analytics.track('Survey Shown', { type: data.type });
 });
 
 // Survey submitted
-feedback.eventBus.on('survey:submitted', (data) => {
+sdk.eventBus.on('survey:submitted', (data) => {
 	console.log('Survey submitted:', data.response);
 	analytics.track('Survey Completed', {
 		type: data.response.type,
@@ -918,7 +899,7 @@ feedback.eventBus.on('survey:submitted', (data) => {
 });
 
 // Survey dismissed without completing
-feedback.eventBus.on('survey:dismissed', (data) => {
+sdk.eventBus.on('survey:dismissed', (data) => {
 	console.log('Survey dismissed');
 	analytics.track('Survey Dismissed');
 });
@@ -972,7 +953,7 @@ feedback.eventBus.on('survey:dismissed', (data) => {
 
 ```javascript
 // Create survey widget for later use
-const survey = feedback.createWidget('survey', {
+const survey = sdk.createWidget('survey', {
 	surveyType: 'nps',
 	title: 'Rate us',
 });
@@ -1008,7 +989,7 @@ function showSurveyWithCooldown(options) {
 	}
 
 	localStorage.setItem(`survey_${options.surveyType}_shown`, Date.now());
-	return feedback.showSurvey(options);
+	return sdk.showSurvey(options);
 }
 ```
 

package/dist/product7-js.js

@@ -5081,8 +5081,8 @@
 
 .messenger-help-collection-icon {
   flex-shrink: 0;
-  width: 1.75rem;
-  height: 1.75rem;
+  width: 2.25rem;
+  height: 2.25rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -5090,14 +5090,14 @@
 }
 
 .messenger-help-collection-icon svg {
-  width: 1.1rem;
-  height: 1.1rem;
+  width: 1.5rem;
+  height: 1.5rem;
   display: block;
   flex-shrink: 0;
 }
 
 .messenger-help-collection-icon iconify-icon {
-  font-size: 1.1rem;
+  font-size: 1.5rem;
   width: 1em;
   height: 1em;
   display: block;