React

// src/components/OnsraChat.tsx
import { useEffect } from 'react';

interface OnsraChatProps {
  widgetId: string;
  visitor?: {
    name?: string;
    email?: string;
    userId?: string;
  };
}

export function OnsraChat({ widgetId, visitor }: OnsraChatProps) {
  useEffect(() => {
    // Settings'i ayarla
    (window as any).OnsraSettings = {
      widgetId,
      ...(visitor && { visitor }),
    };

    // Script'i yükle
    const script = document.createElement('script');
    script.src = 'https://widget.onsrachat.com/loader.js';
    script.async = true;
    document.body.appendChild(script);

    return () => {
      // Temizlik
      document.body.removeChild(script);
      (window as any).OnsraChat?.destroy?.();
    };
  }, [widgetId]);

  return null;
}

// App.tsx
import { OnsraChat } from './components/OnsraChat';
import { useAuth } from './hooks/useAuth';

export default function App() {
  const { user } = useAuth();

  return (
    <>
      {/* Uygulamanızın geri kalanı */}

      <OnsraChat
        widgetId="YOUR_WIDGET_ID"
        visitor={user ? {
          name: user.name,
          email: user.email,
          userId: user.id,
        } : undefined}
      />
    </>
  );
}

// src/hooks/useOnsraChat.ts
import { useCallback } from 'react';

export function useOnsraChat() {
  const open = useCallback(() => {
    (window as any).OnsraChat?.open();
  }, []);

  const close = useCallback(() => {
    (window as any).OnsraChat?.close();
  }, []);

  const identify = useCallback((user: { name: string; email: string; userId: string }) => {
    (window as any).OnsraChat?.identify(user);
  }, []);

  const track = useCallback((event: string, data?: Record<string, unknown>) => {
    (window as any).OnsraChat?.track(event, data);
  }, []);

  return { open, close, identify, track };
}

// Kullanım:
// const { open, track } = useOnsraChat();
// <button onClick={open}>Destek Al</button>

// src/types/onsrachat.d.ts
interface OnsraChatAPI {
  open(): void;
  close(): void;
  toggle(): void;
  identify(user: { name?: string; email?: string; userId?: string }): void;
  track(event: string, data?: Record<string, unknown>): void;
  destroy(): void;
}

declare global {
  interface Window {
    OnsraChat: OnsraChatAPI;
    OnsraSettings: {
      widgetId: string;
      primaryColor?: string;
      position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
      welcomeMessage?: string;
      visitor?: {
        name?: string;
        email?: string;
        userId?: string;
      };
    };
  }
}