Skip to content

Commit 0d223dc

Browse files
ramsribramsrib
committed
updated readme
1 parent e031a02 commit 0d223dc

File tree

1 file changed

+101
-46
lines changed

1 file changed

+101
-46
lines changed

‎README.md

Lines changed: 101 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -23,57 +23,22 @@ npm install @vapi-ai/client-sdk-react
2323

2424
## Quick Start
2525

26-
### As a React Component
27-
28-
```tsx
29-
import { VapiWidget } from 'vapi-client-widget-web';
30-
31-
function App() {
32-
return (
33-
<VapiWidget
34-
publicKey="your-vapi-public-key"
35-
vapiConfig="your-assistant-id"
36-
mode="hybrid"
37-
position="bottom-right"
38-
theme="light"
39-
accentColor="#3B82F6"
40-
/>
41-
);
42-
}
43-
```
44-
45-
### As an Embedded Widget
26+
The simplest way to add the widget to your website:
4627

4728
```html
4829
<!DOCTYPE html>
4930
<html>
5031
<head>
51-
<script src="https://unpkg.com/@vapi-ai/client-sdk-react/dist/widget.umd.js"></script>
32+
<script src="https://unpkg.com/@vapi-ai/client-sdk-react/dist/embed/widget.umd.js"></script>
5233
</head>
5334
<body>
54-
<!-- Option 1: Using data attributes -->
55-
<div
56-
data-client-widget="VapiWidget"
57-
data-public-key="your-vapi-public-key"
58-
data-assistant-id="your-assistant-id"
59-
data-mode="hybrid"
60-
data-theme="dark"
61-
></div>
62-
63-
<!-- Option 2: Programmatic creation -->
64-
<div id="vapi-widget"></div>
65-
<script>
66-
new WidgetLoader({
67-
container: '#vapi-widget',
68-
component: 'VapiWidget',
69-
props: {
70-
publicKey: 'your-vapi-public-key',
71-
vapiConfig: 'your-assistant-id',
72-
mode: 'chat',
73-
theme: 'light',
74-
},
75-
});
76-
</script>
35+
<vapi-widget
36+
public-key="your-vapi-public-key"
37+
assistant-id="your-assistant-id"
38+
mode="chat"
39+
theme="light"
40+
size="full"
41+
></vapi-widget>
7742
</body>
7843
</html>
7944
```
@@ -94,7 +59,7 @@ function App() {
9459
| `mode` | `'voice' \| 'chat' \| 'hybrid'` | `'voice'` | Widget interaction mode |
9560
| `theme` | `'light' \| 'dark'` | `'light'` | Color theme |
9661
| `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Screen position |
97-
| `size` | `'tiny' \| 'compact' \| 'full'` | `'compact'` | Widget size |
62+
| `size` | `'tiny' \| 'compact' \| 'full'` | `'full'` | Widget size |
9863
| `radius` | `'none' \| 'small' \| 'medium' \| 'large'` | `'medium'` | Border radius |
9964
| `apiUrl` | `string` | - | Custom API endpoint for chat mode |
10065
| `baseColor` | `string` | - | Main background color |
@@ -122,6 +87,96 @@ function App() {
12287
| `onMessage` | `(message: any) => void` | Triggered for all messages |
12388
| `onError` | `(error: Error) => void` | Triggered on errors |
12489

90+
## React Component Usage
91+
92+
If you're using React, you can import and use the widget as a component:
93+
94+
```tsx
95+
import { VapiWidget } from '@vapi-ai/client-sdk-react';
96+
97+
function App() {
98+
return (
99+
<VapiWidget
100+
publicKey="your-vapi-public-key"
101+
vapiConfig="your-assistant-id"
102+
mode="hybrid"
103+
position="bottom-right"
104+
theme="light"
105+
accentColor="#3B82F6"
106+
/>
107+
);
108+
}
109+
```
110+
111+
## Embedding Methods
112+
113+
### 1. Data Attributes
114+
115+
The simplest way to embed the widget using HTML data attributes:
116+
117+
```html
118+
<div
119+
data-client-widget="VapiWidget"
120+
data-public-key="pk_123"
121+
data-assistant-id="asst_456"
122+
data-mode="voice"
123+
data-theme="dark"
124+
data-size="compact"
125+
></div>
126+
```
127+
128+
### 2. JSON Props
129+
130+
Pass complex configuration using JSON in the `data-props` attribute:
131+
132+
```html
133+
<div
134+
data-client-widget="VapiWidget"
135+
data-props='{
136+
"publicKey": "pk_123",
137+
"assistantId": "asst_456",
138+
"mode": "hybrid",
139+
"theme": "light",
140+
"accentColor": "#3B82F6",
141+
"requireConsent": true
142+
}'
143+
></div>
144+
```
145+
146+
### 3. Custom Element
147+
148+
Use the widget as a custom HTML element with kebab-case attributes:
149+
150+
```html
151+
<vapi-widget
152+
public-key="pk_123"
153+
assistant-id="asst_456"
154+
mode="chat"
155+
theme="dark"
156+
accent-color="#8B5CF6"
157+
require-consent="true"
158+
></vapi-widget>
159+
```
160+
161+
### 4. Programmatic
162+
163+
Create widgets dynamically with JavaScript:
164+
165+
```html
166+
<div id="my-widget"></div>
167+
<script>
168+
new WidgetLoader({
169+
container: '#my-widget',
170+
component: 'VapiWidget',
171+
props: {
172+
publicKey: 'pk_123',
173+
vapiConfig: 'asst_456',
174+
mode: 'hybrid',
175+
},
176+
});
177+
</script>
178+
```
179+
125180
## Usage Examples
126181

127182
### Voice-Only Mode
@@ -217,7 +272,7 @@ Visit <http://localhost:5173> to see the example app.
217272
## Project Structure
218273

219274
```
220-
vapi-client-widget-web/
275+
@vapi-ai/client-sdk-react/
221276
├── src/
222277
│ ├── components/ # React components
223278
│ │ ├── VapiWidget.tsx # Main widget component

0 commit comments

Comments
 (0)