Cara Menambah Chatbot AI Asyntai ke PayloadCMS

Panduan langkah demi langkah untuk laman web berkuasa PayloadCMS

Platform:

Penting: PayloadCMS adalah CMS tanpa kepala. Kod chatbot perlu ditambah ke aplikasi frontend anda, bukan ke panel admin Payload.

Langkah 1: Dapatkan Kod Benam Anda

Pertama, pergi ke Papan Pemuka Asyntai anda dan tatal ke bawah ke bahagian "Kod Benam". Salin kod benam unik anda yang akan kelihatan seperti ini:

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

Nota: Kod di atas hanyalah contoh. Anda mesti menyalin kod benam unik anda sendiri dari Papan Pemuka anda kerana ia mengandungi ID widget peribadi anda.

Langkah 2: Tambah ke Antara Muka Hadapan Next.js (Paling Biasa)

PayloadCMS biasanya menggunakan Next.js sebagai rangka kerja frontendnya. Tambah chatbot ke layout akar anda:

App Router (Next.js 13+)

Buka app/layout.tsx dan tambah 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"
      />
    </>
  )
}

Petua: Pilihan strategy="afterInteractive" memastikan chatbot dimuatkan selepas halaman menjadi interaktif, memberikan pengalaman pengguna terbaik tanpa menjejaskan prestasi pemuatan halaman.

Kaedah Alternatif 1: Frontend React Tersuai

Jika projek PayloadCMS anda menggunakan frontend React tersuai dan bukan Next.js, anda boleh memuatkan chatbot secara dinamik 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
  );
}

Nota: Gantikan YOUR_WIDGET_ID dengan ID widget sebenar anda dari papan pemuka. Fungsi pembersihan dalam pernyataan return memastikan skrip dibuang jika komponen dinyahlekapkan.

Kaedah Alternatif 2: Menggunakan Komponen Tersuai Payload (Panel Admin Sahaja)

Jika anda mahu chatbot muncul di dalam panel admin Payload itu sendiri (untuk sokongan dalaman), anda boleh mendaftarkan komponen tersuai dalam 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 cipta fail 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;

Petua: Kaedah ini hanya untuk menambah chatbot ke panel admin Payload. Untuk laman web awam anda, gunakan Langkah 2 atau Kaedah Alternatif 1 sebaliknya.

Kaedah Alternatif 3: HTML Biasa/Laman Statik

Jika laman berkuasa PayloadCMS anda menggunakan frontend HTML biasa atau statik yang menggunakan API Payload, tambah kod benam terus ke HTML anda:

Buka fail HTML utama anda (biasanya index.html)
Tambah kod benam sejurus 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: Laksanakan dan Sahkan

Selepas menambah kod ke aplikasi frontend anda:

Lancarkan frontend anda ke penyedia hosting anda (Vercel, Netlify, dll.)
Buka laman langsung anda dalam tab pelayar baharu
Anda sepatutnya melihat butang widget sembang di sudut kanan bawah
Klik padanya untuk memastikan ia dibuka dan berfungsi dengan betul

Tidak nampak widget? Pastikan anda telah menggantikan YOUR_WIDGET_ID dengan ID widget sebenar anda dari papan pemuka. Semak bahawa skrip sedang dimuatkan dalam tab Network pelayar anda (F12 > Network). Sahkan bahawa frontend telah dideploy semula selepas menambah kod. Untuk Next.js, pastikan anda menggunakan komponen Script dari next/script, bukan tag <script> biasa. Kosongkan cache pelayar anda atau uji dalam mod inkognito.

Dokumentasi