Sanity'e Asyntai AI Chatbot Nasıl Eklenir

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

Platform:

Önemli: Sanity, içeriği API'ler aracılığıyla sunan headless bir CMS'dir. Chatbot kodu, Sanity Studio'ya değil, ön yüz uygulamanıza (Next.js, Gatsby, Nuxt, düz HTML vb.) 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)

Sanity destekli siteniz Next.js kullanıyorsa (en yaygın eşleşme), chatbot'u kök düzeninize ekleyin:

App Router (Next.js 13+)

app/layout.js (veya 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.js 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: Gatsby Frontend

Sanity siteniz Gatsby kullanıyorsa, scripti gatsby-ssr.js dosyası aracılığıyla ekleyin:

// gatsby-ssr.js
import React from 'react'

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script
      key="asyntai"
      async
      src="https://asyntai.com/static/js/chat-widget.js"
      data-asyntai-id="YOUR_WIDGET_ID"
    />
  ]);
};

Not: Widget'ın istemci taraflı gezinme sırasında kalıcı olmasını istiyorsanız aynı kodu gatsby-browser.js dosyasına da eklemeniz gerekir. Alternatif olarak, kök düzen bileşeninize ekleyin.

Alternatif Yöntem 2: Nuxt.js Frontend

Sanity siteniz Nuxt.js kullanıyorsa, scripti nuxt.config.js (veya nuxt.config.ts) dosyasına ekleyin:

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://asyntai.com/static/js/chat-widget.js',
          'data-asyntai-id': 'YOUR_WIDGET_ID',
          async: true
        }
      ]
    }
  }
})

Alternatif Yöntem 3: Düz HTML Ön Yüzü

Sanity destekli siteniz düz HTML veya Sanity API'sini kullanan bir statik site oluşturucu kullanıyorsa:

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>

Alternatif Yöntem 4: React (Vite veya Create React App)

Ön yüzünüz Vite veya Create React App ile React kullanıyorsa:

Scripti public/ dizinindeki index.html dosyasına ekleyin:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... existing head content ... -->
  </head>
  <body>
    <div id="root"></div>
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

Veya kök bileşeninizde bir useEffect hook'u kullanın:

// App.jsx or App.tsx
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
  );
}

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