Cara Menambah Chatbot AI Asyntai ke Sanity

Panduan langkah demi langkah untuk laman web berkuasa Sanity

Platform:

Penting: Sanity adalah CMS tanpa kepala yang menghantar kandungan melalui API. Kod chatbot perlu ditambah ke aplikasi frontend anda (Next.js, Gatsby, Nuxt, HTML biasa, dll.), bukan ke Sanity Studio itu sendiri.

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)

Jika laman berkuasa Sanity anda menggunakan Next.js (gabungan paling biasa), tambah chatbot ke layout akar anda:

App Router (Next.js 13+)

Buka app/layout.js (atau 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.js:

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: Antara Muka Hadapan Gatsby

Jika laman Sanity anda menggunakan Gatsby, tambah skrip melalui gatsby-ssr.js:

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

Nota: Anda juga perlu menambah kod yang sama ke gatsby-browser.js jika anda mahu widget kekal semasa navigasi sisi klien. Sebagai alternatif, tambahkannya ke komponen layout akar anda.

Kaedah Alternatif 2: Antara Muka Hadapan Nuxt.js

Jika laman Sanity anda menggunakan Nuxt.js, tambah skrip dalam nuxt.config.js (atau nuxt.config.ts):

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

Kaedah Alternatif 3: Frontend HTML Biasa

Jika laman berkuasa Sanity anda menggunakan HTML biasa atau penjana laman statik yang menggunakan API Sanity:

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>

Kaedah Alternatif 4: React (Vite atau Create React App)

Jika frontend anda menggunakan React dengan Vite atau Create React App:

Tambah skrip ke index.html dalam direktori public/:

<!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>

Atau gunakan hook useEffect dalam komponen akar anda:

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

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