Cara Menambahkan Chatbot AI Asyntai ke Strapi

Panduan langkah demi langkah untuk situs web berbasis Strapi

Platform:

CMS Headless: Strapi adalah CMS headless yang menyediakan konten melalui API tetapi tidak menyertakan frontend bawaan. Instalasi chatbot tergantung pada framework frontend mana yang Anda gunakan untuk merender konten Strapi Anda. Pilih metode di bawah yang sesuai dengan pengaturan Anda.

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.

Metode 1: Next.js dengan Strapi (Direkomendasikan)

Jika Anda menggunakan Next.js sebagai frontend Strapi Anda (pengaturan paling umum), tambahkan chatbot menggunakan komponen Script:

Buka file layout utama Anda: app/layout.tsx (App Router) atau pages/_app.tsx (Pages Router)
Impor komponen Script dan tambahkan chatbot:
import Script from 'next/script' export default function RootLayout({ children }) { return ( <html> <body> {children} <Script src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID" strategy="lazyOnload" /> </body> </html> ) }
Ganti YOUR_WIDGET_ID dengan ID widget Anda yang sebenarnya
Simpan file dan mulai ulang server pengembangan Anda

Tips: Menggunakan strategy="lazyOnload" memastikan chatbot dimuat setelah halaman sepenuhnya interaktif, memberikan kinerja terbaik untuk situs berbasis Strapi Anda.

Metode 2: Gatsby dengan Strapi

Untuk situs Gatsby yang menggunakan gatsby-source-strapi:

Buat atau edit gatsby-ssr.js di root proyek Anda:
import React from 'react' export const onRenderBody = ({ setPostBodyComponents }) => { setPostBodyComponents([ <script key="asyntai-chatbot" async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID" /> ]) }
Ganti YOUR_WIDGET_ID dengan ID widget Anda yang sebenarnya
Mulai ulang server pengembangan Gatsby Anda

Metode 3: Nuxt.js dengan Strapi

Untuk aplikasi Nuxt.js yang menggunakan @nuxtjs/strapi:

Nuxt 3:

Tambahkan ke nuxt.config.ts Anda:
export default defineNuxtConfig({ app: { head: { script: [ { src: 'https://asyntai.com/static/js/chat-widget.js', async: true, 'data-asyntai-id': 'YOUR_WIDGET_ID' } ] } } })

Nuxt 2:

Tambahkan ke nuxt.config.js Anda:
export default { head: { script: [ { src: 'https://asyntai.com/static/js/chat-widget.js', async: true, 'data-asyntai-id': 'YOUR_WIDGET_ID' } ] } }

Metode 4: React dengan Strapi

For standard React apps (Create React App, Vite) consuming Strapi API:

Buka file public/index.html Anda (CRA) atau index.html (Vite)
Tambahkan kode embed sebelum tag penutup </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Simpan file

Atau buat komponen React:

// components/Chatbot.jsx
import { useEffect } from 'react'

export default function Chatbot() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://asyntai.com/static/js/chat-widget.js'
    script.async = true
    script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID')
    document.body.appendChild(script)
    return () => document.body.removeChild(script)
  }, [])
  return null
}

Metode 5: SvelteKit dengan Strapi

Untuk aplikasi SvelteKit yang mengonsumsi konten Strapi:

Edit file src/app.html Anda
Tambahkan kode embed sebelum tag penutup </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Simpan file

Metode 6: Situs Statis dengan API Strapi

If you're using Strapi's REST or GraphQL API with a static HTML site:

Tambahkan kode embed ke file HTML Anda sebelum tag penutup </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Simpan file dan unggah ke hosting Anda

Langkah 2: Verifikasi Instalasi

Setelah menambahkan kode chatbot ke situs berbasis Strapi Anda, deploy atau jalankan server pengembangan Anda. Kunjungi situs web Anda di tab browser baru atau jendela penyamaran. Anda seharusnya melihat tombol widget chat di pojok kanan bawah. Klik untuk memastikan widget terbuka dan berfungsi dengan benar.

Tidak melihat widget? Pastikan Anda telah menambahkan skrip ke file yang benar untuk framework Anda. Periksa konsol pengembang browser Anda untuk kesalahan apa pun. Jika menggunakan rendering sisi server, pastikan skrip berjalan di sisi klien. Coba bersihkan cache browser Anda atau lihat di jendela penyamaran.

Variabel Lingkungan: Untuk keamanan dan fleksibilitas yang lebih baik, pertimbangkan untuk menyimpan ID widget Anda dalam variabel lingkungan (misalnya, NEXT_PUBLIC_ASYNTAI_ID untuk Next.js atau VITE_ASYNTAI_ID untuk Vite) daripada menulisnya secara langsung di kode.

Dokumentasi