PayloadCMS'e Asyntai AI Chatbot Nasıl Eklenir

PayloadCMS destekli web siteleri için adım adım kılavuz

Platform:

Önemli: PayloadCMS, headless bir CMS'dir. Chatbot kodu, Payload yönetim paneline değil, ön yüz uygulamanıza eklenmelidir.

Adım 1: Yerleştirme Kodunuzu Alın

Önce Asyntai Dashboard'unuza gidin ve "Yerleştirme Kodu" bölümüne inin. Şuna benzeyen benzersiz yerleştirme kodunuzu kopyalayın:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Not: Yukarıdaki kod yalnızca bir örnektir. Kişisel widget kimliğinizi içerdiğinden, kendi benzersiz yerleştirme kodunuzu Dashboard'unuzdan kopyalamanız gerekir.

Adım 2: Next.js Frontend'e Ekleyin (En Yaygın)

PayloadCMS genellikle ön yüz framework'ü olarak Next.js kullanır. Chatbot'u kök düzeninize ekleyin:

App Router (Next.js 13+)

app/layout.tsx dosyasını açın ve Script bileşenini ekleyin:

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://asyntai.com/static/js/chat-widget.js"
          data-asyntai-id="YOUR_WIDGET_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Pages Router

Pages Router kullanıyorsanız, pages/_app.tsx dosyasını açın:

import Script from 'next/script'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://asyntai.com/static/js/chat-widget.js"
        data-asyntai-id="YOUR_WIDGET_ID"
        strategy="afterInteractive"
      />
    </>
  )
}

İpucu: strategy="afterInteractive" seçeneği, chatbot'un sayfa etkileşimli hale geldikten sonra yüklenmesini sağlayarak, sayfa yükleme performansını etkilemeden en iyi kullanıcı deneyimini sunar.

Alternatif Yöntem 1: Özel React Ön Yüzü

PayloadCMS projeniz Next.js yerine özel bir React ön yüzü kullanıyorsa, chatbot'u bir useEffect hook'u ile dinamik olarak yükleyebilirsiniz:

// App.tsx or App.jsx
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://asyntai.com/static/js/chat-widget.js';
    script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
    script.async = true;
    document.body.appendChild(script);

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

  return (
    // ... your app content
  );
}

Not: YOUR_WIDGET_ID yerine kontrol panelindeki gerçek widget kimliğinizi yazın. Return ifadesindeki temizleme fonksiyonu, bileşen kaldırıldığında scriptin kaldırılmasını sağlar.

Alternatif Yöntem 2: Payload'ın Özel Bileşenlerini Kullanma (Yalnızca Yönetim Paneli)

Chatbot'un Payload yönetim panelinin kendisinde (dahili destek için) görünmesini istiyorsanız, payload.config.ts dosyanıza özel bir bileşen kaydedebilirsiniz:

// payload.config.ts
import { buildConfig } from 'payload/config';

export default buildConfig({
  admin: {
    components: {
      afterDashboard: ['/components/AsyntaiChatbot'],
    },
  },
  // ... rest of your config
})

Ardından bileşen dosyasını oluşturun:

// components/AsyntaiChatbot.tsx
'use client'
import { useEffect } from 'react';

const AsyntaiChatbot = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://asyntai.com/static/js/chat-widget.js';
    script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
    script.async = true;
    document.body.appendChild(script);

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

  return null;
};

export default AsyntaiChatbot;

İpucu: Bu yöntem yalnızca chatbot'u Payload yönetim paneline eklemek içindir. Halka açık web siteniz için bunun yerine Adım 2 veya Alternatif Yöntem 1'i kullanın.

Alternatif Yöntem 3: Düz HTML/Statik Site

PayloadCMS destekli siteniz Payload API'sini kullanan düz HTML veya statik bir ön yüz kullanıyorsa, gömme kodunu doğrudan HTML'nize ekleyin:

Ana HTML dosyanızı açın (genellikle index.html)
Kapanış </body> etiketinden hemen önce gömme kodunu ekleyin:

    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

Adım 3: Dağıtın ve Doğrulayın

Kodu ön yüz uygulamanıza ekledikten sonra:

Ön yüzünüzü barındırma sağlayıcınıza dağıtın (Vercel, Netlify vb.)
Canlı sitenizi yeni bir tarayıcı sekmesinde açın
Sağ alt köşede sohbet widget'ı düğmesini görmeniz gerekir
Düzgün açıldığından ve çalıştığından emin olmak için tıklayın

Widget'ı göremiyor musunuz? YOUR_WIDGET_ID'yi kontrol panelindeki gerçek widget kimliğinizle değiştirdiğinizden emin olun. Scriptin tarayıcınızın Network sekmesinde (F12 > Network) yüklendiğini kontrol edin. Kodu ekledikten sonra ön yüzün yeniden dağıtıldığını doğrulayın. Next.js için normal bir <script> etiketi değil, next/script'ten Script bileşenini kullandığınızdan emin olun. Tarayıcı önbelleğinizi temizleyin veya gizli modda test edin.

Belgeler