diff --git a/ui/public/embed/dograh-widget.js b/ui/public/embed/dograh-widget.js index 18f2545..647a4be 100644 --- a/ui/public/embed/dograh-widget.js +++ b/ui/public/embed/dograh-widget.js @@ -113,6 +113,9 @@ embedMode: configData.settings?.embedMode || 'floating', containerId: configData.settings?.containerId || 'dograh-inline-container', position: configData.position || DEFAULT_CONFIG.position, + buttonColor: configData.settings?.buttonColor || '#10b981', + buttonText: configData.settings?.buttonText || 'Start Call', + callToActionText: configData.settings?.callToActionText || 'Click to start voice conversation', autoStart: configData.auto_start || false }; } catch (error) { @@ -268,10 +271,11 @@ container.className = `dograh-widget-container ${state.config.position}`; container.id = 'dograh-widget'; - // Create button (green to start, red to end) + // Create button (configured color to start, red to end) const button = document.createElement('button'); button.className = 'dograh-widget-button dograh-widget-button-idle'; button.id = 'dograh-widget-button'; + button.style.backgroundColor = state.config.buttonColor; button.innerHTML = ` @@ -318,6 +322,9 @@ // Add current status class button.classList.add(`dograh-widget-button-${status}`); + // Apply configured color only for idle state, let CSS handle other states + button.style.backgroundColor = status === 'idle' ? state.config.buttonColor : ''; + // Update title attribute for tooltip const titles = { idle: 'Start Call', @@ -474,7 +481,7 @@ }[status]; const displaySubtext = subtext || { - idle: 'Click to start voice conversation', + idle: state.config.callToActionText, connecting: 'Please wait while we establish connection', connected: 'You can speak now', failed: 'Please check your microphone and try again' @@ -483,10 +490,10 @@ // Simple button design: green to start, red to end let buttonHTML = ''; if (status === 'idle' || status === 'failed') { - // Green button to start + // Button to start with configured color buttonHTML = ` -
- {embedMode === "floating" ? ( + {/* Shared: Button Color */} +
+ +
+ setButtonColor(e.target.value)} + className="w-14 h-10 cursor-pointer" + /> + setButtonColor(e.target.value)} + placeholder="#10b981" + className="flex-1" + /> +
+
+ + {/* Floating mode: Position */} + {embedMode === "floating" && ( +
+ + +
+ )} + + {/* Inline mode: Button Text, CTA Text */} + {embedMode === "inline" && ( <>
- - + + setButtonText(e.target.value)} + placeholder="Start Call" + />
-
- -
- setButtonColor(e.target.value)} - className="w-14 h-10 cursor-pointer" - /> - setButtonColor(e.target.value)} - placeholder="#3B82F6" - className="flex-1" - /> -
+ + setCallToActionText(e.target.value)} + placeholder="Click to start voice conversation" + />
- -
- - setButtonText(e.target.value)} - placeholder="Start Voice Call" - /> -
- ) : ( - <> -
-
-

Integration Instructions

-
    -
  • • Add a div with id="dograh-inline-container" where you want the widget
    • -
  • • The widget will render inside this container
    • -
  • • You have full control over the container's styling
    • -
  • • Call window.DograhWidget.start() to begin the call
    • -
  • • Call window.DograhWidget.end() to end the call
    • -
-
+ )} -
-

Example React Component

- 
-                                                        {`export function DograhAgent() {
+                                    {/* Preview */}
+                                    {embedMode === "floating" ? (
+                                        

+                                            

+                                                
+                                                    
+                                                
+                                            

+                                        

+                                    ) : (
+                                        

+                                            

+                                                
+                                                    
+                                                
+                                                
Ready to Connect

+                                                
{callToActionText}

+                                                
+                                            

+                                        

+                                    )}
+
+                                    {/* Inline mode: Integration Instructions */}
+                                    {embedMode === "inline" && (
+                                        

+                                            

+                                                
Integration Instructions

+                                                
    
+                                                    
  • • Add a div with id="dograh-inline-container" where you want the widget
    • 
+                                                    
  • • The widget will render inside this container
    • 
+                                                    
  • • You have full control over the container's styling
    • 
+                                                    
  • • Call window.DograhWidget.start() to begin the call
    • 
+                                                    
  • • Call window.DograhWidget.end() to end the call
    • 
+                                                

+                                            

+
+                                            

+                                                
Example React Component

+                                                
+                                                    {`export function DograhAgent() {
   const [isCallActive, setIsCallActive] = useState(false);
 
   useEffect(() => {
@@ -397,34 +455,8 @@ export function EmbedDialog({
     

   );
 }`}
-
-
+
- - )} - - {/* Preview for floating mode only */} - {embedMode === "floating" && ( -
-
)}