Asyntai AI Chatbot'u Docusaurus'e Nasıl Eklersiniz

Docusaurus dokümantasyon siteleri için adım adım kılavuz

Platform:

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: docusaurus.config.js Dosyasına Script Ekleyin (Önerilen)

Chatbot'u Docusaurus sitenizin tüm sayfalarına eklemenin en iyi yolu yapılandırma dosyasıdır:

Docusaurus projenizi kod düzenleyicinizde açın
Proje kök dizininizde docusaurus.config.js dosyasını bulun ve açın
const config = { } nesnesini bulun
scripts alanını Asyntai widget'ınızla ekleyin veya güncelleyin:

const config = {
  // ... other config options

  scripts: [
    // Other scripts if any
    {
      src: 'https://asyntai.com/static/js/chat-widget.js',
      'data-asyntai-id': 'YOUR_WIDGET_ID',
      async: true,
    },
  ],

  // ... rest of config
};

docusaurus.config.js dosyasını kaydedin
npm run build veya yarn build komutunu çalıştırarak sitenizi yeniden derleyin
Yerel olarak çalışıyorsa geliştirme sunucusunu yeniden başlatın

İpucu: scripts alanı bir JavaScript kaynakları dizisi kabul eder. Script etiketi her sayfanın HTML head bölümüne otomatik olarak eklenir. Bu, Docusaurus siteleri için en temiz ve en sürdürülebilir yöntemdir.

Alternatif Yöntem 1: String Formatı (Daha Basit Söz Dizimi)

Daha basit bir yaklaşımı tercih ediyorsanız, scripts dizisinde string formatını kullanabilirsiniz:

const config = {
  scripts: [
    'https://asyntai.com/static/js/chat-widget.js',
  ],
};

Not: String formatı kullanırken, widget kimliğinizi bir sorgu parametresi olarak eklemek için komut dosyası URL'sini değiştirmeniz veya data-asyntai-id özelliğini doğrudan ayarlamanıza olanak tanıyan Adım 2'de gösterilen nesne formatını kullanmanız gerekir.

Alternatif Yöntem 2: Özel Head Etiketleri

Betiği docusaurus.config.js dosyasındaki headTags alanını kullanarak da ekleyebilirsiniz:

const config = {
  headTags: [
    {
      tagName: 'script',
      attributes: {
        src: 'https://asyntai.com/static/js/chat-widget.js',
        'data-asyntai-id': 'YOUR_WIDGET_ID',
        async: true,
      },
    },
  ],
};

İpucu: headTags alanı, <head> bölümüne eklenen tam HTML etiketleri üzerinde daha fazla kontrol sağlar. Bu yöntem, işlevsel olarak scripts alanını kullanmakla eşdeğerdir.

Alternatif Yöntem 3: Özel HTML Şablonu (İleri Düzey)

İleri düzey kullanıcılar için, HTML şablonu üzerinde tam kontrole ihtiyaç duyanlar:

Yeni bir dizin oluşturun: src/theme (eğer yoksa)
Bir dosya oluşturun: src/theme/Root.js
Komut dosyasını dinamik olarak enjekte etmek için aşağıdaki kodu ekleyin:

import React, { useEffect } from 'react';

export default function Root({children}) {
  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.head.appendChild(script);

    return () => {
      // Cleanup when component unmounts
      document.head.removeChild(script);
    };
  }, []);

  return <>{children}</>;
}

Dosyayı kaydedin ve sitenizi yeniden derleyin

Önemli: Root.js bileşeni tüm uygulamanızı sarar. Bu gelişmiş yöntem yalnızca özel JavaScript mantığına ihtiyacınız varsa veya yapılandırma dosyası yaklaşımıyla karşılanamayan özel gereksinimleriniz varsa kullanılmalıdır.

Alternatif Yöntem 4: Footer Bileşenini Swizzle Etme

Footer'ı komut dosyasını içerecek şekilde özelleştirebilirsiniz:

Swizzle komutunu çalıştırın: npm run swizzle @docusaurus/theme-classic Footer -- --eject
Bu, src/theme/Footer/ dizininde Footer bileşeninin bir kopyasını oluşturur
Footer bileşenini script etiketinizi içerecek şekilde düzenleyin
Footer'ın kapanış etiketinden önce komut dosyasını ekleyin
Sitenizi kaydedin ve yeniden derleyin

Not: Swizzling, Docusaurus bileşenleri üzerinde tam kontrol sağlar, ancak bu bileşeni kendiniz sürdürmeniz gerektiği anlamına gelir. Docusaurus güncellemeleri, swizzle edilmiş bileşenleri otomatik olarak güncellemez.

Adım 3: Derleyin ve Dağıtın

Kodu ekledikten sonra Docusaurus sitenizi derleyin ve dağıtın:

# Build the site
npm run build

# Or with Yarn
yarn build

# Deploy to your hosting platform
# (Vercel, Netlify, GitHub Pages, etc.)

İpucu: Geliştirme sırasında değişikliklerinizi yerel olarak önizlemek için npm start veya yarn start komutunu çalıştırın. Chatbot tüm sayfalarda sağ alt köşede görünmelidir.

Adım 4: Kurulumu Doğrulayın

Değişikliklerinizi dağıttıktan sonra dokümantasyon sitenizi yeni bir tarayıcı sekmesinde açın. Sağ alt köşede sohbet widget düğmesini görmelisiniz. Açıldığından ve düzgün çalıştığından emin olmak için tıklayın.

Widget'ı göremiyor musunuz? Değişiklik yaptıktan sonra sitenizi yeniden derlediğinizden emin olun. YOUR_WIDGET_ID'yi kontrol panelindeki gerçek widget kimliğinizle değiştirdiğinizi kontrol edin. Tarayıcı önbelleğinizi temizleyin veya gizli modda görüntüleyin. JavaScript hataları olup olmadığını kontrol etmek için tarayıcı konsolunu (F12) açın.

Belgeler