ragged-chat-sdk 1.0.2 → 1.0.4

package/README.md

@@ -26,14 +26,57 @@ init({
 | --- | --- | --- |
 | `subdomain` | `string` | **Required**. The unique subdomain of your chatbot. |
 | `apiUrl` | `string` | Optional. The base URL of the Ragged API. Defaults to `https://ragflowdb.onrender.com/api`. |
+| `widgetShape` | `'circle' \| 'rounded-square'` | Optional. The shape of the floating widget button. Defaults to `'circle'`. |
+| `widgetSize` | `'small' \| 'medium' \| 'large'` | Optional. The size of the floating widget button. Defaults to `'medium'`. |
 
-## Example
+### Widget Customization
+
+You can customize the appearance of the floating chat widget button:
+
+**Shape Options:**
+- `'circle'` - Circular button (default)
+- `'rounded-square'` - Square button with rounded corners
+
+**Size Options:**
+- `'small'` - 48x48 pixels
+- `'medium'` - 56x56 pixels (default)
+- `'large'` - 68x68 pixels
+
+## Examples
+
+### Basic Setup
 
 ```javascript
 import { init } from 'ragged-chat-sdk';
 
-// Initialize the chatbot
+// Initialize the chatbot with default settings
 init({
   subdomain: 'my-awesome-bot'
 });
 ```
+
+### Custom Widget Appearance
+
+```javascript
+import { init } from 'ragged-chat-sdk';
+
+// Large rounded square button
+init({
+  subdomain: 'my-awesome-bot',
+  widgetShape: 'rounded-square',
+  widgetSize: 'large'
+});
+```
+
+### Small Circular Button
+
+```javascript
+import { init } from 'ragged-chat-sdk';
+
+// Small circular button
+init({
+  subdomain: 'my-awesome-bot',
+  widgetShape: 'circle',
+  widgetSize: 'small'
+});
+```

package/index.d.ts

@@ -1,6 +1,8 @@
 export interface InitOptions {
     subdomain: string;
     apiUrl?: string;
+    widgetShape?: 'circle' | 'rounded-square';
+    widgetSize?: 'small' | 'medium' | 'large';
     [key: string]: any;
 }
 

package/index.js

@@ -4,6 +4,8 @@ export function init(config = {}) {
     // Configuration
     const API_URL = config.apiUrl || 'https://ragflowdb.onrender.com/api';
     const subdomain = config.subdomain;
+    let widgetShape = config.widgetShape || 'circle'; // Fallback to circle
+    let widgetSize = config.widgetSize || 'medium'; // Fallback to medium
 
     if (!subdomain) {
         console.error('[Ragged SDK] Error: subdomain is required. Usage: Ragged.init({ subdomain: "your-subdomain" })');
@@ -535,10 +537,7 @@ export function init(config = {}) {
                 }
                 
                 #ragged-toggle-btn {
-                    width: 56px;
-                    height: 56px;
                     border: none;
-                    border-radius: 50%;
                     color: white;
                     cursor: pointer;
                     display: flex;
@@ -550,6 +549,31 @@ export function init(config = {}) {
                     overflow: hidden;
                 }
                 
+                /* Size variations */
+                #ragged-toggle-btn.size-small {
+                    width: 48px;
+                    height: 48px;
+                }
+                
+                #ragged-toggle-btn.size-medium {
+                    width: 56px;
+                    height: 56px;
+                }
+                
+                #ragged-toggle-btn.size-large {
+                    width: 68px;
+                    height: 68px;
+                }
+                
+                /* Shape variations */
+                #ragged-toggle-btn.shape-circle {
+                    border-radius: 50%;
+                }
+                
+                #ragged-toggle-btn.shape-rounded-square {
+                    border-radius: 16px;
+                }
+                
                 #ragged-toggle-btn:hover {
                     transform: scale(1.1);
                 }
@@ -784,6 +808,32 @@ export function init(config = {}) {
             input.placeholder = chatConfig.settings?.placeholder || 'Type your message here...';
             emptyTitle.textContent = chatConfig.settings?.welcomeMessage || 'How can I help you?';
 
+            // Apply widget shape and size customization
+            if (chatConfig.settings) {
+                // Prioritize backend settings if they exist, otherwise use init config
+                if (chatConfig.settings.widgetShape) widgetShape = chatConfig.settings.widgetShape;
+                if (chatConfig.settings.widgetSize) widgetSize = chatConfig.settings.widgetSize;
+            }
+
+            if (toggleBtn) {
+                // Clear any existing shape/size classes
+                toggleBtn.classList.remove('shape-circle', 'shape-rounded-square', 'size-small', 'size-medium', 'size-large');
+                toggleBtn.classList.add(`shape-${widgetShape}`);
+                toggleBtn.classList.add(`size-${widgetSize}`);
+
+                // Also update icon sizing
+                const iconMessage = document.getElementById('ragged-icon-message');
+                const iconClose = document.getElementById('ragged-icon-close');
+                if (iconMessage) {
+                    iconMessage.setAttribute('width', widgetSize === 'small' ? '24' : widgetSize === 'large' ? '32' : '28');
+                    iconMessage.setAttribute('height', widgetSize === 'small' ? '24' : widgetSize === 'large' ? '32' : '28');
+                }
+                if (iconClose) {
+                    iconClose.setAttribute('width', widgetSize === 'small' ? '24' : widgetSize === 'large' ? '32' : '28');
+                    iconClose.setAttribute('height', widgetSize === 'small' ? '24' : widgetSize === 'large' ? '32' : '28');
+                }
+            }
+
             // Set custom logo for all users (free platform)
             if (chatConfig.settings?.brandLogo) {
                 const logoUrl = chatConfig.settings.brandLogo;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "ragged-chat-sdk",
-    "version": "1.0.2",
+    "version": "1.0.4",
     "description": "Official SDK for integrating Ragged Chatbots into your website.",
     "type": "module",
     "main": "index.js",