AI-Optimized Widget Integration

Documentation and specifications designed for AI assistants to help developers integrate VoiceCommit widgets seamlessly.

AI-Friendly

Copy-Paste Ready

Framework Agnostic

Quick Start

Get started in under 2 minutes with these copy-paste examples

Basic Integration

Simple copy-paste integration

<!-- Replace YOUR_WIDGET_ID with your actual widget ID -->
<link rel="stylesheet" href="https://app.voicecommit.com/api/widget/YOUR_WIDGET_ID/widget.css">
<script src="https://app.voicecommit.com/api/widget/YOUR_WIDGET_ID/widget.js" data-widget-id="YOUR_WIDGET_ID"></script>

React/Next.js

React component with cleanup

import { useEffect } from 'react';

export default function VoiceCommitWidget({ widgetId }) {
  useEffect(() => {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = `https://app.voicecommit.com/api/widget/${widgetId}/widget.css`;
    document.head.appendChild(link);

    const script = document.createElement('script');
    script.src = `https://app.voicecommit.com/api/widget/${widgetId}/widget.js`;
    script.setAttribute('data-widget-id', widgetId);
    document.head.appendChild(script);

    return () => {
      document.head.removeChild(link);
      document.head.removeChild(script);
    };
  }, [widgetId]);

  return null;
}