Skip to content

Commit 315c0e4

Browse files
ramsribramsrib
committed
Refactored the property names with backward compatibility
1 parent 8b29820 commit 315c0e4

19 files changed

+512
-261
lines changed

‎README.md‎

Lines changed: 84 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ A modern React component library with embeddable voice and chat widgets built wi
1010
- 💬 **Chat Interface**: Text-based conversations with markdown support
1111
- 🔀 **Hybrid Mode**: Seamlessly switch between voice and chat
1212
- 🎨 **Highly Customizable**: Themes, colors, sizes, and positions
13-
- 📱 **Responsive Design**: Works on desktop and mobile devices
1413
- 🔒 **Consent Management**: Built-in consent form for compliance
1514
- ⚡ **Easy Integration**: Use as React component or embed in any HTML page
1615
- 📘 **TypeScript**: Full type safety and IntelliSense support
@@ -40,6 +39,13 @@ The simplest way to add the widget to your website:
4039
mode="chat"
4140
theme="light"
4241
size="full"
42+
color-accent="#3B82F6"
43+
cta-button-color="#1F2937"
44+
cta-button-text-color="#FFFFFF"
45+
title="AI Assistant"
46+
cta-title="Chat with us"
47+
cta-subtitle="24/7 Support"
48+
chat-placeholder="How can I help you today?"
4349
></vapi-widget>
4450
</body>
4551
</html>
@@ -65,39 +71,49 @@ The simplest way to add the widget to your website:
6571
6672
### Optional Props
6773

68-
| Prop | Type | Default | Description |
69-
| ------------------------- | -------------------------------------------------------------- | ----------------------- | ---------------------------------- |
70-
| `mode` | `'voice' \| 'chat' \| 'hybrid'` | `'chat'` | Widget interaction mode |
71-
| `theme` | `'light' \| 'dark'` | `'light'` | Color theme |
72-
| `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Screen position |
73-
| `size` | `'tiny' \| 'compact' \| 'full'` | `'full'` | Widget size |
74-
| `radius` | `'none' \| 'small' \| 'medium' \| 'large'` | `'medium'` | Border radius |
75-
| `apiUrl` | `string` | - | Custom API endpoint for chat mode |
76-
| `baseColor` | `string` | - | Main background color |
77-
| `accentColor` | `string` | `'#14B8A6'` | Primary accent color |
78-
| `buttonBaseColor` | `string` | `'#000000'` | Floating button background |
79-
| `buttonAccentColor` | `string` | `'#FFFFFF'` | Floating button text/icon color |
80-
| `mainLabel` | `string` | `'Talk with AI'` | Widget header text |
81-
| `startButtonText` | `string` | `'Start'` | Voice call start button text |
82-
| `endButtonText` | `string` | `'End Call'` | Voice call end button text |
83-
| `emptyVoiceMessage` | `string` | - | Message when voice mode is empty |
84-
| `emptyVoiceActiveMessage` | `string` | - | Message during active voice call |
85-
| `emptyChatMessage` | `string` | - | Message when chat is empty |
86-
| `emptyHybridMessage` | `string` | - | Message for hybrid mode |
87-
| `firstChatMessage` | `string` | - | Initial assistant message in chat |
88-
| `requireConsent` | `boolean` | `false` | Show consent form before first use |
89-
| `termsContent` | `string` | _(default message)_ | Terms & conditions text |
90-
| `localStorageKey` | `string` | `"vapi_widget_consent"` | Key for storing consent |
91-
| `showTranscript` | `boolean` | `false` | Show/hide voice transcript |
74+
| Prop | Type | Default | Description |
75+
| ------------------------- | --------------------------------------------------------------------------------- | ------------------------ | ---------------------------------- |
76+
| `mode` | `'voice' \| 'chat' \| 'hybrid'` | `'chat'` | Widget interaction mode |
77+
| `theme` | `'light' \| 'dark'` | `'light'` | Color theme |
78+
| `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' \| 'bottom-center'` | `'bottom-right'` | Screen position |
79+
| `size` | `'tiny' \| 'compact' \| 'full'` | `'full'` | Widget size |
80+
| `borderRadius` | `'none' \| 'small' \| 'medium' \| 'large'` | `'medium'` | Corner radius style |
81+
| `apiUrl` | `string` | - | Custom API endpoint for chat mode |
82+
| **Colors** | | | |
83+
| `baseBgColor` | `string` | - | Main background color |
84+
| `accentColor` | `string` | `'#14B8A6'` | Primary accent color |
85+
| `ctaButtonColor` | `string` | `'#000000'` | CTA button background color |
86+
| `ctaButtonTextColor` | `string` | `'#FFFFFF'` | CTA button text/icon color |
87+
| **Text Labels** | | | |
88+
| `title` | `string` | `'Talk with AI'` | Main widget title |
89+
| `startButtonText` | `string` | `'Start'` | Voice call start button text |
90+
| `endButtonText` | `string` | `'End Call'` | Voice call end button text |
91+
| `ctaTitle` | `string` | _(uses title)_ | Floating button main text |
92+
| `ctaSubtitle` | `string` | - | Floating button subtitle text |
93+
| **Empty States** | | | |
94+
| `voiceEmptyMessage` | `string` | - | Message when voice mode is empty |
95+
| `voiceActiveEmptyMessage` | `string` | - | Message during active voice call |
96+
| `chatEmptyMessage` | `string` | - | Message when chat is empty |
97+
| `hybridEmptyMessage` | `string` | - | Message for hybrid mode |
98+
| **Chat Configuration** | | | |
99+
| `chatFirstMessage` | `string` | - | Initial assistant message in chat |
100+
| `chatPlaceholder` | `string` | `'Type your message...'` | Chat input placeholder text |
101+
| **Voice Configuration** | | | |
102+
| `voiceShowTranscript` | `boolean` | `false` | Show/hide voice transcript |
103+
| **Consent Configuration** | | | |
104+
| `consentRequired` | `boolean` | `false` | Show consent form before first use |
105+
| `consentTitle` | `string` | `"Terms and conditions"` | Consent form title |
106+
| `consentContent` | `string` | _(default message)_ | Terms & conditions content |
107+
| `consentStorageKey` | `string` | `"vapi_widget_consent"` | Key for storing consent |
92108

93109
### Event Callbacks
94110

95-
| Prop | Type | Description |
96-
| ------------- | ------------------------ | -------------------------------- |
97-
| `onCallStart` | `() => void` | Triggered when voice call starts |
98-
| `onCallEnd` | `() => void` | Triggered when voice call ends |
99-
| `onMessage` | `(message: any) => void` | Triggered for all messages |
100-
| `onError` | `(error: Error) => void` | Triggered on errors |
111+
| Prop | Type | Description |
112+
| -------------- | ------------------------ | -------------------------------- |
113+
| `onVoiceStart` | `() => void` | Triggered when voice call starts |
114+
| `onVoiceEnd` | `() => void` | Triggered when voice call ends |
115+
| `onMessage` | `(message: any) => void` | Triggered for all messages |
116+
| `onError` | `(error: Error) => void` | Triggered on errors |
101117

102118
## React Component Usage
103119

@@ -115,6 +131,9 @@ function App() {
115131
position="bottom-right"
116132
theme="light"
117133
accentColor="#3B82F6"
134+
title="AI Assistant"
135+
chatPlaceholder="Ask me anything..."
136+
voiceShowTranscript={true}
118137
/>
119138
);
120139
}
@@ -133,8 +152,9 @@ Use the widget as a custom HTML element with kebab-case attributes - the cleanes
133152
mode="chat"
134153
theme="dark"
135154
accent-color="#8B5CF6"
136-
require-consent="true"
137-
first-chat-message="Welcome! How can I assist you?"
155+
consent-required="true"
156+
chat-first-message="Welcome! How can I assist you?"
157+
chat-placeholder="Type your question here..."
138158
></vapi-widget>
139159
```
140160

@@ -163,7 +183,9 @@ Use this approach if your environment doesn't support custom elements or for bet
163183
assistantId="asst_456"
164184
mode="voice"
165185
size="tiny"
166-
showTranscript={false}
186+
voiceShowTranscript={false}
187+
startButtonText="Call"
188+
endButtonText="Hang Up"
167189
/>
168190
```
169191

@@ -176,7 +198,8 @@ Use this approach if your environment doesn't support custom elements or for bet
176198
mode="chat"
177199
theme="dark"
178200
accentColor="#8B5CF6"
179-
firstChatMessage="Hello! How can I help you today?"
201+
chatFirstMessage="Hello! How can I help you today?"
202+
chatPlaceholder="Type your message here..."
180203
/>
181204
```
182205

@@ -190,8 +213,11 @@ Use this approach if your environment doesn't support custom elements or for bet
190213
variableValues: { name: 'John' },
191214
}}
192215
mode="hybrid"
193-
requireConsent={true}
194-
termsContent="By using this service, you agree to our terms..."
216+
consentRequired={true}
217+
consentTitle="Privacy Agreement"
218+
consentContent="By using this service, you agree to our terms..."
219+
title="Support Assistant"
220+
hybridEmptyMessage="Start a conversation with voice or text"
195221
onMessage={(msg) => console.log('Message:', msg)}
196222
/>
197223
```
@@ -223,11 +249,28 @@ Use this approach if your environment doesn't support custom elements or for bet
223249
<VapiWidget
224250
publicKey="pk_123"
225251
assistantId="asst_456"
226-
baseColor="#1a1a1a"
252+
baseBgColor="#1a1a1a"
227253
accentColor="#ff6b6b"
228-
buttonBaseColor="#2a2a2a"
229-
buttonAccentColor="#ffffff"
230-
radius="large"
254+
ctaButtonColor="#2a2a2a"
255+
ctaButtonTextColor="#ffffff"
256+
borderRadius="large"
257+
size="full"
258+
title="Premium Support"
259+
/>
260+
```
261+
262+
### Floating Button with Custom CTA
263+
264+
```tsx
265+
<VapiWidget
266+
publicKey="pk_123"
267+
assistantId="asst_456"
268+
mode="hybrid"
269+
position="bottom-center"
270+
title="Customer Support Portal"
271+
ctaTitle="Need Help?"
272+
ctaSubtitle="Chat with our AI assistant"
273+
accentColor="#10b981"
231274
size="full"
232275
/>
233276
```

‎example/src/App.tsx‎

Lines changed: 35 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -21,22 +21,23 @@ function App() {
2121
mode: 'chat',
2222
theme: 'light',
2323
// Default colors matching VapiWidget defaults
24-
baseColor: '#ffffff', // Light mode default (automatically switches to #000000 in dark mode)
24+
baseBgColor: '#ffffff', // Light mode default (automatically switches to #000000 in dark mode)
2525
accentColor: '#14B8A6', // Default teal accent
26-
buttonBaseColor: '#000000', // Default black for buttons
27-
buttonAccentColor: '#ffffff', // Default white for button text
26+
ctaButtonColor: '#000000', // Default black for buttons
27+
ctaButtonTextColor: '#ffffff', // Default white for button text
2828
radius: 'large',
2929
size: 'full',
3030
position: 'bottom-right',
31-
mainLabel: 'TALK WITH AI',
31+
title: 'TALK WITH AI',
3232
startButtonText: 'Start',
3333
endButtonText: 'End Call',
34-
requireConsent: true,
35-
termsContent:
34+
consentRequired: true,
35+
consentTitle: 'Terms and conditions',
36+
consentContent:
3637
'By clicking "Agree," and each time I interact with this AI agent, I consent to the recording, storage, and sharing of my communications with third-party service providers, and as otherwise described in our Terms of Service.',
37-
localStorageKey: 'vapi_widget_consent',
38-
showTranscript: false,
39-
firstChatMessage: 'Hey, How can I help you today?',
38+
consentStorageKey: 'vapi_widget_consent',
39+
voiceShowTranscript: false,
40+
chatFirstMessage: 'Hey, How can I help you today?',
4041
// Vapi Configuration
4142
publicKey: import.meta.env.VITE_VAPI_API_KEY || 'your-vapi-public-key',
4243
assistantId: import.meta.env.VITE_VAPI_ASSISTANT_ID || 'demo-assistant-id',
@@ -63,21 +64,23 @@ function App() {
6364
const attributes = [
6465
`mode="${config.mode}"`,
6566
`theme="${config.theme}"`,
66-
`base-color="${config.baseColor}"`,
67+
`base-bg-color="${config.baseBgColor}"`,
6768
`accent-color="${config.accentColor}"`,
68-
`button-base-color="${config.buttonBaseColor}"`,
69-
`button-accent-color="${config.buttonAccentColor}"`,
69+
`cta-button-color="${config.ctaButtonColor}"`,
70+
`cta-button-text-color="${config.ctaButtonTextColor}"`,
7071
`radius="${config.radius}"`,
7172
`size="${config.size}"`,
7273
`position="${config.position}"`,
73-
`main-label="${config.mainLabel}"`,
74+
`title="${config.title}"`,
7475
`start-button-text="${config.startButtonText}"`,
7576
config.endButtonText ? `end-button-text="${config.endButtonText}"` : null,
76-
`require-consent="${config.requireConsent}"`,
77-
`local-storage-key="${config.localStorageKey}"`,
78-
`show-transcript="${config.showTranscript}"`,
79-
config.firstChatMessage
80-
? `first-chat-message="${config.firstChatMessage}"`
77+
`consent-required="${config.consentRequired}"`,
78+
config.consentTitle ? `consent-title="${config.consentTitle}"` : null,
79+
`consent-content="${config.consentContent}"`,
80+
`consent-storage-key="${config.consentStorageKey}"`,
81+
`voice-show-transcript="${config.voiceShowTranscript}"`,
82+
config.chatFirstMessage
83+
? `chat-first-message="${config.chatFirstMessage}"`
8184
: null,
8285
]
8386
.filter(Boolean)
@@ -128,10 +131,10 @@ function App() {
128131
{/* Mode Section */}
129132
<ModeSection
130133
mode={config.mode}
131-
showTranscript={config.showTranscript}
134+
showTranscript={config.voiceShowTranscript}
132135
onModeChange={(mode) => updateConfig('mode', mode)}
133136
onTranscriptToggle={(value) =>
134-
updateConfig('showTranscript', value)
137+
updateConfig('voiceShowTranscript', value)
135138
}
136139
/>
137140

@@ -178,22 +181,23 @@ function App() {
178181
position={config.position}
179182
mode={config.mode}
180183
theme={config.theme}
181-
baseColor={config.baseColor}
184+
baseBgColor={config.baseBgColor}
182185
accentColor={config.accentColor}
183-
buttonBaseColor={config.buttonBaseColor}
184-
buttonAccentColor={config.buttonAccentColor}
186+
ctaButtonColor={config.ctaButtonColor}
187+
ctaButtonTextColor={config.ctaButtonTextColor}
185188
radius={config.radius}
186189
size={config.size}
187-
mainLabel={config.mainLabel}
190+
title={config.title}
188191
startButtonText={config.startButtonText}
189192
endButtonText={config.endButtonText}
190-
requireConsent={config.requireConsent}
191-
termsContent={config.termsContent}
192-
localStorageKey={config.localStorageKey}
193-
showTranscript={config.showTranscript}
194-
firstChatMessage={config.firstChatMessage}
195-
onCallStart={() => console.log('Call started')}
196-
onCallEnd={() => console.log('Call ended')}
193+
consentRequired={config.consentRequired}
194+
consentTitle={config.consentTitle}
195+
consentContent={config.consentContent}
196+
consentStorageKey={config.consentStorageKey}
197+
voiceShowTranscript={config.voiceShowTranscript}
198+
chatFirstMessage={config.chatFirstMessage}
199+
onVoiceStart={() => console.log('Call started')}
200+
onVoiceEnd={() => console.log('Call ended')}
197201
onMessage={(message) => console.log('Message:', message)}
198202
onError={(error) => console.error('Error:', error)}
199203
/>

0 commit comments

Comments
 (0)