Cara Menambahkan Chatbot AI Asyntai ke Contentful

Panduan langkah demi langkah untuk situs web berbasis Contentful

Platform:

CMS Headless: Contentful adalah CMS headless, yang berarti menyediakan konten melalui API tetapi tidak menyertakan frontend bawaan. Instalasi chatbot tergantung pada framework frontend mana yang Anda gunakan untuk merender konten Contentful 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 Contentful (Disarankan)

Jika Anda menggunakan Next.js untuk merender konten Contentful Anda, 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 performa terbaik.

Metode 2: Gatsby dengan Contentful

Untuk situs Gatsby yang mengambil konten dari Contentful:

Instal gatsby-plugin-load-script (opsional tetapi disarankan):
npm install gatsby-plugin-load-script
Tambahkan ke gatsby-config.js Anda:
module.exports = { plugins: [ { resolve: 'gatsby-plugin-load-script', options: { src: 'https://asyntai.com/static/js/chat-widget.js', attributes: { 'data-asyntai-id': 'YOUR_WIDGET_ID', async: true } } } ] }
Sebagai alternatif, gunakan gatsby-ssr.js:
// gatsby-ssr.js 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" /> ]) }
Mulai ulang server pengembangan Gatsby Anda

Metode 3: React dengan Contentful

Untuk aplikasi React standar (Create React App, Vite, dll.) yang menggunakan Contentful:

Buka file public/index.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

Atau gunakan komponen React dengan useEffect:

// 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 4: Vue/Nuxt dengan Contentful

Untuk aplikasi Vue atau Nuxt.js yang menggunakan Contentful:

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

Vue 3:

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

Metode 5: HTML Statis dengan API Contentful

Jika Anda menggunakan Content Delivery API dari Contentful dengan JavaScript murni:

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 Contentful Anda, deploy atau jalankan server pengembangan Anda. Kunjungi situs web Anda di tab browser baru atau jendela penyamaran. Anda akan melihat tombol widget obrolan 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) daripada menulisnya secara langsung di kode.

Dokumentasi