Cara Menambah Chatbot AI Asyntai ke Contentful

Panduan langkah demi langkah untuk laman web berkuasa Contentful

Platform:

CMS Tanpa Kepala: Contentful ialah CMS tanpa kepala, bermakna ia menyediakan kandungan melalui API tetapi tidak menyertakan antara muka hadapan terbina dalam. Pemasangan chatbot bergantung pada rangka kerja antara muka hadapan yang anda gunakan untuk memaparkan kandungan Contentful anda. Pilih kaedah di bawah yang sepadan dengan persediaan anda.

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.

Kaedah 1: Next.js dengan Contentful (Disyorkan)

Jika anda menggunakan Next.js untuk memaparkan kandungan Contentful anda, tambah chatbot menggunakan komponen Script:

Buka fail susun atur utama anda: app/layout.tsx (App Router) atau pages/_app.tsx (Pages Router)
Import komponen Script dan tambah 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> ) }
Gantikan YOUR_WIDGET_ID dengan ID widget sebenar anda
Simpan fail dan mulakan semula pelayan pembangunan anda

Petua: Menggunakan strategy="lazyOnload" memastikan chatbot dimuatkan selepas halaman interaktif sepenuhnya, memberikan prestasi terbaik.

Kaedah 2: Gatsby dengan Contentful

Untuk laman Gatsby yang menarik kandungan dari Contentful:

Pasang gatsby-plugin-load-script (pilihan tetapi disyorkan):
npm install gatsby-plugin-load-script
Tambah 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" /> ]) }
Mulakan semula pelayan pembangunan Gatsby anda

Kaedah 3: React dengan Contentful

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

Buka fail public/index.html anda
Tambah kod benam sebelum tag penutup </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Simpan fail

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
}

Kaedah 4: Vue/Nuxt dengan Contentful

Untuk aplikasi Vue atau Nuxt.js menggunakan Contentful:

Nuxt 3:

Tambah 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:

Tambah ke index.html anda sebelum </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Kaedah 5: HTML Statik dengan API Contentful

Jika anda menggunakan Content Delivery API Contentful dengan JavaScript vanila:

Tambah kod benam ke fail 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 fail dan muat naik ke pengehosan anda

Langkah 2: Sahkan Pemasangan

Selepas menambah kod chatbot ke laman berkuasa Contentful anda, laksanakan atau jalankan pelayan pembangunan anda. Lawati laman web anda dalam tab pelayar baharu atau tetingkap inkognito. Anda sepatutnya melihat butang widget sembang di sudut kanan bawah. Klik untuk memastikan ia terbuka dan berfungsi dengan betul.

Tidak nampak widget? Pastikan anda telah menambah skrip ke fail yang betul untuk rangka kerja anda. Semak konsol pembangun pelayar anda untuk sebarang ralat. Jika menggunakan pemaparan sisi pelayan, pastikan skrip berjalan di sisi klien. Cuba kosongkan cache pelayar anda atau lihat dalam tetingkap inkognito.

Pemboleh Ubah Persekitaran: Untuk keselamatan dan fleksibiliti yang lebih baik, pertimbangkan untuk menyimpan ID widget anda dalam pemboleh ubah persekitaran (contohnya, NEXT_PUBLIC_ASYNTAI_ID untuk Next.js) dan bukannya mengekodkannya secara tetap.

Dokumentasi