Support Chat Widget

Basic Usage

import { SupportChatWidget } from '@/components/SupportChatWidget';

function App() {
  return (
    <div>
      <YourAppContent />
      
      {/* Add the widget - it floats in the corner */}
      <SupportChatWidget />
    </div>
  );
}

Connecting to Your Backend

Replace the simulated API call with your actual ticket submission endpoint:

const submitTicket = async () => {
  const ticket: TicketData = {
    name,
    email,
    category,
    priority,
    subject,
    description,
    screenshot,
    context,
    messages,
  };

  // Replace with your API endpoint
  const response = await fetch('/api/support/tickets', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(ticket),
  });

  const { ticketId } = await response.json();
  setTicketId(ticketId);
  setView('submitted');
};

Adding Real Screenshot Capture

Install html2canvas for actual screenshot capture:

npm install html2canvas

import html2canvas from 'html2canvas';

const captureScreenshot = async () => {
  setIsCapturing(true);
  try {
    // Hide the widget temporarily
    const widget = document.querySelector('[data-support-widget]');
    if (widget) widget.style.display = 'none';

    const canvas = await html2canvas(document.body, {
      useCORS: true,
      allowTaint: true,
      scale: 0.5, // Reduce size
    });

    const dataUrl = canvas.toDataURL('image/png');
    setScreenshot(dataUrl);

    // Show widget again
    if (widget) widget.style.display = '';
  } catch (error) {
    console.error('Screenshot failed:', error);
  } finally {
    setIsCapturing(false);
  }
};

Pre-filling User Information

If you have user authentication, pre-fill the form:

interface SupportChatWidgetProps {
  user?: {
    name: string;
    email: string;
  };
}

export function SupportChatWidget({ user }: SupportChatWidgetProps) {
  const [name, setName] = useState(user?.name || '');
  const [email, setEmail] = useState(user?.email || '');
  // ...
}