hanc-webrtc-widgets 1.1.1 → 1.1.3
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
ADDED
|
@@ -0,0 +1,237 @@
|
|
|
1
|
+
# Hanc-webrtc-widgets
|
|
2
|
+
|
|
3
|
+
**Hanc-webrtc-widgets** is a Web Components library for easily integrating **Hanc AI call widgets** into your website or web application.
|
|
4
|
+
|
|
5
|
+
It provides ready-to-use, customizable, and lightweight UI widgets for initiating AI-driven voice calls, without the need for any frontend frameworks.
|
|
6
|
+
|
|
7
|
+
You can use it in **plain HTML**, or integrate it with **React**, **Next.js**, or any other modern frontend stack.
|
|
8
|
+
|
|
9
|
+
## Quick Start
|
|
10
|
+
|
|
11
|
+
### HTML Example
|
|
12
|
+
|
|
13
|
+
```html
|
|
14
|
+
<!DOCTYPE html>
|
|
15
|
+
<html lang="en">
|
|
16
|
+
<head>
|
|
17
|
+
<meta charset="UTF-8" />
|
|
18
|
+
<script
|
|
19
|
+
src="https://unpkg.com/hanc-webrtc-widgets"
|
|
20
|
+
async
|
|
21
|
+
type="text/javascript"
|
|
22
|
+
></script>
|
|
23
|
+
</head>
|
|
24
|
+
<body>
|
|
25
|
+
<!-- Inline Call Widget -->
|
|
26
|
+
<hanc-ai-inline-call agent-id="YOUR_AGENT_ID"></hanc-ai-inline-call>
|
|
27
|
+
|
|
28
|
+
<!-- Floating Call Widget -->
|
|
29
|
+
<hanc-ai-floating-call agent-id="YOUR_AGENT_ID"></hanc-ai-floating-call>
|
|
30
|
+
</body>
|
|
31
|
+
</html>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### React Example
|
|
35
|
+
|
|
36
|
+
1. Installation lit/react
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
npm i @lit/react hanc-webrtc-widget
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
2. Creating a React wrapper and using
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
import React from 'react';
|
|
46
|
+
import { createComponent } from '@lit/react';
|
|
47
|
+
import { InlineCall, FloatingCall } from 'hanc-webrtc-widgets';
|
|
48
|
+
|
|
49
|
+
export const HancAiInlineCall = createComponent({
|
|
50
|
+
tagName: 'hanc-ai-inline-call',
|
|
51
|
+
elementClass: InlineCall,
|
|
52
|
+
react: React,
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
export const HancAiFloatingCall = createComponent({
|
|
56
|
+
tagName: 'hanc-ai-floating-call',
|
|
57
|
+
elementClass: FloatingCall,
|
|
58
|
+
react: React,
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
// An example of a component where both widgets are used
|
|
62
|
+
export default function Example() {
|
|
63
|
+
return (
|
|
64
|
+
<>
|
|
65
|
+
<HancAiInlineCall agentId="YOUR_AGENT_ID" />
|
|
66
|
+
<HancAiFloatingCall agentId="YOUR_AGENT_ID" />
|
|
67
|
+
</>
|
|
68
|
+
);
|
|
69
|
+
}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### Next.js Example
|
|
73
|
+
|
|
74
|
+
1. Installation lit/react
|
|
75
|
+
|
|
76
|
+
```bash
|
|
77
|
+
npm i @lit/react hanc-webrtc-widget
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
2. Creating a Next.js wrapper and using
|
|
81
|
+
|
|
82
|
+
```tsx
|
|
83
|
+
'use client';
|
|
84
|
+
|
|
85
|
+
import React from 'react';
|
|
86
|
+
import dynamic from 'next/dynamic';
|
|
87
|
+
import { createComponent } from '@lit/react';
|
|
88
|
+
|
|
89
|
+
export const HancAiInlineCall = dynamic(
|
|
90
|
+
async () => {
|
|
91
|
+
const { InlineCall } = await import('hanc-webrtc-widgets');
|
|
92
|
+
|
|
93
|
+
return createComponent({
|
|
94
|
+
tagName: 'hanc-ai-inline-call',
|
|
95
|
+
elementClass: InlineCall,
|
|
96
|
+
react: React,
|
|
97
|
+
});
|
|
98
|
+
},
|
|
99
|
+
{ ssr: false },
|
|
100
|
+
);
|
|
101
|
+
|
|
102
|
+
export const HancAiFloatingCall = dynamic(
|
|
103
|
+
async () => {
|
|
104
|
+
const { FloatingCall } = await import('hanc-webrtc-widgets');
|
|
105
|
+
|
|
106
|
+
return createComponent({
|
|
107
|
+
tagName: 'hanc-ai-floating-call',
|
|
108
|
+
elementClass: FloatingCall,
|
|
109
|
+
react: React,
|
|
110
|
+
});
|
|
111
|
+
},
|
|
112
|
+
{ ssr: false },
|
|
113
|
+
);
|
|
114
|
+
|
|
115
|
+
// An example of a component where both widgets are used
|
|
116
|
+
export default function Example() {
|
|
117
|
+
return (
|
|
118
|
+
<>
|
|
119
|
+
<HancAiInlineCall agentId="YOUR_AGENT_ID" />
|
|
120
|
+
<HancAiFloatingCall agentId="YOUR_AGENT_ID" />
|
|
121
|
+
</>
|
|
122
|
+
);
|
|
123
|
+
}
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
## Components props & styles
|
|
127
|
+
|
|
128
|
+
### `<hanc-ai-inline-call>`
|
|
129
|
+
|
|
130
|
+
**Description:**
|
|
131
|
+
An “inline” widget that you embed directly in page content (often as a hero CTA). “Bubble” hints at the round, branded graphic.
|
|
132
|
+
|
|
133
|
+
#### Available Attributes:
|
|
134
|
+
|
|
135
|
+
| Attribute | Type | Description |
|
|
136
|
+
| --------------------- | ------ | -------------------------------------------------------- |
|
|
137
|
+
| `agent-id` (required) | string | Agent ID for Twilio calls |
|
|
138
|
+
| `button-start-text` | string | Custom start button text (default: `Start Call with ai`) |
|
|
139
|
+
|
|
140
|
+
#### Available CSS Parts for Styling:
|
|
141
|
+
|
|
142
|
+
| Part Name | Description |
|
|
143
|
+
| ----------------- | --------------------------------- |
|
|
144
|
+
| `wrapper` | Outer wrapper container |
|
|
145
|
+
| `filter-light` | Light background filter |
|
|
146
|
+
| `filter-gradient` | Gradient overlay |
|
|
147
|
+
| `filter-overlay` | Active call overlay (state-based) |
|
|
148
|
+
| `video` | The avatar video element |
|
|
149
|
+
| `content-wrapper` | Button and content wrapper |
|
|
150
|
+
| `button` | The main call button |
|
|
151
|
+
| `icon-button` | The call icon inside the button |
|
|
152
|
+
| `call-off-icon` | The "end call" icon |
|
|
153
|
+
| `button-text` | Text inside the button |
|
|
154
|
+
|
|
155
|
+
#### Example:
|
|
156
|
+
|
|
157
|
+
```html
|
|
158
|
+
<hanc-ai-inline-call
|
|
159
|
+
agent-id="67c34fa38ef2105d28bb287c"
|
|
160
|
+
button-start-text="Call Agent"
|
|
161
|
+
></hanc-ai-inline-call>
|
|
162
|
+
|
|
163
|
+
<style>
|
|
164
|
+
hanc-ai-inline-call::part(button) {
|
|
165
|
+
/* your styles here */
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
hanc-ai-inline-call::part(button-text) {
|
|
169
|
+
/* your styles here */
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
hanc-ai-inline-call::part(filter-overlay)[data-calling='true'] {
|
|
173
|
+
/* your styles here */
|
|
174
|
+
}
|
|
175
|
+
</style>
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
---
|
|
179
|
+
|
|
180
|
+
### `<hanc-ai-floating-call>`
|
|
181
|
+
|
|
182
|
+
**Description:**
|
|
183
|
+
A persistent, docked widget that floats in the corner and launches the same voice-call flow from anywhere on the page.
|
|
184
|
+
|
|
185
|
+
#### Available Attributes:
|
|
186
|
+
|
|
187
|
+
| Attribute | Type | Description |
|
|
188
|
+
| --------------------- | ------ | ------------------------------------------------- |
|
|
189
|
+
| `agent-id` (required) | string | Agent ID for Twilio calls |
|
|
190
|
+
| `label-text` | string | Label above the button (default: `Need a help?`) |
|
|
191
|
+
| `button-start-text` | string | Start button text (default: `Start Call with ai`) |
|
|
192
|
+
| `button-end-text` | string | End button text (default: `End call`) |
|
|
193
|
+
|
|
194
|
+
#### Available CSS Parts for Styling:
|
|
195
|
+
|
|
196
|
+
| Part Name | Description |
|
|
197
|
+
| ----------------- | --------------------------------- |
|
|
198
|
+
| `root` | Outer container |
|
|
199
|
+
| `avatar-wrapper` | Wrapper for avatar/video |
|
|
200
|
+
| `filter-light` | Light background filter |
|
|
201
|
+
| `filter-gradient` | Gradient overlay |
|
|
202
|
+
| `filter-overlay` | Active call overlay (state-based) |
|
|
203
|
+
| `avatar-video` | The avatar video element |
|
|
204
|
+
| `content` | Container for label and button |
|
|
205
|
+
| `title` | The label/title text |
|
|
206
|
+
| `button` | The main call button |
|
|
207
|
+
| `icon-button` | The call icon inside the button |
|
|
208
|
+
| `button-text` | Text inside the button |
|
|
209
|
+
|
|
210
|
+
#### Example:
|
|
211
|
+
|
|
212
|
+
```html
|
|
213
|
+
<hanc-ai-floating-call
|
|
214
|
+
agent-id="67c34fa38ef2105d28bb287c"
|
|
215
|
+
label-text="Need Assistance?"
|
|
216
|
+
button-start-text="Start Call"
|
|
217
|
+
button-end-text="End Call"
|
|
218
|
+
></hanc-ai-floating-call>
|
|
219
|
+
|
|
220
|
+
<style>
|
|
221
|
+
hanc-ai-floating-call::part(root) {
|
|
222
|
+
/* your styles here */
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
hanc-ai-floating-call::part(title) {
|
|
226
|
+
/* your styles here */
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
hanc-ai-floating-call::part(button) {
|
|
230
|
+
/* your styles here */
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
hanc-ai-floating-call::part(filter-overlay)[data-calling='true'] {
|
|
234
|
+
/* your styles here */
|
|
235
|
+
}
|
|
236
|
+
</style>
|
|
237
|
+
```
|