@feedbackfun/js 0.2.0 → 0.2.1

package/README.md

@@ -1,126 +1,62 @@
-# @feedbackfun/js
+# 🎯 feedbackfun JS
+
+[![npm version](https://img.shields.io/npm/v/@feedbackfun/js.svg)](https://www.npmjs.com/package/@feedbackfun/js)
+[![npm downloads](https://img.shields.io/npm/dw/@feedbackfun/js.svg)](https://www.npmjs.com/package/@feedbackfun/js)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@feedbackfun/js)](https://bundlephobia.com/package/@feedbackfun/js)
 
 Complete customer feedback ecosystem - capture feature requests, bug reports, manage product roadmaps, and provide real-time chat support, all in one embeddable widget.
 
 ## Installation
 
-### NPM Package
-
 ```bash
 npm install @feedbackfun/js
 ```
 
-### CDN (Script Tag)
+## Features
 
-```html
-<script src="https://cdn.feedbackfun.com/feedbackfun-widget.min.js"
-        data-feedbackfun-api-key="your-api-key"
-        data-feedbackfun-project-id="your-project-id">
-</script>
-```
+- 🚀 **Feature Requests** - Collect and prioritize product ideas from your users
+- 🐛 **Bug Reporting** - Visual bug reports with automatic screenshot capture and context
+- 🗺️ **Product Roadmap** - Interactive roadmap with voting and status tracking
+- 💬 **Real-time Chat Support** - Instant messaging between users and your support team
+- 👤 **User Authentication** - Associate feedback with authenticated users for better context
+- 🎯 **Click-anywhere Feedback** - Pin feedback to any element on your website
+- 🎨 **Customizable Branding** - Match your brand with custom colors and themes
+- 🌙 **Dark Mode Support** - Automatic dark/light theme detection
+- 📦 **Zero Configuration** - Widget settings managed via dashboard
+- 🔒 **TypeScript Support** - Full TypeScript definitions included
 
 ## Quick Start
 
-### NPM Usage
-
-```typescript
-import feedbackfun from '@feedbackfun/js';
-
-// Initialize widget (config is fetched from your dashboard)
-await feedbackfun.init({
-  apiKey: 'your-api-key',
-  projectId: 'your-project-id'
-});
-```
-
-### React
-
-```typescript
-import feedbackfun from '@feedbackfun/js';
-import { useEffect } from 'react';
-
-function App() {
-  useEffect(() => {
-    feedbackfun.init({
-      apiKey: process.env.REACT_APP_FEEDBACKFUN_KEY!,
-      projectId: process.env.REACT_APP_FEEDBACKFUN_PROJECT_ID!
-    });
+1. **Install the package**
 
-    return () => feedbackfun.destroy();
-  }, []);
-
-  return <div>Your App</div>;
-}
+```bash
+npm install @feedbackfun/js
 ```
 
-### Next.js
+2. **Initialize the widget**
 
 ```typescript
-'use client';
-import feedbackfun from '@feedbackfun/js';
-import { useEffect } from 'react';
-
-export default function Layout({ children }) {
-  useEffect(() => {
-    feedbackfun.init({
-      apiKey: process.env.NEXT_PUBLIC_FEEDBACKFUN_KEY!,
-      projectId: process.env.NEXT_PUBLIC_FEEDBACKFUN_PROJECT_ID!
-    });
-
-    return () => feedbackfun.destroy();
-  }, []);
-
-  return <>{children}</>;
-}
-```
-
-### Vue.js
-
-```vue
-<script setup>
-import { onMounted, onUnmounted } from 'vue';
 import feedbackfun from '@feedbackfun/js';
 
-onMounted(() => {
-  feedbackfun.init({
-    apiKey: import.meta.env.VITE_FEEDBACKFUN_KEY,
-    projectId: import.meta.env.VITE_FEEDBACKFUN_PROJECT_ID
-  });
-});
-
-onUnmounted(() => {
-  feedbackfun.destroy();
-});
-</script>
-```
-
-### Vanilla JavaScript
-
-```javascript
-import feedbackfun from '@feedbackfun/js';
-
-feedbackfun.init({
+// Initialize widget (config is fetched from your dashboard)
+await feedbackfun.init({
   apiKey: 'your-api-key',
   projectId: 'your-project-id'
 });
-
-// Later, when cleaning up
-feedbackfun.destroy();
 ```
 
-## API Reference
-
-### `init(config)`
+## Configuration (InitConfig)
 
-Initialize the FeedbackFun widget. Widget configuration (colors, display mode, branding, etc.) is automatically fetched from your FeedbackFun dashboard.
+All widget configuration (colors, display mode, trigger selectors, branding, etc.) is managed via the FeedbackFun dashboard at [feedbackfun.com](https://feedbackfun.com). The `init()` method only requires API credentials.
 
-**Parameters:**
-- `config.apiKey` (string, required): Your FeedbackFun API key
-- `config.projectId` (string, required): Your project ID
-
-**Returns:** `Promise<FeedbackfunWidget>` - The widget instance
+| Option | Type | Required | Description |
+|--------|------|----------|-------------|
+| `apiKey` | `string` | Yes | Your FeedbackFun API key from the dashboard |
+| `projectId` | `string` | Yes | Your project ID from the dashboard |
 
 **Example:**
+
 ```typescript
 await feedbackfun.init({
   apiKey: 'your-api-key',
@@ -128,114 +64,71 @@ await feedbackfun.init({
 });
 ```
 
-### `destroy()`
+## API (FeedbackfunWidget)
 
-Cleanup and destroy the widget instance. Important for single-page applications to prevent memory leaks.
+| Method | Description |
+|--------|-------------|
+| `init(config)` | Initialize the widget with API credentials. Returns `Promise<FeedbackfunWidget>` |
+| `destroy()` | Cleanup and destroy the widget instance. Important for SPAs to prevent memory leaks |
+| `getInstance()` | Get the current widget instance. Returns `FeedbackfunWidget \| null` |
+| `setUserInfo(user)` | Set authenticated user information to associate feedback with specific users |
+| `clearUserInfo()` | Clear user information (useful for logout scenarios) |
+| `setPrimaryColor(color)` | Runtime override of the primary theme color configured in dashboard |
+| `setPrimaryForeground(color)` | Runtime override of the primary foreground color configured in dashboard |
 
-**Example:**
-```typescript
-feedbackfun.destroy();
-```
+### Method Details
 
-### `getInstance()`
+#### `setUserInfo(user)`
 
-Get the current widget instance.
+Set authenticated user information to associate feedback with specific users. You can pass any custom data fields beyond the standard ones.
 
-**Returns:** `FeedbackfunWidget | null`
+**Standard Parameters:**
 
-**Example:**
-```typescript
-const widget = feedbackfun.getInstance();
-```
-
-### `setUserInfo(user)`
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `user.id` | `string` | Yes | User's unique identifier |
+| `user.name` | `string` | No | User's display name |
+| `user.email` | `string` | No | User's email address |
 
-Set authenticated user information to associate feedback with specific users.
+**Custom Fields:**
 
-**Parameters:**
-- `user.id` (string, required): User's unique identifier
-- `user.name` (string, optional): User's display name
-- `user.email` (string, optional): User's email address
-- `user.avatar` (string, optional): URL to user's avatar image
+You can pass any additional custom data as needed (e.g., `avatar`, `role`, `plan`, `company`, etc.). All custom fields will be stored and associated with the user's feedback.
 
 **Example:**
+
 ```typescript
 feedbackfun.setUserInfo({
   id: 'user-123',
   name: 'John Doe',
   email: 'john@example.com',
-  avatar: 'https://example.com/avatar.jpg'
+  // Custom fields - pass any data you want
+  avatar: 'https://example.com/avatar.jpg',
+  role: 'admin',
+  plan: 'premium',
+  company: 'Acme Inc'
 });
 ```
 
-### `clearUserInfo()`
-
-Clear user information (useful for logout scenarios).
-
-**Example:**
-```typescript
-feedbackfun.clearUserInfo();
-```
-
-### `setPrimaryColor(color)`
+#### `setPrimaryColor(color)`
 
 Runtime override of the primary theme color configured in your dashboard.
 
-**Parameters:**
-- `color` (string): CSS color value (hex, rgb, etc.)
-
 **Example:**
+
 ```typescript
 feedbackfun.setPrimaryColor('#3b82f6');
 ```
 
-### `setPrimaryForeground(color)`
+#### `setPrimaryForeground(color)`
 
 Runtime override of the primary foreground color configured in your dashboard.
 
-**Parameters:**
-- `color` (string): CSS color value (hex, rgb, etc.)
-
 **Example:**
-```typescript
-feedbackfun.setPrimaryForeground('#ffffff');
-```
-
-## Configuration
-
-All widget configuration (colors, display mode, trigger selectors, branding, etc.) is managed via the FeedbackFun dashboard. Simply log in to [feedbackfun.com](https://feedbackfun.com), navigate to your project settings, and configure the widget appearance and behavior.
-
-No configuration needed in code!
-
-## Features
-
-- **Feature Requests**: Collect and prioritize product ideas from your users
-- **Bug Reporting**: Visual bug reports with automatic screenshot capture and context
-- **Product Roadmap**: Interactive roadmap with voting and status tracking
-- **Real-time Chat Support**: Instant messaging between users and your support team
-- **User Authentication**: Associate feedback with authenticated users for better context
-- **Click-anywhere feedback**: Pin feedback to any element on your website
-- **Customizable Branding**: Match your brand with custom colors and themes
-- **Dark Mode Support**: Automatic dark/light theme detection
-
-## TypeScript Support
-
-Full TypeScript definitions included. Import types if needed:
 
 ```typescript
-import feedbackfun from '@feedbackfun/js';
-
-// All methods are fully typed
-await feedbackfun.init({ apiKey: '...', projectId: '...' });
+feedbackfun.setPrimaryForeground('#ffffff');
 ```
 
-## Browser Support
-
-- Chrome (last 2 versions)
-- Firefox (last 2 versions)
-- Safari (last 2 versions)
-- Edge (last 2 versions)
-
 ## License
 
 MIT