npm - @product7/feedback-sdk - Versions diffs - 1.0.5 → 1.0.7 - Mend

@product7/feedback-sdk 1.0.5 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/feedback-sdk.js +327 -278
package/dist/feedback-sdk.js.map +1 -1
package/dist/feedback-sdk.min.js +1 -1
package/dist/feedback-sdk.min.js.map +1 -1
package/package.json +1 -1
package/src/core/FeedbackSDK.js +1 -1
package/src/docs/api.md +104 -598
package/src/docs/example.md +317 -681
package/src/docs/installation.md +195 -187
package/src/styles/styles.js +202 -201
package/src/widgets/BaseWidget.js +127 -79
package/src/widgets/ButtonWidget.js +2 -2

package/src/docs/example.md CHANGED Viewed

@@ -1,823 +1,459 @@
 # Examples
-Real-world examples of using the Feedback Widget SDK.
-## 🚀 Quick Start Examples
-### Basic Button Widget
-The simplest implementation - just a feedback button:
-```html
-<!DOCTYPE html>
-<html>
-	<head>
-		<title>Basic Feedback Button</title>
-	</head>
-	<body>
-		<h1>My Website</h1>
-		<p>This is my awesome website content...</p>
-		<script src="https://cdn.jsdelivr.net/npm/@product7/feedback-sdk@1/dist/feedback-sdk.min.js"></script>
-		<script>
-			const feedback = new FeedbackSDK({
-				workspace: 'my-company',
-				boardId: 'general-feedback',
-			});
-			feedback.init().then(() => {
-				const widget = feedback.createWidget('button');
-				widget.mount();
-			});
-		</script>
-	</body>
-</html>
-```
-### Auto-Initialization
-Let the SDK set itself up automatically:
-```html
-<script>
-	// Configure before loading the SDK
-	window.FeedbackSDKConfig = {
-		workspace: 'my-company',
-		boardId: 'general-feedback',
-		theme: 'light',
-		autoCreate: {
-			type: 'button',
-			position: 'bottom-right',
-		},
-	};
-</script>
-<script src="https://cdn.jsdelivr.net/npm/@product7/feedback-sdk@1/dist/feedback-sdk.min.js"></script>
-<!-- Widget appears automatically! -->
-```
-## 🎨 Widget Customization Examples
-### Multiple Widgets
+## Basic Usage
-Create different widgets for different purposes:
+### Simple Setup
 ```javascript
-const feedback = new FeedbackSDK({
-	workspace: 'my-company',
-	debug: true,
-});
-await feedback.init();
+import FeedbackSDK from '@product7/feedback-sdk';
-// Button for general feedback
-const generalButton = feedback.createWidget('button', {
-	position: 'bottom-right',
-	boardId: 'general-feedback',
+const sdk = new FeedbackSDK({
+	workspace: 'my-workspace',
+	userContext: {
+		user_id: 'user_123',
+		email: 'user@example.com'
+	}
 });
-generalButton.mount();
-// Tab for bug reports
-const bugTab = feedback.createWidget('tab', {
-	position: 'bottom-left',
-	boardId: 'bug-reports',
-});
-bugTab.mount();
+await sdk.init();
-// Inline form in footer
-const footerForm = feedback.createWidget('inline', {
-	boardId: 'feature-requests',
-});
-footerForm.mount('#footer-feedback');
+const widget = sdk.createWidget('button');
+widget.mount();
 ```
-### Custom Styling
+---
-Override default styles with CSS:
+## User Context
-```html
-<style>
-	/* Custom button color */
-	.feedback-widget {
-		--feedback-primary-color: #10b981;
-		--feedback-primary-hover: #059669;
-	}
+### Basic User Context
-	/* Custom positioning */
-	.feedback-widget-button.position-bottom-right {
-		bottom: 100px;
-		right: 30px;
+```javascript
+const sdk = new FeedbackSDK({
+	workspace: 'my-workspace',
+	userContext: {
+		user_id: 'user_123',
+		email: 'user@example.com',
+		name: 'John Doe'
 	}
+});
+```
-	/* Custom font */
-	.feedback-widget {
-		--feedback-font-family: 'Poppins', sans-serif;
-	}
+### With Custom Fields
-	/* Custom border radius */
-	.feedback-trigger-btn {
-		border-radius: 8px !important;
+```javascript
+userContext: {
+	user_id: 'user_123',
+	email: 'user@example.com',
+	name: 'John Doe',
+	custom_fields: {
+		role: 'admin',
+		plan: 'pro',
+		signup_date: '2024-01-01'
 	}
-</style>
-<script>
-	const feedback = new FeedbackSDK({
-		workspace: 'my-company',
-		boardId: 'styled-feedback',
-	});
-	feedback.init().then(() => {
-		const widget = feedback.createWidget('button');
-		widget.mount();
-	});
-</script>
+}
 ```
-### Dynamic Theme Switching
-Switch themes based on user preference:
+### With Company Data
 ```javascript
-const feedback = new FeedbackSDK({
-	workspace: 'my-company',
-	boardId: 'general-feedback',
-	theme: 'light',
-});
-await feedback.init();
-const widget = feedback.createWidget('button');
-widget.mount();
+userContext: {
+	user_id: 'user_123',
+	email: 'user@example.com',
+	name: 'John Doe',
+	company: {
+		id: 'company_456',
+		name: 'Acme Corp',
+		monthly_spend: 1000
+	}
+}
+```
-// Theme toggle function
-function toggleTheme() {
-	const isDark = document.body.classList.contains('dark-mode');
-	const newTheme = isDark ? 'light' : 'dark';
+### Extract from Auth
-	// Update SDK theme
-	feedback.updateConfig({ theme: newTheme });
+```javascript
+const authData = {
+	sub: 'user_123',
+	email: 'user@example.com',
+	name: 'John Doe',
+	role: 'admin'
+};
-	// Update your site theme
-	document.body.classList.toggle('dark-mode');
-}
+const userContext = FeedbackSDK.extractUserContextFromAuth(authData);
-// Bind to your theme toggle button
-document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
+const sdk = new FeedbackSDK({
+	workspace: 'my-workspace',
+	userContext
+});
 ```
-## 📱 Responsive Examples
+---
-### Mobile-First Design
+## Widget Customization
-Optimize for mobile devices:
+### Different Positions
 ```javascript
-const feedback = new FeedbackSDK({
-	workspace: 'my-company',
-	boardId: 'mobile-feedback',
+// Bottom right (default)
+const widget1 = sdk.createWidget('button', {
+	position: 'bottom-right'
 });
-await feedback.init();
-// Different widgets for different screen sizes
-if (window.innerWidth <= 768) {
-	// Mobile: Use tab widget to save space
-	const mobileWidget = feedback.createWidget('tab', {
-		position: 'bottom-right',
-	});
-	mobileWidget.mount();
-} else {
-	// Desktop: Use button widget
-	const desktopWidget = feedback.createWidget('button', {
-		position: 'bottom-right',
-	});
-	desktopWidget.mount();
-}
+// Bottom left
+const widget2 = sdk.createWidget('button', {
+	position: 'bottom-left'
+});
-// Handle screen resize
-window.addEventListener('resize', () => {
-	// Destroy current widgets and recreate based on new size
-	feedback.widgets.forEach((widget) => widget.destroy());
+// Top right
+const widget3 = sdk.createWidget('button', {
+	position: 'top-right'
+});
-	if (window.innerWidth <= 768) {
-		const mobileWidget = feedback.createWidget('tab');
-		mobileWidget.mount();
-	} else {
-		const desktopWidget = feedback.createWidget('button');
-		desktopWidget.mount();
-	}
+// Top left
+const widget4 = sdk.createWidget('button', {
+	position: 'top-left'
 });
 ```
-## 🎯 Event-Driven Examples
-### Analytics Integration
-Track feedback events with your analytics:
+### Dark Theme
 ```javascript
-const feedback = new FeedbackSDK({
-	workspace: 'my-company',
-	boardId: 'analytics-feedback',
+const widget = sdk.createWidget('button', {
+	theme: 'dark'
 });
+widget.mount();
+```
-await feedback.init();
+### Custom Board
-// Track feedback interactions
-feedback.eventBus.on('widget:mounted', (data) => {
-	// Track widget load
-	gtag('event', 'feedback_widget_loaded', {
-		widget_type: data.widget.type,
-		widget_id: data.widget.id,
-	});
+```javascript
+const widget = sdk.createWidget('button', {
+	boardId: 'feature-requests'
 });
+widget.mount();
+```
-feedback.eventBus.on('feedback:submitted', (data) => {
-	// Track successful submission
-	gtag('event', 'feedback_submitted', {
-		widget_type: data.widget.type,
-		feedback_length: data.feedback.content?.length || 0,
-	});
+### Multiple Widgets
-	// Show thank you message
-	showToast('Thank you for your feedback! 🙏');
+```javascript
+// Feedback button
+const feedbackWidget = sdk.createWidget('button', {
+	position: 'bottom-right',
+	boardId: 'general'
 });
+feedbackWidget.mount();
-feedback.eventBus.on('feedback:error', (error) => {
-	// Track errors
-	gtag('event', 'feedback_error', {
-		error_type: error.error.name,
-		error_message: error.error.message,
-	});
-	// Show error message
-	showToast('Failed to send feedback. Please try again.', 'error');
+// Bug report button
+const bugWidget = sdk.createWidget('button', {
+	position: 'bottom-left',
+	boardId: 'bug-reports'
 });
+bugWidget.updateText('Report Bug');
+bugWidget.mount();
+```
-const widget = feedback.createWidget('button');
+### Update Widget
+```javascript
+const widget = sdk.createWidget('button');
 widget.mount();
-function showToast(message, type = 'success') {
-	// Your toast implementation
-	console.log(`${type}: ${message}`);
-}
+// Update text
+widget.updateText('Send Feedback');
+// Update position
+widget.updatePosition('top-right');
+// Show/hide
+widget.hide();
+widget.show();
 ```
-### User Authentication Integration
+---
-Integrate with your user system:
+## Event Handling
-```javascript
-// Get user info from your auth system
-const currentUser = getCurrentUser();
+### Track Submissions
-const feedback = new FeedbackSDK({
-	workspace: 'my-company',
-	boardId: 'user-feedback',
-	apiKey: currentUser?.apiKey, // Use user's API key if available
+```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
+	});
 });
+```
-await feedback.init();
+### Handle Errors
-const widget = feedback.createWidget('inline');
-widget.mount('#feedback-section');
+```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.');
+});
+```
-// Pre-populate user email
-if (currentUser?.email) {
-	feedback.eventBus.on('widget:mounted', () => {
-		// Pre-fill email field
-		const emailInput = document.querySelector('input[name="email"]');
-		if (emailInput) {
-			emailInput.value = currentUser.email;
-			emailInput.disabled = true; // Prevent editing
-		}
-	});
-}
+### Widget Lifecycle
-// Add user context to feedback
-feedback.eventBus.on('feedback:submitted', (data) => {
-	// Log user-specific feedback submission
-	console.log(`Feedback from ${currentUser.email}:`, data.feedback);
+```javascript
+sdk.on('widget:mounted', ({ widget }) => {
+	console.log('Widget mounted:', widget.id);
 });
-```
-## 🌐 Framework Integration Examples
-### React Integration
-```jsx
-import React, { useEffect, useRef, useState } from 'react';
-import { FeedbackSDK } from '@product7/feedback-sdk';
-const FeedbackWidget = ({ workspace, boardId, type = 'button' }) => {
-	const [sdk, setSdk] = useState(null);
-	const [widget, setWidget] = useState(null);
-	const containerRef = useRef(null);
-	useEffect(() => {
-		// Initialize SDK
-		const initSDK = async () => {
-			const feedbackSDK = new FeedbackSDK({
-				workspace,
-				boardId,
-				debug: process.env.NODE_ENV === 'development',
-			});
-			await feedbackSDK.init();
-			setSdk(feedbackSDK);
-			// Create and mount widget
-			const feedbackWidget = feedbackSDK.createWidget(type);
-			if (type === 'inline' && containerRef.current) {
-				feedbackWidget.mount(containerRef.current);
-			} else {
-				feedbackWidget.mount();
-			}
-			setWidget(feedbackWidget);
-		};
-		initSDK();
-		// Cleanup
-		return () => {
-			if (widget) widget.destroy();
-			if (sdk) sdk.destroy();
-		};
-	}, [workspace, boardId, type]);
-	// For inline widgets, provide a container
-	if (type === 'inline') {
-		return <div ref={containerRef} className="feedback-container" />;
-	}
+sdk.on('widget:destroyed', ({ widget }) => {
+	console.log('Widget destroyed:', widget.id);
+});
+```
-	// For button/tab widgets, no container needed
-	return null;
-};
+### Multiple Events
-// Usage
-export const App = () => {
-	return (
-		<div>
-			<h1>My React App</h1>
-			{/* Button widget */}
-			<FeedbackWidget
-				workspace="my-company"
-				boardId="react-feedback"
-				type="button"
-			/>
-			{/* Inline widget in footer */}
-			<footer>
-				<FeedbackWidget
-					workspace="my-company"
-					boardId="footer-feedback"
-					type="inline"
-				/>
-			</footer>
-		</div>
-	);
-};
+```javascript
+sdk
+	.on('feedback:submitted', handleSubmit)
+	.on('feedback:error', handleError)
+	.on('config:updated', handleConfigUpdate);
 ```
-### Vue.js Integration
-```vue
-<template>
-	<div>
-		<h1>My Vue App</h1>
-		<!-- Container for inline widget -->
-		<div v-if="widgetType === 'inline'" ref="feedbackContainer"></div>
-	</div>
-</template>
-<script>
-	import { FeedbackSDK } from '@product7/feedback-sdk';
-	export default {
-		name: 'FeedbackWidget',
-		props: {
-			workspace: { type: String, required: true },
-			boardId: { type: String, required: true },
-			widgetType: { type: String, default: 'button' },
-		},
-		data() {
-			return {
-				sdk: null,
-				widget: null,
-			};
-		},
-		async mounted() {
-			await this.initFeedback();
-		},
-		beforeUnmount() {
-			this.cleanup();
-		},
-		methods: {
-			async initFeedback() {
-				this.sdk = new FeedbackSDK({
-					workspace: this.workspace,
-					boardId: this.boardId,
-					debug: process.env.NODE_ENV === 'development',
-				});
-				await this.sdk.init();
-				// Listen to events
-				this.sdk.eventBus.on('feedback:submitted', this.onFeedbackSubmitted);
-				this.sdk.eventBus.on('feedback:error', this.onFeedbackError);
-				// Create widget
-				this.widget = this.sdk.createWidget(this.widgetType);
-				if (this.widgetType === 'inline') {
-					this.widget.mount(this.$refs.feedbackContainer);
-				} else {
-					this.widget.mount();
-				}
-			},
-			onFeedbackSubmitted(data) {
-				this.$emit('feedback-submitted', data);
-				this.$toast.success('Thank you for your feedback!');
-			},
-			onFeedbackError(error) {
-				this.$emit('feedback-error', error);
-				this.$toast.error('Failed to submit feedback');
-			},
-			cleanup() {
-				if (this.widget) this.widget.destroy();
-				if (this.sdk) this.sdk.destroy();
-			},
-		},
-	};
-</script>
+### One-time Events
+```javascript
+sdk.once('sdk:initialized', (data) => {
+	console.log('SDK ready!', data.config);
+});
 ```
-### Angular Integration
-```typescript
-// feedback-widget.component.ts
-import {
-	Component,
-	Input,
-	OnInit,
-	OnDestroy,
-	ElementRef,
-	ViewChild,
-} from '@angular/core';
-import { FeedbackSDK } from '@product7/feedback-sdk';
-@Component({
-	selector: 'app-feedback-widget',
-	template: `
-		<div #feedbackContainer *ngIf="type === 'inline'"></div>
-	`,
-	styleUrls: ['./feedback-widget.component.css'],
-})
-export class FeedbackWidgetComponent implements OnInit, OnDestroy {
-	@Input() workspace: string = '';
-	@Input() boardId: string = '';
-	@Input() type: string = 'button';
-	@ViewChild('feedbackContainer') containerRef?: ElementRef;
-	private sdk?: FeedbackSDK;
-	private widget?: any;
-	async ngOnInit() {
-		await this.initializeFeedback();
-	}
+---
-	ngOnDestroy() {
-		this.cleanup();
-	}
+## Authentication Flows
-	private async initializeFeedback() {
-		this.sdk = new FeedbackSDK({
-			workspace: this.workspace,
-			boardId: this.boardId,
-			debug: !environment.production,
-		});
+### On Login
-		await this.sdk.init();
+```javascript
+async function handleLogin(authResponse) {
+	const userContext = FeedbackSDK.extractUserContextFromAuth(authResponse);
+	await sdk.reinitialize(userContext);
+	// Create widget after login
+	const widget = sdk.createWidget('button');
+	widget.mount();
+}
+```
-		// Set up event listeners
-		this.sdk.eventBus.on('feedback:submitted', (data) => {
-			console.log('Feedback submitted:', data);
-		});
+### On Logout
-		// Create widget
-		this.widget = this.sdk.createWidget(this.type);
+```javascript
+function handleLogout() {
+	sdk.apiService.clearSession();
+	sdk.destroyAllWidgets();
+}
+```
-		if (this.type === 'inline' && this.containerRef) {
-			this.widget.mount(this.containerRef.nativeElement);
-		} else {
-			this.widget.mount();
-		}
-	}
+### Check Session
-	private cleanup() {
-		if (this.widget) this.widget.destroy();
-		if (this.sdk) this.sdk.destroy();
-	}
+```javascript
+if (!sdk.apiService.isSessionValid()) {
+	await sdk.init();
 }
 ```
-## 🚀 Advanced Examples
+---
-### A/B Testing
+## Configuration Updates
-Test different widget configurations:
+### Update Theme
 ```javascript
-// A/B test: Button vs Tab widget
-const variant = Math.random() < 0.5 ? 'button' : 'tab';
+sdk.updateConfig({ theme: 'dark' });
+```
+### Update Multiple Options
-const feedback = new FeedbackSDK({
-	workspace: 'my-company',
-	boardId: 'ab-test-feedback',
+```javascript
+sdk.updateConfig({
+	theme: 'dark',
+	position: 'top-right',
+	showBackdrop: false
 });
+```
-await feedback.init();
+### Update User Context
-// Track A/B test variant
-gtag('event', 'feedback_widget_variant', {
-	variant: variant,
+```javascript
+sdk.setUserContext({
+	user_id: 'user_456',
+	email: 'newuser@example.com',
+	name: 'Jane Smith'
 });
+```
-const widget = feedback.createWidget(variant, {
-	position: variant === 'button' ? 'bottom-right' : 'bottom-left',
-});
+---
+## Programmatic Control
+### Open Panel Programmatically
+```javascript
+const widget = sdk.createWidget('button');
 widget.mount();
-// Track which variant gets more engagement
-feedback.eventBus.on('feedback:submitted', (data) => {
-	gtag('event', 'feedback_submitted_variant', {
-		variant: variant,
-		widget_type: data.widget.type,
-	});
-});
+// Open panel from code
+setTimeout(() => {
+	widget.openPanel();
+}, 3000);
 ```
-### Conditional Loading
-Load feedback widget based on conditions:
+### Close Panel
 ```javascript
-async function loadFeedbackWidget() {
-	// Only load for logged-in users
-	if (!isUserLoggedIn()) {
-		return;
-	}
+widget.closePanel();
+```
-	// Only load on certain pages
-	const allowedPages = ['/dashboard', '/profile', '/settings'];
-	if (!allowedPages.includes(window.location.pathname)) {
-		return;
-	}
+### Trigger from Custom Button
-	// Don't load if user has submitted feedback recently
-	const lastFeedback = localStorage.getItem('lastFeedbackSubmission');
-	if (
-		lastFeedback &&
-		Date.now() - parseInt(lastFeedback) < 7 * 24 * 60 * 60 * 1000
-	) {
-		return; // 7 days cooldown
+```javascript
+const customButton = document.getElementById('feedback-btn');
+customButton.addEventListener('click', () => {
+	const widget = sdk.getWidget('widget_123');
+	if (widget) {
+		widget.openPanel();
 	}
+});
+```
-	// Initialize SDK
-	const feedback = new FeedbackSDK({
-		workspace: 'my-company',
-		boardId: 'conditional-feedback',
-	});
+---
-	await feedback.init();
+## Error Handling
-	// Track feedback submission timestamp
-	feedback.eventBus.on('feedback:submitted', () => {
-		localStorage.setItem('lastFeedbackSubmission', Date.now().toString());
-	});
+### Try-Catch Pattern
-	const widget = feedback.createWidget('button');
+```javascript
+try {
+	await sdk.init();
+	const widget = sdk.createWidget('button');
 	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);
+	}
 }
+```
+### Handle API Errors
-// Load when page is ready
-document.addEventListener('DOMContentLoaded', loadFeedbackWidget);
+```javascript
+try {
+	await sdk.apiService.submitFeedback(data);
+} catch (error) {
+	if (error.isNetworkError()) {
+		alert('No internet connection');
+	} else if (error.isClientError()) {
+		alert('Invalid data. Please check your input.');
+	} else if (error.isServerError()) {
+		alert('Server error. Please try again later.');
+	}
+}
 ```
-### Custom Widget Creation
+---
+## Advanced Usage
-Create your own widget type:
+### Custom Widget Creation
 ```javascript
-// Custom popup widget
-class PopupWidget extends FeedbackSDK.BaseWidget {
+import { BaseWidget, WidgetFactory } from '@product7/feedback-sdk';
+class CustomWidget extends BaseWidget {
 	constructor(options) {
-		super({ ...options, type: 'popup' });
-		this.showDelay = options.showDelay || 5000;
+		super({ ...options, type: 'custom' });
 	}
 	_render() {
-		const popup = document.createElement('div');
-		popup.className = `feedback-popup theme-${this.options.theme}`;
-		popup.innerHTML = `
-            <div class="popup-content">
-                <button class="popup-close">&times;</button>
-                <h3>Quick Feedback</h3>
-                <p>How was your experience?</p>
-                <div class="popup-buttons">
-                    <button class="popup-btn good">😊 Good</button>
-                    <button class="popup-btn okay">😐 Okay</button>
-                    <button class="popup-btn bad">😞 Bad</button>
-                </div>
-            </div>
-        `;
-		// Auto-hide after delay
-		setTimeout(() => {
-			if (this.mounted && !this.destroyed) {
-				this.show();
-			}
-		}, this.showDelay);
-		return popup;
+		const element = document.createElement('div');
+		element.innerHTML = '<button>Custom Feedback</button>';
+		return element;
 	}
 	_attachEvents() {
-		const popup = this.element;
-		// Close button
-		popup.querySelector('.popup-close').addEventListener('click', () => {
-			this.hide();
-		});
-		// Rating buttons
-		popup.querySelectorAll('.popup-btn').forEach((btn) => {
-			btn.addEventListener('click', (e) => {
-				const rating = e.target.classList.contains('good')
-					? 5
-					: e.target.classList.contains('okay')
-						? 3
-						: 1;
-				this.submitQuickFeedback(rating);
-				this.hide();
-			});
-		});
-	}
-	async submitQuickFeedback(rating) {
-		try {
-			const payload = {
-				title: `Quick Feedback - Rating: ${rating}`,
-				content: `User gave a ${rating}/5 rating`,
-				board_id: this.options.boardId,
-			};
-			await this.apiService.submitFeedback(payload);
-			this.sdk.eventBus.emit('feedback:submitted', { widget: this, rating });
-		} catch (error) {
-			this.sdk.eventBus.emit('feedback:error', { widget: this, error });
-		}
+		this.element.querySelector('button')
+			.addEventListener('click', this.openPanel);
 	}
 }
-// Register the custom widget
-FeedbackSDK.WidgetFactory.register('popup', PopupWidget);
+WidgetFactory.register('custom', CustomWidget);
-// Use the custom widget
-const feedback = new FeedbackSDK({
-	workspace: 'my-company',
-	boardId: 'popup-feedback',
-});
-await feedback.init();
-const popupWidget = feedback.createWidget('popup', {
-	showDelay: 3000, // Show after 3 seconds
-});
-popupWidget.mount();
+const widget = sdk.createWidget('custom');
+widget.mount();
 ```
-## 💡 Best Practices Examples
-### Performance Optimization
-Lazy load the SDK when needed:
+### Conditional Widget Loading
 ```javascript
-// Lazy load function
-async function loadFeedbackSDK() {
-	if (window.FeedbackSDK) {
-		return window.FeedbackSDK;
-	}
-	return new Promise((resolve) => {
-		const script = document.createElement('script');
-		script.src =
-			'https://cdn.jsdelivr.net/npm/@product7/feedback-sdk@1/dist/feedback-sdk.min.js';
-		script.onload = () => resolve(window.FeedbackSDK);
-		document.head.appendChild(script);
+// Only show feedback for authenticated users
+if (user.isAuthenticated) {
+	const sdk = new FeedbackSDK({
+		workspace: 'my-workspace',
+		userContext: {
+			user_id: user.id,
+			email: user.email
+		}
 	});
+	await sdk.init();
+	const widget = sdk.createWidget('button');
+	widget.mount();
 }
+```
-// Load SDK only when user interacts with feedback trigger
-document
-	.getElementById('feedback-trigger')
-	.addEventListener('click', async () => {
-		const FeedbackSDK = await loadFeedbackSDK();
-		const feedback = new FeedbackSDK({
-			workspace: 'my-company',
-			boardId: 'lazy-feedback',
-		});
+### Environment-based Configuration
-		await feedback.init();
-		const widget = feedback.createWidget('button');
-		widget.mount();
+```javascript
+const config = {
+	workspace: 'my-workspace',
+	userContext: getUserContext(),
+	apiUrl: process.env.NODE_ENV === 'production'
+		? 'https://api.product7.io/api/v1'
+		: 'https://api.staging.product7.io/api/v1',
+	debug: process.env.NODE_ENV === 'development'
+};
-		// Open modal immediately
-		widget.openModal();
-	});
+const sdk = new FeedbackSDK(config);
 ```
-### Error Handling
+---
+## Testing
-Robust error handling and fallbacks:
+### Mock SDK
 ```javascript
-async function initializeFeedback() {
-	try {
-		const feedback = new FeedbackSDK({
-			workspace: 'my-company',
-			boardId: 'error-handling-feedback',
-			debug: true,
-		});
-		await feedback.init();
-		// Set up comprehensive error handling
-		feedback.eventBus.on('feedback:error', (error) => {
-			console.error('Feedback error:', error);
-			// Show user-friendly error message
-			const errorMsg = getUserFriendlyErrorMessage(error.error);
-			showNotification(errorMsg, 'error');
-			// Track error for monitoring
-			if (window.Sentry) {
-				Sentry.captureException(error.error);
-			}
-		});
-		const widget = feedback.createWidget('button');
-		widget.mount();
-		// Success tracking
-		feedback.eventBus.on('feedback:submitted', () => {
-			showNotification('Feedback submitted successfully!', 'success');
-		});
-	} catch (initError) {
-		console.error('Failed to initialize feedback SDK:', initError);
-		// Fallback: show simple mailto link
-		showFallbackFeedback();
-	}
-}
+// In tests
+jest.mock('@product7/feedback-sdk');
-function getUserFriendlyErrorMessage(error) {
-	if (error.name === 'APIError') {
-		if (error.status === 0) {
-			return 'Network error. Please check your connection.';
-		} else if (error.status >= 500) {
-			return 'Server error. Please try again later.';
-		}
-	}
-	return 'Failed to submit feedback. Please try again.';
-}
+test('should initialize SDK', async () => {
+	const sdk = new FeedbackSDK({
+		workspace: 'test',
+		userContext: { user_id: '123' }
+	});
+	await sdk.init();
+	expect(sdk.initialized).toBe(true);
+});
+```
-function showFallbackFeedback() {
-	const fallback = document.createElement('div');
-	fallback.innerHTML = `
-        <div style="position: fixed; bottom: 20px; right: 20px; z-index: 9999;">
-            <a href="mailto:feedback@my-company.com?subject=Website Feedback"
-               style="background: #155EEF; color: white; padding: 12px 20px;
-                      border-radius: 25px; text-decoration: none;">
-                Send Feedback
-            </a>
-        </div>
-    `;
-	document.body.appendChild(fallback);
-}
+### Check Widget Exists
-function showNotification(message, type) {
-	// Your notification system
-	console.log(`${type}: ${message}`);
-}
+```javascript
+const widget = sdk.createWidget('button');
+widget.mount();
-// Initialize with error handling
-initializeFeedback();
-```
+const found = sdk.getWidget(widget.id);
+expect(found).toBeDefined();
+```