Cara Menambahkan Chatbot AI Asyntai ke Sanity

Panduan langkah demi langkah untuk situs web berbasis Sanity

Platform:

Penting: Sanity adalah CMS headless yang mengirimkan konten melalui API. Kode chatbot perlu ditambahkan ke aplikasi frontend Anda (Next.js, Gatsby, Nuxt, HTML biasa, dll.), bukan ke Sanity Studio itu sendiri.

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)

Jika situs berbasis Sanity Anda menggunakan Next.js (kombinasi paling umum), tambahkan chatbot ke layout root Anda:

App Router (Next.js 13+)

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

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

Metode Alternatif 1: Frontend Gatsby

Jika situs Sanity Anda menggunakan Gatsby, tambahkan 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"
    />
  ]);
};

Catatan: Anda juga perlu menambahkan kode yang sama ke gatsby-browser.js jika ingin widget tetap ada selama navigasi sisi klien. Atau, tambahkan ke komponen layout root Anda.

Metode Alternatif 2: Frontend Nuxt.js

Jika situs Sanity Anda menggunakan Nuxt.js, tambahkan skrip di 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
        }
      ]
    }
  }
})

Metode Alternatif 3: Frontend HTML Biasa

Jika situs berbasis Sanity Anda menggunakan HTML biasa atau generator situs statis yang mengonsumsi API Sanity:

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>

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

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

Tambahkan skrip ke index.html di 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 di komponen root 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: 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