VoiceCommit Widget

Embeddable voice feedback widget for VoiceCommit enterprise customers.

Integration Options

Choose the integration method that works best for your setup:

Option 1: NPM Package (Recommended for developers)

Install and import the package in your JavaScript/TypeScript project:

npm install @voicecommit/widget

import VoiceCommitWidget from '@voicecommit/widget'

VoiceCommitWidget.init({
  widgetId: 'your-widget-id'
})

Benefits:

• Full TypeScript support
• Bundle optimization (tree shaking)
• Version control
• Better caching

Option 2: CDN Script (Recommended for non-developers)

Simple script tags that work on any website:

Manual initialization

<script src="https://unpkg.com/@voicecommit/widget@latest/dist/widget.js"></script>
<script>
  VoiceCommitWidget.init({
    widgetId: 'YOUR_WIDGET_ID'
  });
</script>

Auto-initialization (Recommended)

<script 
  src="https://unpkg.com/@voicecommit/widget@latest/dist/widget.js"
  data-widget-id="YOUR_WIDGET_ID">
</script>

Benefits:

• Single file import - CSS automatically injected, no separate stylesheet needed
• No build process required
• Works on any website (WordPress, Shopify, etc.)
• Global CDN for fast loading
• Version pinning available (@1.0.0 instead of @latest)

Configuration

The widget automatically fetches its configuration from the VoiceCommit API based on your widget ID. This includes:

• Position: Where the widget appears (bottom-right, bottom-left, top-right, top-left)
• Theme: Visual theme (light, dark, auto)
• Domain Restrictions: Only authorized domains can use the widget
• Rate Limiting: Per-domain submission limits
• Custom Branding: Colors and styling

Features

• Voice Recording: Uses the Web Speech API for real-time transcription
• Secure: Domain validation and rate limiting
• Responsive: Works on desktop and mobile devices
• Accessible: ARIA labels and keyboard navigation
• Lightweight: ~15KB gzipped
• Framework Agnostic: Works with any website

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 14+
• Edge 79+

Voice recording requires microphone permissions and browser support for the Web Speech API.

API

VoiceCommitWidget.init(config)

Initialize the widget with configuration.

Parameters:

• config.widgetId (required): Your unique widget ID
• config.apiUrl (optional): Custom API URL (defaults to production)

VoiceCommitWidget.destroy(containerId?)

Remove the widget from the page.

Parameters:

• containerId (optional): Specific widget container to remove. If not provided, removes all widgets.

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Run tests
npm test

License

MIT License - see LICENSE for details.