@tarxemo/customer_support 1.2.11 → 1.2.13

package/README.md

@@ -31,7 +31,40 @@ yarn add @tarxemo/customer_support
 
 ## 🚀 Quick Start
 
-### Basic Usage
+### Step 1: Get Your API Key
+
+Before using the library, you need to set up your website in the SiteWise console:
+
+1. **Visit the Console**: Go to [https://servicesconsole.tarxemo.com](https://servicesconsole.tarxemo.com)
+2. **Sign Up**: Create a new account and verify your email
+3. **Create Organization**: You'll be prompted to create an organization (e.g., "My Company")
+4. **Add Your Website**:
+   - Navigate to "Websites" in the console
+   - Click "Add Website"
+   - Enter your website name and URL (e.g., "https://mycompany.com")
+   - Submit the form
+5. **Crawl Your Website**:
+   - On your website card, click "Start Crawl"
+   - Wait for the crawl to complete (status: `PENDING` → `CRAWLING` → `READY`)
+6. **Generate API Key**:
+   - Go to "API Keys" section
+   - Click "Create API Key"
+   - Select your website and set rate limits
+   - **Copy the API key immediately** (shown only once!)
+
+### Step 2: Install the Library
+
+```bash
+npm install @tarxemo/customer_support
+```
+
+or with yarn:
+
+```bash
+yarn add @tarxemo/customer_support
+```
+
+### Step 3: Add to Your React App
 
 ```tsx
 import { CustomerSupportWidget } from '@tarxemo/customer_support';
@@ -41,17 +74,27 @@ function App() {
   return (
     <div>
       <h1>My Website</h1>
-      {/* Your content */}
+      {/* Your existing content */}
       
       <CustomerSupportWidget 
-        apiKey="your-sitewise-api-key"
+        apiKey="your-sitewise-api-key-here"
+        position="bottom-right"
+        theme={{
+          primaryColor: '#6366f1',
+          secondaryColor: '#8b5cf6',
+          backgroundColor: '#ffffff',
+          textColor: '#1f2937',
+          borderRadius: '16px',
+        }}
+        welcomeMessage="Welcome! How can we help you today?"
+        placeholder="Ask us anything about our products or services..."
       />
     </div>
   );
 }
 ```
 
-That's it! The chat widget will appear in the bottom-right corner of your page.
+That's it! The chat widget will appear in the bottom-right corner of your page, ready to answer questions about your website content.
 
 ## 📖 API Reference
 
@@ -60,7 +103,6 @@ That's it! The chat widget will appear in the bottom-right corner of your page.
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `apiKey` | `string` | **required** | Your SiteWise API key |
-| `baseUrl` | `string` | `http://localhost:8000/api` | SiteWise API base URL |
 | `theme` | `ThemeConfig` | - | Custom theme configuration |
 | `position` | `Position` | `'bottom-right'` | Widget position |
 | `welcomeMessage` | `string` | `'Hi! How can I help you today?'` | Initial welcome message |
@@ -109,6 +151,24 @@ interface ThemeConfig {
 />
 ```
 
+### Using Environment Variables for API Key
+
+```tsx
+<CustomerSupportWidget 
+  apiKey={import.meta.env.VITE_SITEWISE_API_KEY || 'fallback-key'}
+  position="bottom-right"
+  theme={{
+    primaryColor: '#6366f1',
+    secondaryColor: '#8b5cf6',
+    backgroundColor: '#ffffff',
+    textColor: '#1f2937',
+    borderRadius: '16px',
+  }}
+  welcomeMessage="Welcome to your website! How can we help you today?"
+  placeholder="Ask us anything about our products or services..."
+/>
+```
+
 ### Custom Position and Welcome Message
 
 ```tsx
@@ -223,23 +283,95 @@ export default function RootLayout({ children }) {
 
 ## 🔐 Getting an API Key
 
-1. Sign up for SiteWise at your SiteWise instance
-2. Register your website
-3. Trigger a crawl of your website content
-4. Generate an API key for your website
-5. Use the API key in the widget configuration
+Follow these steps to get your API key from the SiteWise console:
+
+### 1. Create Your Account
+1. Visit **[https://servicesconsole.tarxemo.com](https://servicesconsole.tarxemo.com)**
+2. Click **"Register"** and create your account
+3. Verify your email address
+
+### 2. Set Up Your Organization
+- After registration, you'll be automatically prompted to create an organization
+- Enter your organization name (e.g., "My Company")
+- Click **"Create Organization"**
+
+### 3. Register Your Website
+1. Navigate to the **"Websites"** section in the console
+2. Click **"Add Website"**
+3. Fill in the details:
+   - **Name**: Your website name (e.g., "My Company Website")
+   - **URL**: Your website base URL (e.g., "https://mycompany.com")
+   - **Crawl Settings**: Keep defaults for now
+4. Click **"Submit"**
+
+### 4. Crawl Your Website
+1. On your website card, click **"Start Crawl"**
+2. Wait for the crawl to complete (status will change from `PENDING` → `CRAWLING` → `READY`)
+3. You'll see statistics like pages crawled and chunks created
+
+### 5. Generate API Key
+1. Navigate to the **"API Keys"** section
+2. Click **"Create API Key"**
+3. Select your website from the dropdown
+4. Set a rate limit (optional, default: 100 requests/minute)
+5. Click **"Generate"**
+6. **⚠️ IMPORTANT**: Copy the API key immediately - it's shown only once!
+
+### 6. Test Your API Key
+```bash
+curl -X POST https://api.tarxemo.com/api/chat/ \
+  -H "X-API-Key: YOUR_API_KEY_HERE" \
+  -H "Content-Type: application/json" \
+  -d '{"question": "What services do you offer?"}'
+```
+
+Once you have your API key, you can use it in the widget configuration as shown in the Quick Start section.
 
 ## 🌐 Production Deployment
 
-For production, set the `baseUrl` to your SiteWise API:
+For production deployment, always use environment variables for your API key:
 
+### React (Create React App)
 ```tsx
+// .env file
+REACT_APP_SITEWISE_API_KEY=your-production-api-key
+
+// In your component
 <CustomerSupportWidget 
   apiKey={process.env.REACT_APP_SITEWISE_API_KEY}
-  baseUrl="https://api.yourdomain.com/api"
 />
 ```
 
+### Next.js
+```tsx
+// .env.local file
+NEXT_PUBLIC_SITEWISE_API_KEY=your-production-api-key
+
+// In your component
+<CustomerSupportWidget 
+  apiKey={process.env.NEXT_PUBLIC_SITEWISE_API_KEY}
+/>
+```
+
+### Vite
+```tsx
+// .env file
+VITE_SITEWISE_API_KEY=your-production-api-key
+
+// In your component
+<CustomerSupportWidget 
+  apiKey={import.meta.env.VITE_SITEWISE_API_KEY}
+/>
+```
+
+### Production Checklist
+- [ ] Use environment variables for API keys (never hardcode)
+- [ ] Test with your production API key
+- [ ] Verify your website crawl is completed in the console
+- [ ] Monitor API usage and rate limits
+- [ ] Test on mobile devices
+- [ ] Check console for any errors
+
 ## 📱 Mobile Support
 
 The widget is fully responsive and automatically adjusts to mobile screens:
@@ -302,12 +434,13 @@ For issues and questions:
 
 ## 🔗 Links
 
-- [NPM Package](https://www.npmjs.com/package/@tarxemo/customer_support)
-- [GitHub Repository](https://github.com/tarxemo/customer_support)
-- [SiteWise Platform](https://github.com/yourusername/sitewise)
+- **NPM Package**: https://www.npmjs.com/package/@tarxemo/customer_support
+- **GitHub Repository**: https://github.com/tarxemo/customer_support
+- **SiteWise Console**: https://servicesconsole.tarxemo.com
+- **API Documentation**: Available in the SiteWise console after login
+- **User Guide**: Complete step-by-step integration guide
+- **Developer Guide**: Advanced API reference and customization
 
 ---
 
 Made with ❤️ by Tarxemo
-# custom_support
-# custom_support

package/package.json

@@ -51,7 +51,7 @@
         "url": "https://github.com/tarxemo/customer_support/issues"
     },
     "homepage": "https://github.com/tarxemo/customer_support#readme",
-    "version": "1.2.11",
+    "version": "1.2.13",
     "peerDependencies": {
         "react": "^18.0.0 || ^19.0.0",
         "react-dom": "^18.0.0 || ^19.0.0",