Cara Menambahkan Chatbot AI Asyntai ke Docusaurus

Panduan langkah demi langkah untuk situs dokumentasi Docusaurus

Platform:

Langkah 1: Dapatkan Kode Embed Anda

Pertama, buka Dasbor Asyntai dan gulir ke bawah ke bagian "Kode Embed". Salin kode embed unik Anda yang akan terlihat seperti ini:

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

Catatan: Kode di atas hanya contoh. Anda harus menyalin kode embed unik Anda sendiri dari Dasbor karena berisi ID widget personal Anda.

Langkah 2: Tambahkan Skrip ke docusaurus.config.js (Disarankan)

Cara terbaik untuk menambahkan chatbot ke semua halaman situs Docusaurus Anda adalah melalui file konfigurasi:

Buka proyek Docusaurus Anda di editor kode
Temukan dan buka file docusaurus.config.js di root proyek Anda
Temukan objek const config = { }
Tambahkan atau perbarui field scripts dengan widget Asyntai Anda:

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
};

Simpan file docusaurus.config.js
Bangun ulang situs Anda dengan menjalankan npm run build atau yarn build
Mulai ulang server pengembangan jika berjalan secara lokal

Tip: Field scripts menerima array sumber JavaScript. Tag script akan disisipkan di head HTML setiap halaman secara otomatis. Ini adalah metode paling bersih dan paling mudah dipelihara untuk situs Docusaurus.

Metode Alternatif 1: Format String (Sintaks Lebih Sederhana)

Jika Anda lebih suka pendekatan yang lebih sederhana, Anda dapat menggunakan format string dalam array scripts:

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

Catatan: Saat menggunakan format string, Anda perlu memodifikasi URL skrip untuk menyertakan ID widget Anda sebagai parameter query, atau gunakan format objek yang ditunjukkan di Langkah 2 yang memungkinkan Anda mengatur atribut data-asyntai-id secara langsung.

Metode Alternatif 2: Tag Head Kustom

Anda juga dapat menambahkan skrip menggunakan field headTags di docusaurus.config.js:

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

Tip: Field headTags memberikan kontrol lebih atas tag HTML yang disisipkan ke bagian <head>. Metode ini secara fungsional setara dengan menggunakan field scripts.

Metode Alternatif 3: Template HTML Kustom (Lanjutan)

Untuk pengguna lanjutan yang membutuhkan kontrol penuh atas template HTML:

Buat direktori baru: src/theme (jika belum ada)
Buat file: src/theme/Root.js
Tambahkan kode berikut untuk menyuntikkan skrip secara dinamis:

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}</>;
}

Simpan file dan bangun ulang situs Anda

Penting: Komponen Root.js membungkus seluruh aplikasi Anda. Metode lanjutan ini hanya boleh digunakan jika Anda membutuhkan logika JavaScript kustom atau memiliki persyaratan khusus yang tidak dapat dipenuhi dengan pendekatan file konfigurasi.

Metode Alternatif 4: Swizzle Komponen Footer

Anda dapat menyesuaikan footer untuk menyertakan skrip:

Jalankan perintah swizzle: npm run swizzle @docusaurus/theme-classic Footer -- --eject
Ini membuat salinan komponen Footer di src/theme/Footer/
Edit komponen Footer untuk menyertakan tag skrip Anda
Tambahkan skrip sebelum tag penutup footer
Simpan dan bangun ulang situs Anda

Catatan: Swizzling memberi Anda kontrol penuh atas komponen Docusaurus, tetapi ini berarti Anda harus memelihara komponen tersebut sendiri. Pembaruan Docusaurus tidak akan secara otomatis memperbarui komponen yang telah di-swizzle.

Langkah 3: Build dan Deploy

Setelah menambahkan kode, build dan deploy situs Docusaurus Anda:

# Build the site
npm run build

# Or with Yarn
yarn build

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

Tip: Selama pengembangan, jalankan npm start atau yarn start untuk melihat pratinjau perubahan Anda secara lokal. Chatbot akan muncul di pojok kanan bawah pada semua halaman.

Langkah 4: Verifikasi Instalasi

Setelah men-deploy perubahan Anda, buka situs dokumentasi Anda di tab browser baru. Anda akan melihat tombol widget obrolan di pojok kanan bawah. Klik untuk memastikan widget terbuka dan berfungsi dengan benar.

Tidak melihat widget? Pastikan Anda telah membangun ulang situs Anda setelah melakukan perubahan. Periksa bahwa Anda telah mengganti YOUR_WIDGET_ID dengan ID widget Anda yang sebenarnya dari dashboard. Bersihkan cache browser Anda atau lihat dalam mode penyamaran. Buka konsol browser (F12) untuk memeriksa kesalahan JavaScript.

Dokumentasi