@product7/feedback-sdk 1.1.0 → 1.1.4

package/README.md

@@ -9,14 +9,18 @@ A lightweight, customizable JavaScript SDK for collecting user feedback on any w
 
 ## Features
 
-- Multiple widget types — Button, Tab, and Inline widgets
-- Theme support — Light and dark themes with custom CSS properties
-- Responsive design — Works on desktop, tablet, and mobile
-- Easy integration — Simple JavaScript API, minimal setup
-- Lightweight — < 25KB minified and gzipped
-- TypeScript support — Full type definitions included
-- Accessible — WCAG 2.1 compliant
-- Secure — CSP friendly, no `eval()` usage
+- **Display modes** — Side panel or centered modal
+- **Size options** — Small, medium, or large widget sizes
+- **Full color customization** — Background, text, and primary colors
+- **Custom triggers** — Use your own buttons instead of floating widget
+- **Mock mode** — Development without backend connection
+- **Multiple positions** — 7 position options including center
+- **Responsive design** — Works on desktop, tablet, and mobile
+- **Easy integration** — Simple JavaScript API, minimal setup
+- **Lightweight** — ~12KB gzipped
+- **TypeScript support** — Full type definitions included
+- **Accessible** — WCAG 2.1 compliant
+- **Secure** — CSP friendly, no `eval()` usage
 
 ---
 
@@ -90,22 +94,29 @@ widget.mount();
 
 ## Widget Types
 
-**Button Widget**
+**Button Widget with Side Panel**
 
 ```javascript
-const button = feedback.createWidget('button', {
+const widget = feedback.createWidget('button', {
 	position: 'bottom-right',
+	displayMode: 'panel', // Slides in from the side
+	size: 'medium',
 });
-button.mount();
+widget.mount();
 ```
 
-**Tab Widget**
+**Button Widget with Modal**
 
 ```javascript
-const tab = feedback.createWidget('tab', {
-	position: 'bottom-left',
+const widget = feedback.createWidget('button', {
+	position: 'bottom-right',
+	displayMode: 'modal', // Centered overlay
+	size: 'large',
+	backgroundColor: '#ffffff',
+	textColor: '#1F2937',
+	primaryColor: '#155EEF',
 });
-tab.mount();
+widget.mount();
 ```
 
 **Inline Widget**
@@ -119,28 +130,165 @@ inline.mount('#feedback-container');
 
 ## Configuration
 
-| Option      | Type    | Required | Default        | Description                |
-| ----------- | ------- | -------- | -------------- | -------------------------- |
-| `workspace` | string  | ✅       | -              | Your workspace subdomain   |
-| `boardId`   | string  | ❌       | null           | Target board for feedback  |
-| `apiKey`    | string  | ❌       | null           | API key for authentication |
-| `theme`     | string  | ❌       | 'light'        | Theme: 'light' or 'dark'   |
-| `position`  | string  | ❌       | 'bottom-right' | Widget position            |
-| `debug`     | boolean | ❌       | false          | Enable debug logging       |
+### SDK Configuration
+
+| Option        | Type    | Required | Default        | Description                          |
+| ------------- | ------- | -------- | -------------- | ------------------------------------ |
+| `workspace`   | string  | ✅       | -              | Your workspace subdomain             |
+| `boardId`     | string  | ❌       | 'general'      | Target board for feedback            |
+| `userContext` | object  | ❌       | null           | User identification data             |
+| `mock`        | boolean | ❌       | false          | Enable mock mode for development     |
+| `debug`       | boolean | ❌       | false          | Enable debug logging                 |
+
+### Widget Configuration
+
+| Option            | Type   | Default        | Description                              |
+| ----------------- | ------ | -------------- | ---------------------------------------- |
+| `displayMode`     | string | 'panel'        | `'panel'` (side slide) or `'modal'` (centered) |
+| `size`            | string | 'medium'       | `'small'`, `'medium'`, or `'large'`      |
+| `position`        | string | 'bottom-right' | Button position (see below)              |
+| `backgroundColor` | string | '#ffffff'      | Panel/modal background color             |
+| `textColor`       | string | '#1F2937'      | Text color                               |
+| `primaryColor`    | string | '#155EEF'      | Button and accent color                  |
+
+### Position Options
+
+- `bottom-right` (default)
+- `bottom-left`
+- `top-right`
+- `top-left`
+- `bottom-center`
+- `top-center`
+- `center`
+
+### Size Variants
+
+| Size   | Modal Width | Panel Width |
+| ------ | ----------- | ----------- |
+| small  | 360px       | 320px       |
+| medium | 480px       | 420px       |
+| large  | 600px       | 520px       |
 
 ---
 
-## Theming
+## Color Customization
+
+Instead of predefined themes, use direct color values for full flexibility:
 
-```css
-:root {
-	--feedback-primary-color: #10b981;
-	--feedback-primary-hover: #059669;
-	--feedback-font-family: 'Inter', sans-serif;
-	--feedback-border-radius: 8px;
-}
+```javascript
+const widget = feedback.createWidget('button', {
+	displayMode: 'modal',
+	backgroundColor: '#1a1a2e', // Dark background
+	textColor: '#ffffff', // White text
+	primaryColor: '#e94560', // Red accent
+});
 ```
 
+This approach works better than predefined themes because:
+- Supports any brand color
+- Works with both light and dark designs
+- No restrictions on color combinations
+
+---
+
+## Custom Triggers
+
+Hide the default floating button and trigger from your own UI:
+
+```javascript
+window.FeedbackSDK.onReady((sdk) => {
+	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();
+	});
+});
+```
+
+---
+
+## Mock Mode
+
+For development without a backend connection:
+
+```javascript
+window.FeedbackSDKConfig = {
+	workspace: 'demo',
+	mock: true, // No backend required
+	userContext: {
+		user_id: 'test_user',
+		email: 'test@example.com',
+	},
+};
+```
+
+Mock mode simulates:
+- Session initialization
+- Feedback submission (with 500ms delay)
+- Default configuration values
+
+---
+
+## Environments
+
+The SDK supports multiple environments for development and production use.
+
+### Production (Default)
+
+```javascript
+const feedback = new FeedbackSDK({
+	workspace: 'your-workspace',
+	environment: 'production', // Default, can be omitted
+});
+```
+
+**API URLs:**
+- `https://api.product7.io/api/v1`
+- `https://{workspace}.api.product7.io/api/v1`
+
+### Staging
+
+```javascript
+const feedback = new FeedbackSDK({
+	workspace: 'your-workspace',
+	environment: 'staging',
+});
+```
+
+**API URLs:**
+- `https://staging.api.product7.io/api/v1`
+- `https://{workspace}.staging.api.product7.io/api/v1`
+
+### Custom API URL
+
+For self-hosted or custom deployments:
+
+```javascript
+const feedback = new FeedbackSDK({
+	workspace: 'your-workspace',
+	apiUrl: 'https://your-custom-api.com/api/v1',
+});
+```
+
+---
+
+## Configuration Priority
+
+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.FeedbackSDKConfig`
+4. **Widget options** — Passed to `createWidget()`
+
+This allows backend-managed defaults while permitting per-widget customization.
+
 ---
 
 ## Events
@@ -184,8 +332,8 @@ npm run size
 
 ## Bundle Size
 
-- **Minified**: \~18KB
-- **Minified + Gzipped**: \~6KB
+- **Minified**: ~41KB
+- **Minified + Gzipped**: ~12KB
 
 ---
 

package/dist/README.md

@@ -9,14 +9,18 @@ A lightweight, customizable JavaScript SDK for collecting user feedback on any w
 
 ## Features
 
-- Multiple widget types — Button, Tab, and Inline widgets
-- Theme support — Light and dark themes with custom CSS properties
-- Responsive design — Works on desktop, tablet, and mobile
-- Easy integration — Simple JavaScript API, minimal setup
-- Lightweight — < 25KB minified and gzipped
-- TypeScript support — Full type definitions included
-- Accessible — WCAG 2.1 compliant
-- Secure — CSP friendly, no `eval()` usage
+- **Display modes** — Side panel or centered modal
+- **Size options** — Small, medium, or large widget sizes
+- **Full color customization** — Background, text, and primary colors
+- **Custom triggers** — Use your own buttons instead of floating widget
+- **Mock mode** — Development without backend connection
+- **Multiple positions** — 7 position options including center
+- **Responsive design** — Works on desktop, tablet, and mobile
+- **Easy integration** — Simple JavaScript API, minimal setup
+- **Lightweight** — ~12KB gzipped
+- **TypeScript support** — Full type definitions included
+- **Accessible** — WCAG 2.1 compliant
+- **Secure** — CSP friendly, no `eval()` usage
 
 ---
 
@@ -90,22 +94,29 @@ widget.mount();
 
 ## Widget Types
 
-**Button Widget**
+**Button Widget with Side Panel**
 
 ```javascript
-const button = feedback.createWidget('button', {
+const widget = feedback.createWidget('button', {
 	position: 'bottom-right',
+	displayMode: 'panel', // Slides in from the side
+	size: 'medium',
 });
-button.mount();
+widget.mount();
 ```
 
-**Tab Widget**
+**Button Widget with Modal**
 
 ```javascript
-const tab = feedback.createWidget('tab', {
-	position: 'bottom-left',
+const widget = feedback.createWidget('button', {
+	position: 'bottom-right',
+	displayMode: 'modal', // Centered overlay
+	size: 'large',
+	backgroundColor: '#ffffff',
+	textColor: '#1F2937',
+	primaryColor: '#155EEF',
 });
-tab.mount();
+widget.mount();
 ```
 
 **Inline Widget**
@@ -119,28 +130,165 @@ inline.mount('#feedback-container');
 
 ## Configuration
 
-| Option      | Type    | Required | Default        | Description                |
-| ----------- | ------- | -------- | -------------- | -------------------------- |
-| `workspace` | string  | ✅       | -              | Your workspace subdomain   |
-| `boardId`   | string  | ❌       | null           | Target board for feedback  |
-| `apiKey`    | string  | ❌       | null           | API key for authentication |
-| `theme`     | string  | ❌       | 'light'        | Theme: 'light' or 'dark'   |
-| `position`  | string  | ❌       | 'bottom-right' | Widget position            |
-| `debug`     | boolean | ❌       | false          | Enable debug logging       |
+### SDK Configuration
+
+| Option        | Type    | Required | Default        | Description                          |
+| ------------- | ------- | -------- | -------------- | ------------------------------------ |
+| `workspace`   | string  | ✅       | -              | Your workspace subdomain             |
+| `boardId`     | string  | ❌       | 'general'      | Target board for feedback            |
+| `userContext` | object  | ❌       | null           | User identification data             |
+| `mock`        | boolean | ❌       | false          | Enable mock mode for development     |
+| `debug`       | boolean | ❌       | false          | Enable debug logging                 |
+
+### Widget Configuration
+
+| Option            | Type   | Default        | Description                              |
+| ----------------- | ------ | -------------- | ---------------------------------------- |
+| `displayMode`     | string | 'panel'        | `'panel'` (side slide) or `'modal'` (centered) |
+| `size`            | string | 'medium'       | `'small'`, `'medium'`, or `'large'`      |
+| `position`        | string | 'bottom-right' | Button position (see below)              |
+| `backgroundColor` | string | '#ffffff'      | Panel/modal background color             |
+| `textColor`       | string | '#1F2937'      | Text color                               |
+| `primaryColor`    | string | '#155EEF'      | Button and accent color                  |
+
+### Position Options
+
+- `bottom-right` (default)
+- `bottom-left`
+- `top-right`
+- `top-left`
+- `bottom-center`
+- `top-center`
+- `center`
+
+### Size Variants
+
+| Size   | Modal Width | Panel Width |
+| ------ | ----------- | ----------- |
+| small  | 360px       | 320px       |
+| medium | 480px       | 420px       |
+| large  | 600px       | 520px       |
 
 ---
 
-## Theming
+## Color Customization
+
+Instead of predefined themes, use direct color values for full flexibility:
 
-```css
-:root {
-	--feedback-primary-color: #10b981;
-	--feedback-primary-hover: #059669;
-	--feedback-font-family: 'Inter', sans-serif;
-	--feedback-border-radius: 8px;
-}
+```javascript
+const widget = feedback.createWidget('button', {
+	displayMode: 'modal',
+	backgroundColor: '#1a1a2e', // Dark background
+	textColor: '#ffffff', // White text
+	primaryColor: '#e94560', // Red accent
+});
 ```
 
+This approach works better than predefined themes because:
+- Supports any brand color
+- Works with both light and dark designs
+- No restrictions on color combinations
+
+---
+
+## Custom Triggers
+
+Hide the default floating button and trigger from your own UI:
+
+```javascript
+window.FeedbackSDK.onReady((sdk) => {
+	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();
+	});
+});
+```
+
+---
+
+## Mock Mode
+
+For development without a backend connection:
+
+```javascript
+window.FeedbackSDKConfig = {
+	workspace: 'demo',
+	mock: true, // No backend required
+	userContext: {
+		user_id: 'test_user',
+		email: 'test@example.com',
+	},
+};
+```
+
+Mock mode simulates:
+- Session initialization
+- Feedback submission (with 500ms delay)
+- Default configuration values
+
+---
+
+## Environments
+
+The SDK supports multiple environments for development and production use.
+
+### Production (Default)
+
+```javascript
+const feedback = new FeedbackSDK({
+	workspace: 'your-workspace',
+	environment: 'production', // Default, can be omitted
+});
+```
+
+**API URLs:**
+- `https://api.product7.io/api/v1`
+- `https://{workspace}.api.product7.io/api/v1`
+
+### Staging
+
+```javascript
+const feedback = new FeedbackSDK({
+	workspace: 'your-workspace',
+	environment: 'staging',
+});
+```
+
+**API URLs:**
+- `https://staging.api.product7.io/api/v1`
+- `https://{workspace}.staging.api.product7.io/api/v1`
+
+### Custom API URL
+
+For self-hosted or custom deployments:
+
+```javascript
+const feedback = new FeedbackSDK({
+	workspace: 'your-workspace',
+	apiUrl: 'https://your-custom-api.com/api/v1',
+});
+```
+
+---
+
+## Configuration Priority
+
+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.FeedbackSDKConfig`
+4. **Widget options** — Passed to `createWidget()`
+
+This allows backend-managed defaults while permitting per-widget customization.
+
 ---
 
 ## Events
@@ -184,8 +332,8 @@ npm run size
 
 ## Bundle Size
 
-- **Minified**: \~18KB
-- **Minified + Gzipped**: \~6KB
+- **Minified**: ~41KB
+- **Minified + Gzipped**: ~12KB
 
 ---