Voice Chat Widget

A web-embeddable voice chat widget built for DOO's Omni-Channel AI capabilities. This widget integrates the Hamsa Voice Agents SDK to send and receive voice messages in a conversational interface.

Features

• Push-to-talk button for voice input
• Voice and text conversation history
• Dark and light theme modes with automatic OS detection
• Customizable position and colors
• Easy to embed with a simple <script> tag

Installation

Option 1: Direct Script Tag

Add the following code to your HTML file:

<script>
  window.VoiceWidget = {
    config: {
      apiKey: "your-hamsa-api-key",
      theme: "auto", // "light", "dark", or "auto"
      position: "bottom-right", // "bottom-right", "bottom-left", "top-right", "top-left"
      primaryColor: "#9b87f5" // Any CSS color
    }
  };
</script>
<script src="https://cdn.example.com/voice-widget.js"></script>
<div id="voice-widget"></div>

Option 2: NPM Package

npm install voice-chat-widget

import { init as initVoiceWidget } from 'voice-chat-widget';

initVoiceWidget({
  apiKey: "your-hamsa-api-key",
  theme: "auto", 
  position: "bottom-right",
  primaryColor: "#9b87f5"
});

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | apiKey | string | (required) | Your Hamsa Voice Agents API key | | theme | 'light' | 'dark' | 'auto' | 'auto' | The theme for the widget. 'auto' uses OS preference | | position | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'bottom-right' | Position of the widget on the page | | primaryColor | string | '#9b87f5' | Primary color for the widget buttons | | selector | string | '#voice-widget' | Custom selector for the widget container |

JavaScript API

You can also initialize the widget programmatically:

VoiceWidget.init({
  apiKey: "your-hamsa-api-key",
  theme: "auto",
  position: "bottom-right",
  primaryColor: "#9b87f5",
  selector: "#my-custom-element" // Optional custom selector
});

Building for Production

To build the widget for production as a UMD/ESM library:

npm run build:lib

This will generate UMD and ESM builds in the dist folder that can be used in various environments.

Development

npm install
npm run dev

License

MIT