Add cta-title/subtitle to vapi custom widget

Author: ramsrib

example/src/App.tsx

@@ -29,6 +29,8 @@ function App() {
     size: 'full',
     position: 'bottom-right',
     title: 'TALK WITH AI',
+    ctaTitle: 'Chat with Support',
+    ctaSubtitle: 'We\'re here to help',
     startButtonText: 'Start',
     endButtonText: 'End Call',
     consentRequired: true,
@@ -72,6 +74,8 @@ function App() {
       `size="${config.size}"`,
       `position="${config.position}"`,
       `title="${config.title}"`,
+      config.ctaTitle ? `cta-title="${config.ctaTitle}"` : null,
+      config.ctaSubtitle ? `cta-subtitle="${config.ctaSubtitle}"` : null,
       `start-button-text="${config.startButtonText}"`,
       config.endButtonText ? `end-button-text="${config.endButtonText}"` : null,
       `consent-required="${config.consentRequired}"`,
@@ -196,6 +200,8 @@ function App() {
             consentStorageKey={config.consentStorageKey}
             voiceShowTranscript={config.voiceShowTranscript}
             chatFirstMessage={config.chatFirstMessage}
+            ctaTitle={config.ctaTitle}
+            ctaSubtitle={config.ctaSubtitle}
             onVoiceStart={() => console.log('Call started')}
             onVoiceEnd={() => console.log('Call ended')}
             onMessage={(message) => console.log('Message:', message)}

example/src/components/WidgetPreview.tsx

@@ -76,6 +76,8 @@ const WidgetPreview: React.FC<WidgetPreviewProps> = ({ config }) => {
                   radius={config.radius}
                   size={config.size}
                   title={config.title}
+                  ctaTitle={config.ctaTitle}
+                  ctaSubtitle={config.ctaSubtitle}
                   startButtonText={config.startButtonText}
                   endButtonText={config.endButtonText}
                   consentRequired={config.consentRequired}

example/src/components/builder/TextLabelsSection.tsx

@@ -43,6 +43,46 @@ const TextLabelsSection: React.FC<TextLabelsSectionProps> = ({
         />
       </div>
 
+      <div>
+        <label className="block text-sm font-medium mb-2 text-gray-700">
+          CTA Title (Optional)
+          <svg
+            className="w-3 h-3 inline ml-1 text-gray-400"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
+          </svg>
+        </label>
+        <input
+          type="text"
+          className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+          value={config.ctaTitle || ''}
+          onChange={(e) => updateConfig('ctaTitle', e.target.value)}
+          placeholder="Defaults to Main Label"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium mb-2 text-gray-700">
+          CTA Subtitle (Optional)
+          <svg
+            className="w-3 h-3 inline ml-1 text-gray-400"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
+          </svg>
+        </label>
+        <input
+          type="text"
+          className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+          value={config.ctaSubtitle || ''}
+          onChange={(e) => updateConfig('ctaSubtitle', e.target.value)}
+          placeholder="Add a subtitle to the floating button"
+        />
+      </div>
+
       <div>
         <label className="block text-sm font-medium mb-2 text-gray-700">
           Start Button Text

example/src/types/index.ts

@@ -14,6 +14,8 @@ export interface WidgetConfig {
     | 'top-left'
     | 'bottom-center';
   title: string;
+  ctaTitle?: string;
+  ctaSubtitle?: string;
   startButtonText: string;
   endButtonText: string;
   consentRequired: boolean;

src/widget/index.ts

@@ -130,40 +130,80 @@ function initializeWidgets() {
     const htmlElement = element as HTMLElement;
     const props: any = {};
 
+    // Note: Event handlers (onVoiceStart, onVoiceEnd, onMessage, onError) and their deprecated versions
+    // cannot be passed via HTML attributes. They must be set programmatically or via React props.
     const attributeMap: Record<string, string> = {
+      // Mode & Theme
       mode: 'mode',
       theme: 'theme',
-      radius: 'radius',
-      size: 'size',
+
+      // Layout & Position
       position: 'position',
-      title: 'title',
+      size: 'size',
+      'border-radius': 'borderRadius',
+      radius: 'radius', // deprecated alias
+
+      // Colors
       'base-bg-color': 'baseBgColor',
       'accent-color': 'accentColor',
       'cta-button-color': 'ctaButtonColor',
       'cta-button-text-color': 'ctaButtonTextColor',
+
+      // Text & Labels
+      title: 'title',
+      'cta-title': 'ctaTitle',
+      'cta-subtitle': 'ctaSubtitle',
       'start-button-text': 'startButtonText',
       'end-button-text': 'endButtonText',
+
+      // Empty State Messages
       'voice-empty-message': 'voiceEmptyMessage',
       'voice-active-empty-message': 'voiceActiveEmptyMessage',
       'chat-empty-message': 'chatEmptyMessage',
       'hybrid-empty-message': 'hybridEmptyMessage',
+
+      // Chat Configuration
       'chat-first-message': 'chatFirstMessage',
       'chat-placeholder': 'chatPlaceholder',
+
+      // Voice Configuration
       'voice-show-transcript': 'voiceShowTranscript',
+
+      // Consent Configuration
       'consent-required': 'consentRequired',
       'consent-title': 'consentTitle',
       'consent-content': 'consentContent',
       'consent-storage-key': 'consentStorageKey',
+
+      // API Configuration
+      'api-url': 'apiUrl',
+
       // Vapi Configuration
       'public-key': 'publicKey',
       'assistant-id': 'assistantId',
       'assistant-overrides': 'assistantOverrides',
       assistant: 'assistant',
+
+      // Deprecated properties
+      'base-color': 'baseColor',
+      'button-base-color': 'buttonBaseColor',
+      'button-accent-color': 'buttonAccentColor',
+      'main-label': 'mainLabel',
+      'empty-voice-message': 'emptyVoiceMessage',
+      'empty-voice-active-message': 'emptyVoiceActiveMessage',
+      'empty-chat-message': 'emptyChatMessage',
+      'empty-hybrid-message': 'emptyHybridMessage',
+      'first-chat-message': 'firstChatMessage',
+      'show-transcript': 'showTranscript',
+      'require-consent': 'requireConsent',
+      'terms-content': 'termsContent',
+      'local-storage-key': 'localStorageKey',
     };
 
     Object.entries(attributeMap).forEach(([htmlAttr, propName]) => {
       const value = htmlElement.getAttribute(htmlAttr);
       if (value !== null) {
+        // Special handling for JSON attributes
         if (propName === 'assistantOverrides' || propName === 'assistant') {
           try {
             props[propName] = JSON.parse(value);

test-widget-embed.html

@@ -44,7 +44,8 @@ <h1>VapiWidget Embed Test</h1>
       size="full"
       position="bottom-left"
       title="Vapi AI"
-      cta-title="Talk with AI"
+      cta-title="CTA Title"
+      cta-subtitle="CTA Subtitle"
       start-button-text="Call"
       end-button-text="Hang Up"
       consent-required="true"