@schmitech/chatbot-widget 0.4.9 → 0.4.11

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.
package/README.md CHANGED
@@ -1,27 +1,124 @@
1
- # How to Use the Chatbot Widget
1
+ # Schmitech Chatbot Widget
2
2
 
3
- This guide will help you integrate the chatbot widget into your website with minimal effort.
3
+ A customizable chatbot widget that integrates seamlessly into any website. Perfect for customer support, lead generation, and user engagement.
4
4
 
5
- ## Quick Start
5
+ ## 🚀 Quick Start
6
6
 
7
- ### 1. Include the Widget Files
7
+ ### Prerequisites
8
+ - Any modern web browser
9
+ - A web server (for local development, you can use a simple HTTP server)
10
+ - Basic knowledge of HTML/JavaScript
8
11
 
9
- Choose one of these methods to include the widget:
12
+ ### Installation Methods
10
13
 
11
- **Option 1 - All-in-one bundle (Recommended):**
14
+ **Option 1 - CDN:**
12
15
  ```html
13
- <script src="https://unpkg.com/@schmitech/chatbot-widget@latest/dist/chatbot-widget.bundle.js"></script>
16
+ <!-- Add to your HTML head -->
17
+ <link rel="stylesheet" href="https://unpkg.com/@schmitech/chatbot-widget@latest/dist/chatbot-widget.css">
18
+
19
+ <!-- Add before closing body tag -->
20
+ <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
21
+ <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
22
+ <script src="https://unpkg.com/@schmitech/chatbot-widget@latest/dist/chatbot-widget.umd.js"></script>
14
23
  ```
15
24
 
16
- **Option 2 - Separate files:**
25
+ **Option 2 - npm install:**
26
+ ```bash
27
+ npm install @schmitech/chatbot-widget
28
+ ```
29
+
30
+ ### 30-Second Setup
31
+
32
+ 1. **Add the widget to your HTML:**
17
33
  ```html
18
- <script src="https://unpkg.com/@schmitech/chatbot-widget@latest/dist/chatbot-widget.umd.js"></script>
19
- <link rel="stylesheet" href="https://unpkg.com/@schmitech/chatbot-widget@latest/dist/chatbot-widget.css">
34
+ <!DOCTYPE html>
35
+ <html>
36
+ <head>
37
+ <link rel="stylesheet" href="https://unpkg.com/@schmitech/chatbot-widget@latest/dist/chatbot-widget.css">
38
+ </head>
39
+ <body>
40
+ <!-- Your website content -->
41
+
42
+ <!-- Chatbot container (optional - for embedded mode) -->
43
+ <div id="chatbot-container"></div>
44
+
45
+ <!-- Widget dependencies -->
46
+ <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
47
+ <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
48
+ <script src="https://unpkg.com/@schmitech/chatbot-widget@latest/dist/chatbot-widget.umd.js"></script>
49
+
50
+ <!-- Initialize widget -->
51
+ <script>
52
+ window.addEventListener('load', function() {
53
+ window.initChatbotWidget({
54
+ apiUrl: 'https://your-api-endpoint.com',
55
+ apiKey: 'your-api-key',
56
+ sessionId: 'user-session-' + Date.now(),
57
+ containerSelector: '#chatbot-container', // Remove for floating widget
58
+ widgetConfig: {
59
+ header: { title: "Chat Assistant" },
60
+ welcome: {
61
+ title: "Hello! 👋",
62
+ description: "How can I help you today?"
63
+ }
64
+ }
65
+ });
66
+ });
67
+ </script>
68
+ </body>
69
+ </html>
20
70
  ```
21
71
 
22
- ### 2. Initialize the Widget
72
+ 2. **Replace the placeholder values:**
73
+ - `https://your-api-endpoint.com` → Your chatbot API URL
74
+ - `your-api-key` → Your API authentication key
75
+
76
+ 3. **Done!** The widget will appear on your website.
23
77
 
24
- Add this code to your website:
78
+ ## 📋 Two Integration Modes
79
+
80
+ ### Floating Widget (Default)
81
+ The widget appears as a chat button in the bottom-right corner:
82
+ ```html
83
+ <script>
84
+ window.addEventListener('load', function() {
85
+ window.initChatbotWidget({
86
+ apiUrl: 'https://your-api-endpoint.com',
87
+ apiKey: 'your-api-key',
88
+ sessionId: 'user-session-' + Date.now(),
89
+ // No containerSelector = floating mode
90
+ widgetConfig: {
91
+ header: { title: "Chat Assistant" },
92
+ welcome: { title: "Hi there! 👋", description: "How can I help?" }
93
+ }
94
+ });
95
+ });
96
+ </script>
97
+ ```
98
+
99
+ ### Embedded Widget
100
+ The widget embeds directly into a specific container:
101
+ ```html
102
+ <!-- Add container div where you want the widget -->
103
+ <div id="chat-widget" style="height: 500px; width: 100%;"></div>
104
+
105
+ <script>
106
+ window.addEventListener('load', function() {
107
+ window.initChatbotWidget({
108
+ apiUrl: 'https://your-api-endpoint.com',
109
+ apiKey: 'your-api-key',
110
+ sessionId: 'user-session-' + Date.now(),
111
+ containerSelector: '#chat-widget', // Embed in this container
112
+ widgetConfig: {
113
+ header: { title: "Chat Assistant" },
114
+ welcome: { title: "Hi there! 👋", description: "How can I help?" }
115
+ }
116
+ });
117
+ });
118
+ </script>
119
+ ```
120
+
121
+ ## 🛠️ Settings
25
122
 
26
123
  ```html
27
124
  <script>
@@ -101,7 +198,11 @@ Add this code to your website:
101
198
  // Chat button styling
102
199
  chatButton: {
103
200
  background: '#ffffff', // Button background
104
- hoverBackground: '#f8fafc' // Button hover background
201
+ hoverBackground: '#f8fafc', // Button hover background
202
+ iconColor: '#7c3aed', // Icon color
203
+ iconBorderColor: '#e5e7eb', // Icon border color
204
+ borderColor: '#e5e7eb', // Button border color
205
+ iconName: 'MessageSquare' // Icon name (see available icons below)
105
206
  }
106
207
  }
107
208
  }
@@ -153,32 +254,112 @@ To place the widget in a specific container instead of the bottom-right corner:
153
254
  </script>
154
255
  ```
155
256
 
257
+ ### Separate JavaScript File (Recommended for Complex Sites)
258
+
259
+ For better organization, create a separate file for your chatbot configuration:
260
+
261
+ **1. Create `chatbot-config.js`:**
262
+ ```javascript
263
+ // chatbot-config.js
264
+ function getSessionId() {
265
+ const storageKey = 'chatbot_session_id';
266
+ let sessionId = sessionStorage.getItem(storageKey);
267
+
268
+ if (!sessionId) {
269
+ sessionId = `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
270
+ sessionStorage.setItem(storageKey, sessionId);
271
+ }
272
+
273
+ return sessionId;
274
+ }
275
+
276
+ function initializeChatbot() {
277
+ if (!window.initChatbotWidget) {
278
+ console.error('Chatbot widget not loaded');
279
+ return;
280
+ }
281
+
282
+ window.initChatbotWidget({
283
+ apiUrl: 'https://your-api-endpoint.com',
284
+ apiKey: 'your-api-key',
285
+ sessionId: getSessionId(),
286
+ widgetConfig: {
287
+ header: { title: "Support Chat" },
288
+ welcome: {
289
+ title: "Welcome! 👋",
290
+ description: "How can we help you today?"
291
+ },
292
+ suggestedQuestions: [
293
+ { text: "How can I get started?", query: "Help me get started" },
294
+ { text: "Contact support", query: "I need to contact support" }
295
+ ],
296
+ theme: {
297
+ primary: '#4f46e5',
298
+ secondary: '#7c3aed'
299
+ }
300
+ }
301
+ });
302
+ }
303
+
304
+ window.addEventListener('load', initializeChatbot);
305
+ ```
306
+
307
+ **2. Include in your HTML:**
308
+ ```html
309
+ <!DOCTYPE html>
310
+ <html>
311
+ <head>
312
+ <link rel="stylesheet" href="https://unpkg.com/@schmitech/chatbot-widget@latest/dist/chatbot-widget.css">
313
+ </head>
314
+ <body>
315
+ <!-- Your website content -->
316
+
317
+ <!-- Widget dependencies -->
318
+ <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
319
+ <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
320
+ <script src="https://unpkg.com/@schmitech/chatbot-widget@latest/dist/chatbot-widget.umd.js"></script>
321
+
322
+ <!-- Your chatbot configuration -->
323
+ <script src="chatbot-config.js"></script>
324
+ </body>
325
+ </html>
326
+ ```
327
+
156
328
  ### React/TypeScript Integration
157
329
 
158
- For React applications, you can integrate the widget like this:
330
+ For React applications:
159
331
 
160
332
  ```tsx
161
- import { useEffect } from 'react';
333
+ import React, { useEffect, useRef } from 'react';
334
+
335
+ declare global {
336
+ interface Window {
337
+ initChatbotWidget?: (config: any) => void;
338
+ }
339
+ }
162
340
 
163
341
  function App() {
342
+ const widgetInitialized = useRef(false);
343
+
164
344
  useEffect(() => {
165
- if (typeof window !== 'undefined' && window.initChatbotWidget) {
345
+ if (!widgetInitialized.current && window.initChatbotWidget) {
166
346
  window.initChatbotWidget({
167
- apiUrl: process.env.REACT_APP_API_ENDPOINT,
168
- apiKey: process.env.REACT_APP_API_KEY,
169
- sessionId: process.env.REACT_APP_SESSION_ID,
170
- header: {
171
- title: "AI Assistant"
172
- },
173
- // ... other config options
347
+ apiUrl: process.env.REACT_APP_API_ENDPOINT || 'https://your-api-endpoint.com',
348
+ apiKey: process.env.REACT_APP_API_KEY || 'your-api-key',
349
+ sessionId: `session_${Date.now()}`,
350
+ widgetConfig: {
351
+ header: { title: "AI Assistant" },
352
+ welcome: { title: "Hello!", description: "How can I help?" }
353
+ }
174
354
  });
355
+ widgetInitialized.current = true;
175
356
  }
176
357
  }, []);
177
358
 
178
- return (
179
- // Your app content
180
- );
359
+ return <div>{/* Your app content */}</div>;
181
360
  }
361
+
362
+ export default App;
182
363
  ```
183
364
 
184
365
  ## Theme Configuration
@@ -211,14 +392,18 @@ theme: {
211
392
  chatButton: {
212
393
  background: string; // Chat button background
213
394
  hoverBackground: string; // Chat button hover background
214
- },
215
- iconColor: string; // Widget icon color
395
+ iconColor: string; // Icon color
396
+ iconBorderColor: string; // Icon border color
397
+ borderColor: string; // Button border color
398
+ iconName: string; // Icon name (see available icons above)
399
+ }
216
400
  }
217
401
  ```
218
402
 
219
403
  ### Built-in Themes
220
404
 
221
405
  The demo includes several professional themes:
406
+ - **Default** - Orange and blue gradient (AI Assistant theme)
222
407
  - **Modern** - Vibrant indigo/purple gradient
223
408
  - **Minimal** - Clean gray palette
224
409
  - **Corporate** - Professional blue theme
@@ -228,6 +413,8 @@ The demo includes several professional themes:
228
413
  - **Lavender** - Elegant purple theme
229
414
  - **Monochrome** - Sophisticated grayscale
230
415
 
416
+ Each theme includes appropriate icon selection and color coordination for a cohesive look.
417
+
231
418
  ## Suggested Questions Length Configuration
232
419
 
233
420
  The widget provides flexible length controls for suggested questions:
@@ -264,15 +451,60 @@ window.initChatbotWidget({
264
451
 
265
452
  ## Available Icons
266
453
 
267
- Choose from these built-in icons:
268
- - `heart` - Heart icon
269
- - `message-square` - Square message bubble (default)
270
- - `message-circle` - Round message bubble
271
- - `message-dots` - Message bubble with dots
272
- - `help-circle` - Question mark in circle
273
- - `info` - Information icon
274
- - `bot` - Robot icon
275
- - `sparkles` - Sparkles icon
454
+ Choose from these chatbot and AI assistant related icons:
455
+
456
+ ### Chat and Communication
457
+ - `MessageSquare` - Square message bubble (default)
458
+ - `MessageCircle` - Round message bubble
459
+ - `MessageCircleMore` - Round message bubble with dots
460
+ - `MessageSquareText` - Square message bubble with text lines
461
+ - `MessageSquareDots` - Square message bubble with dots
462
+ - `ChatBubble` - Classic chat bubble
463
+ - `ChatBubbleLeft` - Left-aligned chat bubble
464
+ - `ChatBubbleLeftRight` - Two-way chat bubble
465
+ - `ChatBubbleLeftEllipsis` - Chat bubble with ellipsis
466
+ - `ChatBubbleLeftDots` - Chat bubble with dots
467
+ - `Send` - Send icon
468
+ - `Reply` - Reply icon
469
+
470
+ ### Help and Information
471
+ - `HelpCircle` - Question mark in circle
472
+ - `QuestionMarkCircle` - Question mark in circle (alias)
473
+ - `Info` - Information icon
474
+ - `Lightbulb` - Lightbulb (ideas/help)
475
+ - `Sparkles` - Sparkles (magic/assistance)
476
+
477
+ ### AI and Technology
478
+ - `Bot` - Robot icon
479
+ - `Brain` - Brain icon (AI/intelligence)
480
+ - `Cpu` - CPU chip icon
481
+ - `Chip` - Microchip icon
482
+ - `Zap` - Lightning bolt (power/energy)
483
+ - `Target` - Target icon (precision/accuracy)
484
+
485
+ ### People and Users
486
+ - `User` - Single user icon
487
+ - `Users` - Multiple users icon
488
+ - `UserCheck` - User with checkmark
489
+ - `UserPlus` - User with plus sign
490
+ - `UserMinus` - User with minus sign
491
+
492
+ ### Search and Discovery
493
+ - `Search` - Magnifying glass
494
+ - `SearchX` - Search with X (clear search)
495
+ - `Filter` - Filter icon
496
+
497
+ ### Usage Example
498
+ ```javascript
499
+ theme: {
500
+ chatButton: {
501
+ iconName: 'Bot', // Use robot icon
502
+ iconColor: '#7c3aed', // Purple icon color
503
+ iconBorderColor: '#e5e7eb', // Light gray border
504
+ borderColor: '#e5e7eb' // Button border color
505
+ }
506
+ }
507
+ ```
276
508
 
277
509
  ## Widget Configuration Structure
278
510
 
@@ -293,8 +525,7 @@ Choose from these built-in icons:
293
525
  ],
294
526
  maxSuggestedQuestionLength?: number; // Display length limit (default: 50)
295
527
  maxSuggestedQuestionQueryLength?: number; // Query length limit (default: 200)
296
- theme: { /* theme object */ },
297
- icon: string; // Widget icon type
528
+ theme: { /* theme object */ }
298
529
  }
299
530
  ```
300
531
 
@@ -348,9 +579,88 @@ The widget uses **Mona Sans** font by default, with fallbacks to system fonts fo
348
579
  - If you see styling issues, check for conflicting CSS rules
349
580
  - Dark themes require proper text color configuration
350
581
 
582
+ ## 🐛 Troubleshooting
583
+
584
+ ### Common Issues
585
+
586
+ **1. Widget doesn't appear:**
587
+ ```javascript
588
+ // Check if widget loaded in browser console
589
+ console.log(typeof window.initChatbotWidget); // Should not be 'undefined'
590
+
591
+ // Check for error messages in console
592
+ // Make sure CSS file is loaded in Network tab
593
+ ```
594
+
595
+ **2. "Chatbot container not found" error:**
596
+ ```html
597
+ <!-- Make sure CSS file is included BEFORE the widget script -->
598
+ <link rel="stylesheet" href="https://unpkg.com/@schmitech/chatbot-widget@latest/dist/chatbot-widget.css">
599
+
600
+ <!-- For embedded mode, ensure container exists -->
601
+ <div id="chatbot-container"></div>
602
+ ```
603
+
604
+ **3. Widget appears but doesn't work:**
605
+ ```javascript
606
+ // Verify your API configuration
607
+ {
608
+ apiUrl: 'https://your-actual-api-url.com', // Must be a valid URL
609
+ apiKey: 'your-actual-api-key', // Must be valid
610
+ sessionId: 'unique-session-id' // Must be unique per user
611
+ }
612
+ ```
613
+
614
+ **4. Styling issues:**
615
+ ```css
616
+ /* If widget styling conflicts with your site */
617
+ .chatbot-widget {
618
+ z-index: 9999 !important;
619
+ }
620
+ ```
621
+
622
+ ### Browser Compatibility
623
+ - ✅ Chrome 60+
624
+ - ✅ Firefox 55+
625
+ - ✅ Safari 12+
626
+ - ✅ Edge 79+
627
+ - ❌ Internet Explorer (not supported)
628
+
629
+ ### Cache Issues
630
+ If changes don't appear:
631
+ ```html
632
+ <!-- Add version parameter to force reload -->
633
+ <script src="https://unpkg.com/@schmitech/chatbot-widget@latest/dist/chatbot-widget.umd.js?v=1.0"></script>
634
+ <script src="chatbot-config.js?v=1.0"></script>
635
+ ```
636
+
637
+ ## 📱 Mobile Responsiveness
638
+
639
+ The widget automatically adapts to mobile devices:
640
+ - Floating mode: Full-screen overlay on mobile
641
+ - Embedded mode: Responsive to container size
642
+ - Touch-friendly buttons and input
643
+
644
+ ## 🔧 Local Development
645
+
646
+ For testing locally:
647
+ ```bash
648
+ # Simple HTTP server with Python
649
+ python -m http.server 8000
650
+
651
+ # Or with Node.js
652
+ npx http-server
653
+
654
+ # Or with PHP
655
+ php -S localhost:8000
656
+ ```
657
+
658
+ Then visit `http://localhost:8000`
659
+
351
660
  ## Support
352
661
 
353
- For more help:
354
- - Visit our [GitHub repository](https://github.com/schmitech/orbit)
355
- - Check the demo at `/demo.html` for live examples
356
- - Open an issue on GitHub for bug reports
662
+ For help and questions:
663
+ - 📖 [Full Documentation](https://github.com/schmitech/chatbot-widget)
664
+ - 🐛 [Report Issues](https://github.com/schmitech/chatbot-widget/issues)
665
+ - 💬 [Community Discussions](https://github.com/schmitech/chatbot-widget/discussions)
666
+ - 📧 Email: info@schmitech.ai
@@ -0,0 +1,5 @@
1
+ typeof window < "u" && (window.global = window);
2
+ const e = {};
3
+ export {
4
+ e as default
5
+ };