@product7/product7-js 0.3.2 → 0.3.5

package/src/docs/example.md

@@ -5,67 +5,66 @@
 ### Simple Setup
 
 ```javascript
-import Product7 from '@product7/product7-js';
+import { Product7 } from '@product7/product7-js';
 
 const sdk = new Product7({
 	workspace: 'my-workspace',
-	metadata: {
-		user_id: 'user_123',
-		email: 'user@example.com',
-	},
+	boardName: 'feature-requests',
 });
 
 await sdk.init();
+await sdk.identify({
+	user_id: 'user_123',
+	email: 'user@example.com',
+	name: 'John Doe',
+});
 
-const widget = sdk.createWidget('button');
+const widget = sdk.createFeedbackWidget();
 widget.mount();
 ```
 
 ---
 
-## User Context
+## User Identity
 
-### Basic User Context
+### Basic Identify Call
 
 ```javascript
-const sdk = new Product7({
-	workspace: 'my-workspace',
-	metadata: {
-		user_id: 'user_123',
-		email: 'user@example.com',
-		name: 'John Doe',
-	},
+await sdk.identify({
+	user_id: 'user_123',
+	email: 'user@example.com',
+	name: 'John Doe',
 });
 ```
 
 ### With Custom Fields
 
 ```javascript
-metadata: {
+await sdk.identify({
 	user_id: 'user_123',
 	email: 'user@example.com',
 	name: 'John Doe',
 	custom_fields: {
 		role: 'admin',
 		plan: 'pro',
-		signup_date: '2024-01-01'
-	}
-}
+		signup_date: '2024-01-01',
+	},
+});
 ```
 
 ### With Company Data
 
 ```javascript
-metadata: {
+await sdk.identify({
 	user_id: 'user_123',
 	email: 'user@example.com',
 	name: 'John Doe',
 	company: {
 		id: 'company_456',
 		name: 'Acme Corp',
-		monthly_spend: 1000
-	}
-}
+		monthly_spend: 1000,
+	},
+});
 ```
 
 ### Extract from Auth
@@ -80,36 +79,29 @@ const authData = {
 
 const metadata = Product7.extractMetadataFromAuth(authData);
 
-const sdk = new Product7({
-	workspace: 'my-workspace',
-	metadata,
-});
+await sdk.identify(metadata);
 ```
 
 ---
 
-## Widget Customization
+## Feedback Widget
 
 ### Different Positions
 
 ```javascript
-// Bottom right (default)
-const widget1 = sdk.createWidget('button', {
+const widget1 = sdk.createFeedbackWidget({
 	position: 'bottom-right',
 });
 
-// Bottom left
-const widget2 = sdk.createWidget('button', {
+const widget2 = sdk.createFeedbackWidget({
 	position: 'bottom-left',
 });
 
-// Top right
-const widget3 = sdk.createWidget('button', {
+const widget3 = sdk.createFeedbackWidget({
 	position: 'top-right',
 });
 
-// Top left
-const widget4 = sdk.createWidget('button', {
+const widget4 = sdk.createFeedbackWidget({
 	position: 'top-left',
 });
 ```
@@ -117,7 +109,7 @@ const widget4 = sdk.createWidget('button', {
 ### Dark Theme
 
 ```javascript
-const widget = sdk.createWidget('button', {
+const widget = sdk.createFeedbackWidget({
 	theme: 'dark',
 });
 widget.mount();
@@ -126,24 +118,37 @@ widget.mount();
 ### Custom Board
 
 ```javascript
-const widget = sdk.createWidget('button', {
+const widget = sdk.createFeedbackWidget({
+	boardName: 'bug-reports',
+});
+widget.mount();
+```
+
+### Headless Feedback
+
+```javascript
+const widget = sdk.createFeedbackWidget({
+	headless: true,
 	boardName: 'feature-requests',
 });
+
 widget.mount();
+
+document
+	.querySelector('#feedback-trigger')
+	?.addEventListener('click', () => widget.open());
 ```
 
-### Multiple Widgets
+### Multiple Feedback Widgets
 
 ```javascript
-// Feedback button
-const feedbackWidget = sdk.createWidget('button', {
+const feedbackWidget = sdk.createFeedbackWidget({
 	position: 'bottom-right',
 	boardName: 'general',
 });
 feedbackWidget.mount();
 
-// Bug report button
-const bugWidget = sdk.createWidget('button', {
+const bugWidget = sdk.createFeedbackWidget({
 	position: 'bottom-left',
 	boardName: 'bug-reports',
 });
@@ -151,177 +156,221 @@ bugWidget.updateText('Report Bug');
 bugWidget.mount();
 ```
 
-### Update Widget
+### Update the Widget
 
 ```javascript
-const widget = sdk.createWidget('button');
+const widget = sdk.createFeedbackWidget();
 widget.mount();
 
-// Update text
 widget.updateText('Send Feedback');
-
-// Update position
 widget.updatePosition('top-right');
-
-// Show/hide
 widget.hide();
 widget.show();
 ```
 
 ---
 
-## Event Handling
+## Survey Widget
 
-### Track Submissions
+### Create and Open a Survey
 
 ```javascript
-sdk.on('feedback:submitted', ({ widget, feedback }) => {
-	console.log('Feedback submitted:', feedback.id);
-
-	// Track in analytics
-	analytics.track('Feedback Submitted', {
-		feedbackId: feedback.id,
-		board: feedback.board,
-	});
+const survey = sdk.createSurveyWidget({
+	surveyType: 'nps',
+	position: 'center',
+	title: 'Quick question',
+	description: 'How likely are you to recommend us?',
+	showSubmitButton: true,
 });
+
+survey.mount();
+survey.open();
 ```
 
-### Handle Errors
+### Show Active Surveys
 
 ```javascript
-sdk.on('feedback:error', ({ widget, error }) => {
-	console.error('Submission failed:', error.message);
-
-	// Show custom error notification
-	toast.error('Failed to submit feedback. Please try again.');
+const surveys = await sdk.getActiveSurveys({
+	includeEligibility: true,
 });
+
+if (surveys.length > 0) {
+	await sdk.showSurveyById(surveys[0].surveyId, {
+		position: 'center',
+	});
+}
 ```
 
-### Widget Lifecycle
+---
+
+## Messenger Widget
+
+### Basic Messenger
 
 ```javascript
-sdk.on('widget:mounted', ({ widget }) => {
-	console.log('Widget mounted:', widget.id);
+const messenger = sdk.createMessengerWidget({
+	position: 'bottom-right',
+	teamName: 'Support Team',
+	enableHelp: true,
+	enableChangelog: true,
 });
 
-sdk.on('widget:destroyed', ({ widget }) => {
-	console.log('Widget destroyed:', widget.id);
+messenger.mount();
+```
+
+### Headless Messenger
+
+```javascript
+const messenger = sdk.createMessengerWidget({
+	headless: true,
+	enableHelp: true,
 });
+
+messenger.mount();
+
+document
+	.querySelector('#support-link')
+	?.addEventListener('click', () => messenger.open());
 ```
 
-### Multiple Events
+### Programmatic Messenger Navigation
 
 ```javascript
-sdk
-	.on('feedback:submitted', handleSubmit)
-	.on('feedback:error', handleError)
-	.on('config:updated', handleConfigUpdate);
+messenger.open();
+messenger.navigateTo('help');
+messenger.close();
+```
+
+---
+
+## Changelog Widget
+
+### Basic Changelog
+
+```javascript
+const changelog = sdk.createChangelogWidget({
+	position: 'bottom-left',
+	triggerText: "What's New",
+	showBadge: true,
+});
+
+changelog.mount();
 ```
 
-### One-time Events
+### Open Changelog Programmatically
 
 ```javascript
-sdk.once('sdk:initialized', (data) => {
-	console.log('SDK ready!', data.config);
+const changelog = sdk.createChangelogWidget({
+	headless: true,
 });
+
+changelog.mount();
+changelog.open();
 ```
 
 ---
 
-## Authentication Flows
+## Event Handling
 
-### On Login
+### Track Feedback Submissions
 
 ```javascript
-async function handleLogin(authResponse) {
-	const metadata = Product7.extractMetadataFromAuth(authResponse);
-	await sdk.reinitialize(metadata);
-
-	// Create widget after login
-	const widget = sdk.createWidget('button');
-	widget.mount();
-}
+sdk.on('feedback:submitted', ({ feedback }) => {
+	console.log('Feedback submitted:', feedback);
+});
 ```
 
-### On Logout
+### Track Survey Events
 
 ```javascript
-function handleLogout() {
-	sdk.apiService.clearSession();
-	sdk.destroyAllWidgets();
-}
+sdk.on('survey:submitted', ({ response }) => {
+	console.log('Survey submitted:', response);
+});
+
+sdk.on('survey:questionAnswered', (data) => {
+	console.log('Question answered:', data.pageId, data.answer);
+});
 ```
 
-### Check Session
+### SDK Lifecycle
 
 ```javascript
-if (!sdk.apiService.isSessionValid()) {
-	await sdk.init();
-}
+sdk.on('sdk:initialized', (data) => {
+	console.log('SDK ready:', data.sessionToken);
+});
+
+sdk.on('sdk:identified', (data) => {
+	console.log('User identified:', data.metadata);
+});
 ```
 
 ---
 
-## Configuration Updates
+## Authentication Flows
 
-### Update Theme
+### On Login
 
 ```javascript
-sdk.updateConfig({ theme: 'dark' });
+async function handleLogin(authResponse) {
+	const metadata = Product7.extractMetadataFromAuth(authResponse);
+
+	await sdk.init();
+	await sdk.identify(metadata);
+
+	const widget = sdk.createFeedbackWidget();
+	widget.mount();
+}
 ```
 
-### Update Multiple Options
+### On User Change
 
 ```javascript
-sdk.updateConfig({
-	theme: 'dark',
-	position: 'top-right',
-	showBackdrop: false,
-});
+async function handleUserChanged(user) {
+	await sdk.identify({
+		user_id: user.id,
+		email: user.email,
+		name: user.name,
+	});
+}
 ```
 
-### Update User Context
+### On Logout
 
 ```javascript
-sdk.setMetadata({
-	user_id: 'user_456',
-	email: 'newuser@example.com',
-	name: 'Jane Smith',
-});
+function handleLogout() {
+	sdk.destroyAllWidgets();
+	sdk.destroy();
+}
 ```
 
 ---
 
 ## Programmatic Control
 
-### Open Panel Programmatically
+### Open Feedback from Code
 
 ```javascript
-const widget = sdk.createWidget('button');
+const widget = sdk.createFeedbackWidget({
+	headless: true,
+});
+
 widget.mount();
 
-// Open panel from code
 setTimeout(() => {
-	widget.openPanel();
+	widget.open();
 }, 3000);
 ```
 
-### Close Panel
-
-```javascript
-widget.closePanel();
-```
-
-### Trigger from Custom Button
+### Toggle Survey
 
 ```javascript
-const customButton = document.getElementById('feedback-btn');
-customButton.addEventListener('click', () => {
-	const widget = sdk.getWidget('widget_123');
-	if (widget) {
-		widget.openPanel();
-	}
+const survey = sdk.createSurveyWidget({
+	surveyType: 'csat',
+	showSubmitButton: true,
 });
+
+survey.mount();
+survey.toggle();
 ```
 
 ---
@@ -333,16 +382,15 @@ customButton.addEventListener('click', () => {
 ```javascript
 try {
 	await sdk.init();
-	const widget = sdk.createWidget('button');
+	await sdk.identify({
+		user_id: 'user_123',
+		email: 'user@example.com',
+	});
+
+	const widget = sdk.createFeedbackWidget();
 	widget.mount();
 } catch (error) {
-	if (error instanceof ConfigError) {
-		console.error('Config error:', error.message);
-	} else if (error instanceof APIError) {
-		console.error('API error:', error.status);
-	} else {
-		console.error('Unexpected error:', error);
-	}
+	console.error('Product7 error:', error);
 }
 ```
 
@@ -395,39 +443,39 @@ const widget = sdk.createWidget('custom');
 widget.mount();
 ```
 
-### Conditional Widget Loading
+### Conditional Loading
 
 ```javascript
-// Only show feedback for authenticated users
 if (user.isAuthenticated) {
 	const sdk = new Product7({
 		workspace: 'my-workspace',
-		metadata: {
-			user_id: user.id,
-			email: user.email,
-		},
 	});
 
 	await sdk.init();
-	const widget = sdk.createWidget('button');
+	await sdk.identify({
+		user_id: user.id,
+		email: user.email,
+	});
+
+	const widget = sdk.createFeedbackWidget();
 	widget.mount();
 }
 ```
 
-### Environment-based Configuration
+### Environment-Based Config
 
 ```javascript
-const config = {
+const sdk = new Product7({
 	workspace: 'my-workspace',
-	metadata: getMetadata(),
 	apiUrl:
 		process.env.NODE_ENV === 'production'
 			? 'https://api.product7.io/api/v1'
 			: 'https://staging.api.product7.io/api/v1',
 	debug: process.env.NODE_ENV === 'development',
-};
+});
 
-const sdk = new Product7(config);
+await sdk.init();
+await sdk.identify(getMetadata());
 ```
 
 ---
@@ -437,15 +485,17 @@ const sdk = new Product7(config);
 ### Mock SDK
 
 ```javascript
-// In tests
 jest.mock('@product7/product7-js');
 
 test('should initialize SDK', async () => {
 	const sdk = new Product7({
 		workspace: 'test',
-		metadata: { user_id: '123' },
+		mock: true,
 	});
+
 	await sdk.init();
+	await sdk.identify({ user_id: '123' });
+
 	expect(sdk.initialized).toBe(true);
 });
 ```
@@ -453,7 +503,7 @@ test('should initialize SDK', async () => {
 ### Check Widget Exists
 
 ```javascript
-const widget = sdk.createWidget('button');
+const widget = sdk.createFeedbackWidget();
 widget.mount();
 
 const found = sdk.getWidget(widget.id);