Cara Menambahkan Chatbot AI Asyntai ke PayloadCMS

Panduan langkah demi langkah untuk situs web berbasis PayloadCMS

Platform:

Penting: PayloadCMS adalah CMS headless. Kode chatbot perlu ditambahkan ke aplikasi frontend Anda, bukan ke panel admin Payload.

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 ke Frontend Next.js (Paling Umum)

PayloadCMS umumnya menggunakan Next.js sebagai framework frontend-nya. Tambahkan chatbot ke layout root Anda:

App Router (Next.js 13+)

Buka app/layout.tsx dan tambahkan komponen Script:

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

Jika menggunakan Pages Router, buka pages/_app.tsx:

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"
      />
    </>
  )
}

Tip: Opsi strategy="afterInteractive" memastikan chatbot dimuat setelah halaman menjadi interaktif, memberikan pengalaman pengguna terbaik tanpa mempengaruhi kinerja muat halaman.

Metode Alternatif 1: Frontend React Kustom

Jika proyek PayloadCMS Anda menggunakan frontend React kustom alih-alih Next.js, Anda dapat memuat chatbot secara dinamis dengan hook useEffect:

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

Catatan: Ganti YOUR_WIDGET_ID dengan ID widget sebenarnya dari dasbor. Fungsi pembersihan di pernyataan return memastikan skrip dihapus jika komponen di-unmount.

Metode Alternatif 2: Menggunakan Komponen Kustom Payload (Khusus Panel Admin)

Jika Anda ingin chatbot muncul di dalam panel admin Payload itu sendiri (untuk dukungan internal), Anda dapat mendaftarkan komponen kustom di payload.config.ts Anda:

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

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

Kemudian buat file komponen:

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

Tip: Metode ini hanya untuk menambahkan chatbot ke panel admin Payload. Untuk situs web publik Anda, gunakan Langkah 2 atau Metode Alternatif 1 sebagai gantinya.

Metode Alternatif 3: HTML Biasa/Situs Statis

Jika situs berbasis PayloadCMS Anda menggunakan frontend HTML biasa atau statis yang mengonsumsi API Payload, tambahkan kode embed langsung ke HTML Anda:

Buka file HTML utama Anda (biasanya index.html)
Tambahkan kode embed tepat sebelum tag penutup </body>:

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

Langkah 3: Deploy dan Verifikasi

Setelah menambahkan kode ke aplikasi frontend Anda:

Deploy frontend Anda ke penyedia hosting (Vercel, Netlify, dll.)
Buka situs live Anda di tab browser baru
Anda seharusnya melihat tombol widget obrolan di pojok kanan bawah
Klik untuk memastikan widget terbuka dan berfungsi dengan benar

Tidak melihat widget? Pastikan Anda telah mengganti YOUR_WIDGET_ID dengan ID widget sebenarnya dari dasbor. Periksa apakah skrip dimuat di tab Network browser Anda (F12 > Network). Verifikasi bahwa frontend telah di-deploy ulang setelah menambahkan kode. Untuk Next.js, pastikan Anda menggunakan komponen Script dari next/script, bukan tag <script> biasa. Bersihkan cache browser atau uji dalam mode penyamaran.

Dokumentasi