Framework

Next.js

Next.js App Router veya Pages Router ile OnsraChat entegrasyonu.

App Router (Next.js 13+)

Client component olarak oluşturun ve root layout'a ekleyin:

tsx

// components/OnsraChat.tsx
'use client';

import { useEffect } from 'react';

export function OnsraChat({ widgetId }: { widgetId: string }) {
  useEffect(() => {
    (window as any).OnsraSettings = { widgetId };

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

    return () => {
      if (document.body.contains(script)) {
        document.body.removeChild(script);
      }
    };
  }, [widgetId]);

  return null;
}

tsx

// app/layout.tsx
import { OnsraChat } from '@/components/OnsraChat';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="tr">
      <body>
        {children}
        <OnsraChat widgetId={process.env.NEXT_PUBLIC_ONSRACHAT_WIDGET_ID!} />
      </body>
    </html>
  );
}

Environment Variables

bash

# .env.local
NEXT_PUBLIC_ONSRACHAT_WIDGET_ID=your_widget_id_here

next/script ile Optimize Yükleme

tsx

// components/OnsraChat.tsx
'use client';

import Script from 'next/script';

export function OnsraChat({ widgetId }: { widgetId: string }) {
  return (
    <>
      <Script id="onsrachat-settings" strategy="afterInteractive">
        {JSON.stringify({ widgetId })}
      </Script>
      <Script
        id="onsrachat-loader"
        src="https://widget.onsrachat.com/loader.js"
        strategy="afterInteractive"
        onLoad={() => {
          (window as any).OnsraSettings = { widgetId };
        }}
      />
    </>
  );
}

Auth.js / NextAuth ile Entegrasyon

tsx

// components/OnsraChatWithAuth.tsx
'use client';

import { useSession } from 'next-auth/react';
import { useEffect } from 'react';

export function OnsraChatWithAuth({ widgetId }: { widgetId: string }) {
  const { data: session } = useSession();

  useEffect(() => {
    (window as any).OnsraSettings = {
      widgetId,
      visitor: session?.user ? {
        name: session.user.name ?? undefined,
        email: session.user.email ?? undefined,
      } : undefined,
    };

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

    return () => {
      if (document.body.contains(script)) document.body.removeChild(script);
    };
  }, [widgetId, session]);

  return null;
}

Pages Router (Next.js 12 ve altı)

tsx

// pages/_app.tsx
import type { AppProps } from 'next/app';
import { useEffect } from 'react';

export default function App({ Component, pageProps }: AppProps) {
  useEffect(() => {
    (window as any).OnsraSettings = {
      widgetId: process.env.NEXT_PUBLIC_ONSRACHAT_WIDGET_ID,
    };

    const script = document.createElement('script');
    script.src = 'https://widget.onsrachat.com/loader.js';
    script.async = true;
    document.body.appendChild(script);
  }, []);

  return <Component {...pageProps} />;
}