JSPM

Package Exports

openmic-voice-widget
openmic-voice-widget/widget/widget.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (openmic-voice-widget) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

A lightweight, embeddable React widget that enables voice conversations with AI bots powered by OpenMic and LiveKit.

Installation

NPM

npm install @openmic/voice-widget

CDN

<script src="https://unpkg.com/@openmic/voice-widget@latest/widget.js" async></script>
<link rel="stylesheet" href="https://unpkg.com/@openmic/voice-widget@latest/widget.css">

Quick Start

Add the widget script and styles to your HTML:

<script src="https://unpkg.com/@openmic/voice-widget@latest/widget.js" async></script>
<link rel="stylesheet" href="https://unpkg.com/@openmic/voice-widget@latest/widget.css">

Place widget elements where you want the voice call buttons to appear:

<openmic-widget 
    assistant-id="your-assistant-id"
    public-key="your-public-key">
</openmic-widget>

3. That's It!

The widget will automatically initialize when the page loads and create voice call interfaces in all elements.

Configuration

Configure the widget using HTML attributes:

<openmic-widget 
    assistant-id="your-assistant-id"
    public-key="your-public-key"
    theme="dark"
    position="top-right"
    title="Chat with AI"
    subtitle="Ask me anything!">
</openmic-widget>

Available Attributes

Attribute	Description	Default Value
`assistant-id`	OpenMic Assistant ID	`cmfnymh3a003810umpjy0c264`
`public-key`	OpenMic Public Key	`omic_9f84f9eda5156efa093ded903f18247bd9da`
`theme`	Widget theme (`light` or `dark`)	`light`
`position`	Widget position (`bottom-right`, `bottom-left`, `top-right`, `top-left`)	`bottom-right`
`title`	Widget title text	`OpenMic Voice Call`
`subtitle`	Widget subtitle text	`Start a voice conversation with our AI bot`

Examples

Basic Usage

<openmic-widget></openmic-widget>

Custom Assistant

<openmic-widget 
    assistant-id="your-assistant-id"
    public-key="your-public-key">
</openmic-widget>

Dark Theme

<openmic-widget theme="dark"></openmic-widget>

Custom Position

<openmic-widget position="top-left"></openmic-widget>

Multiple Widgets

<openmic-widget 
    assistant-id="assistant-1" 
    public-key="key-1"
    theme="light"
    position="bottom-right">
</openmic-widget>

<openmic-widget 
    assistant-id="assistant-2" 
    public-key="key-2"
    theme="dark"
    position="top-left">
</openmic-widget>

Browser Support

Chrome 60+
Firefox 55+
Safari 12+
Edge 79+

API Requirements

The widget requires:

OpenMic API access
LiveKit WebRTC support
Modern browser with microphone permissions

Development

To build the widget from source:

git clone https://github.com/your-org/client-sdk-openmic.git
cd client-sdk-openmic
npm install
npm run build:widget

License

MIT License - see LICENSE file for details.

Support

For issues and questions, please contact the OpenMic team at support@openmic.ai.

openmic-voice-widget