hanc-webrtc-widgets 1.4.2 → 2.0.1

package/README.md

@@ -153,6 +153,15 @@ An “inline” widget that you embed directly in page content (often as a hero
 | `agent-id` (required)    | string | Agent ID for Twilio calls                                |
 | `button-start-text`      | string | Custom start button text (default: `Start Call with ai`) |
 | `button-connecting-text` | string | Custom connecting button text (default: `Connecting...`) |
+| `button-end-text`        | string | End button text (default: `End call`)                    |
+| `hide-button`            | bool   | Hide the button (orb click still toggles the call)       |
+| `button-position`        | string | Button placement: `top` or `bottom`                      |
+| `orb-color`              | string | Base orb color in idle state                             |
+| `active-orb-color`       | string | Orb color applied when the call becomes active           |
+| `button-color`           | string | Base button color (also used to derive hover/active)      |
+| `button-hover-color`     | string | Button hover color override                              |
+| `button-active-color`    | string | Button active color override                             |
+| `button-text-color`      | string | Button text color                                        |
 
 #### Available Events:
 
@@ -199,6 +208,183 @@ An “inline” widget that you embed directly in page content (often as a hero
 </style>
 ```
 
+## Additional customization options (append-only)
+
+Below are the new properties and examples you can add to the widgets.
+
+### Theme and visual style
+
+Themes: `liquid-purple` , `liquid-cyan`, `liquid-pink`, `neural-green`,
+`neural-blue`(default), `orbit-blue`, `synaptic-purple`, `minimal-dark`, `minimal-light`, `custom`.
+
+Visual styles: `liquid-glass` , `liquid-glass-premium`, `neural-liquid`,
+`neural-orbit`, `neural-network`(default), `synaptic-core`, `organic-sphere`, `morphing-blob`.
+
+```html
+<hanc-ai-inline-call
+  agent-id="YOUR_AGENT_ID"
+  theme="liquid-cyan"
+  visual-style="neural-liquid"
+  orb-size="200"
+></hanc-ai-inline-call>
+```
+
+### Inline widget new attributes
+
+- `voice-service-url`
+- `theme`
+- `visual-style`
+- `orb-size`
+- `button-end-text`
+- `hide-button`
+- `button-position`
+- `orb-color`
+- `active-orb-color`
+- `button-color`
+- `button-hover-color`
+- `button-active-color`
+- `button-text-color`
+
+```html
+<hanc-ai-inline-call
+  agent-id="YOUR_AGENT_ID"
+  voice-service-url="https://voice.example.com"
+  theme="minimal-light"
+  visual-style="morphing-blob"
+  orb-size="220"
+  button-end-text="Stop"
+></hanc-ai-inline-call>
+```
+
+### Floating widget new attributes
+
+- `voice-service-url`
+- `theme`
+- `visual-style`
+- `position`
+- `offset-x`
+- `offset-y`
+- `orb-size`
+- `hide-button`
+- `button-position`
+- `orb-color`
+- `active-orb-color`
+- `button-color`
+- `button-hover-color`
+- `button-active-color`
+- `button-text-color`
+- `minimized`
+
+```html
+<hanc-ai-floating-call
+  agent-id="YOUR_AGENT_ID"
+  voice-service-url="https://voice.example.com"
+  theme="neural-green"
+  visual-style="neural-network"
+  position="top-left"
+  offset-x="32"
+  offset-y="32"
+  orb-size="140"
+  minimized
+></hanc-ai-floating-call>
+```
+
+### CSS variables (when using theme="custom")
+
+```css
+hanc-ai-inline-call {
+  --hanc-button: linear-gradient(135deg, #0ea5e9 0%, #22d3ee 100%);
+  --hanc-button-hover: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
+  --hanc-button-active: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+  --hanc-button-text: #ffffff;
+  --hanc-button-radius: 16px;
+  --hanc-button-shadow: rgba(14, 165, 233, 0.35);
+  --hanc-button-shadow-hover: rgba(14, 165, 233, 0.45);
+  --hanc-button-shadow-active: rgba(239, 68, 68, 0.45);
+  --hanc-orb-active-glow: rgba(14, 165, 233, 0.35);
+  --hanc-orb-z-index: 10000;
+  --hanc-widget-z-index: 9999;
+}
+
+hanc-ai-floating-call {
+  --hanc-background: rgba(10, 10, 20, 0.9);
+  --hanc-glow-shadow: rgba(14, 165, 233, 0.2);
+  --hanc-orb-size: 140px;
+  --hanc-orb-active-glow: rgba(14, 165, 233, 0.35);
+  --hanc-orb-z-index: 10000;
+  --hanc-widget-z-index: 9999;
+}
+```
+
+#### Custom theme examples
+
+Tip: set `theme="custom"` and override only the variables you need. All other values fall back to defaults.
+
+```html
+<hanc-ai-inline-call
+  agent-id="YOUR_AGENT_ID"
+  theme="custom"
+  visual-style="neural-network"
+  active-orb-color="#22c55e"
+></hanc-ai-inline-call>
+
+<style>
+  hanc-ai-inline-call {
+    --hanc-background: rgba(10, 15, 20, 0.8);
+    --hanc-orb-size: 220px;
+    --hanc-button: linear-gradient(135deg, #0ea5e9 0%, #22c55e 100%);
+    --hanc-button-hover: linear-gradient(135deg, #0284c7 0%, #16a34a 100%);
+    --hanc-button-active: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+    --hanc-button-text: #ffffff;
+    --hanc-orb-active-glow: rgba(34, 197, 94, 0.4);
+  }
+</style>
+```
+
+```html
+<hanc-ai-inline-call
+  agent-id="YOUR_AGENT_ID"
+  theme="custom"
+  visual-style="neural-orbit"
+  button-position="top"
+></hanc-ai-inline-call>
+
+<style>
+  hanc-ai-inline-call {
+    --hanc-orb-size: 260px;
+    --hanc-button-radius: 999px;
+    --hanc-button: linear-gradient(135deg, #111827 0%, #374151 100%);
+    --hanc-button-hover: linear-gradient(135deg, #1f2937 0%, #111827 100%);
+    --hanc-button-active: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
+    --hanc-button-text: #f9fafb;
+    --hanc-orb-active-glow: rgba(59, 130, 246, 0.35);
+  }
+</style>
+```
+
+```html
+<hanc-ai-floating-call
+  agent-id="YOUR_AGENT_ID"
+  theme="custom"
+  position="top-right"
+  button-position="top"
+  active-orb-color="#f97316"
+></hanc-ai-floating-call>
+
+<style>
+  hanc-ai-floating-call {
+    --hanc-background: rgba(255, 255, 255, 0.92);
+    --hanc-text: rgba(24, 24, 27, 0.8);
+    --hanc-glow-shadow: rgba(249, 115, 22, 0.2);
+    --hanc-orb-size: 120px;
+    --hanc-button: linear-gradient(135deg, #f97316 0%, #f59e0b 100%);
+    --hanc-button-hover: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
+    --hanc-button-active: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
+    --hanc-button-text: #ffffff;
+  }
+</style>
+```
+
 ---
 
 ### `<hanc-ai-floating-call>`
@@ -215,6 +401,14 @@ A persistent, docked widget that floats in the corner and launches the same voic
 | `button-start-text`      | string | Start button text (default: `Start Call with ai`)        |
 | `button-connecting-text` | string | Custom connecting button text (default: `Connecting...`) |
 | `button-end-text`        | string | End button text (default: `End call`)                    |
+| `hide-button`            | bool   | Hide the button (orb click still toggles the call)       |
+| `button-position`        | string | Button placement: `top` or `bottom`                      |
+| `orb-color`              | string | Base orb color in idle state                             |
+| `active-orb-color`       | string | Orb color applied when the call becomes active           |
+| `button-color`           | string | Base button color (also used to derive hover/active)      |
+| `button-hover-color`     | string | Button hover color override                              |
+| `button-active-color`    | string | Button active color override                             |
+| `button-text-color`      | string | Button text color                                        |
 
 #### Available Events: