วิธีเพิ่มแชทบอท AI Asyntai ไปยัง Strapi

คู่มือทีละขั้นตอนสำหรับเว็บไซต์ที่ขับเคลื่อนโดย Strapi

แพลตฟอร์ม:

Headless CMS: Strapi เป็น headless CMS ที่ส่งเนื้อหาผ่าน API แต่ไม่มี frontend ในตัว การติดตั้งแชทบอทขึ้นอยู่กับ frontend framework ที่คุณใช้เพื่อแสดงเนื้อหา Strapi เลือกวิธีด้านล่างที่ตรงกับการตั้งค่าของคุณ

ขั้นตอนที่ 1: รับโค้ดฝังตัวของคุณ

ก่อนอื่น ไปที่แดชบอร์ด Asyntai ของคุณและเลื่อนลงไปที่ส่วน "Embed Code" คัดลอกโค้ดฝังตัวเฉพาะของคุณซึ่งจะมีลักษณะดังนี้:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

หมายเหตุ: โค้ดด้านบนเป็นเพียงตัวอย่าง คุณต้องคัดลอกโค้ดฝังตัวเฉพาะของคุณจากแดชบอร์ดเนื่องจากมี widget ID ส่วนตัวของคุณ

วิธีที่ 1: Next.js กับ Strapi (แนะนำ)

หากคุณใช้ Next.js เป็น frontend ของ Strapi (การตั้งค่าที่พบบ่อยที่สุด) ให้เพิ่มแชทบอทโดยใช้ Script component:

เปิดไฟล์เลย์เอาต์หลักของคุณ: app/layout.tsx (App Router) หรือ pages/_app.tsx (Pages Router)
นำเข้าคอมโพเนนต์ Script และเพิ่มแชทบอท:
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> ) }
แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงของคุณ
บันทึกไฟล์และรีสตาร์ทเซิร์ฟเวอร์การพัฒนาของคุณ

เคล็ดลับ: การใช้ strategy="lazyOnload" ทำให้แชทบอทโหลดหลังจากหน้าพร้อมใช้งานอย่างเต็มที่ ให้ประสิทธิภาพที่ดีที่สุดสำหรับเว็บไซต์ที่ขับเคลื่อนโดย Strapi

วิธีที่ 2: Gatsby กับ Strapi

สำหรับเว็บไซต์ Gatsby ที่ใช้ gatsby-source-strapi:

สร้างหรือแก้ไข 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" /> ]) }
แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงของคุณ
รีสตาร์ทเซิร์ฟเวอร์การพัฒนา Gatsby ของคุณ

วิธีที่ 3: Nuxt.js กับ Strapi

สำหรับแอปพลิเคชัน Nuxt.js ที่ใช้ @nuxtjs/strapi:

Nuxt 3:

เพิ่มลงใน nuxt.config.ts ของคุณ:
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:

เพิ่มไปยัง nuxt.config.js ของคุณ:
export default { head: { script: [ { src: 'https://asyntai.com/static/js/chat-widget.js', async: true, 'data-asyntai-id': 'YOUR_WIDGET_ID' } ] } }

วิธีที่ 4: React กับ Strapi

สำหรับแอป React มาตรฐาน (Create React App, Vite) ที่ใช้ Strapi API:

เปิดไฟล์ public/index.html (CRA) หรือ index.html (Vite) ของคุณ
เพิ่มโค้ดฝังก่อนแท็กปิด </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
บันทึกไฟล์

หรือสร้าง React component:

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

วิธีที่ 5: SvelteKit กับ Strapi

สำหรับแอปพลิเคชัน SvelteKit ที่ใช้เนื้อหา Strapi:

แก้ไขไฟล์ src/app.html ของคุณ
เพิ่มโค้ดฝังก่อนแท็กปิด </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
บันทึกไฟล์

วิธีที่ 6: เว็บไซต์สแตติกกับ Strapi API

หากคุณใช้ REST หรือ GraphQL API ของ Strapi กับเว็บไซต์ HTML สแตติก:

เพิ่มโค้ดฝังลงในไฟล์ HTML ของคุณก่อนแท็กปิด </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
บันทึกไฟล์และอัปโหลดไปยังโฮสติ้งของคุณ

ขั้นตอนที่ 2: ตรวจสอบการติดตั้ง

หลังจากเพิ่มโค้ดแชทบอทไปยังเว็บไซต์ที่ขับเคลื่อนโดย Strapi แล้ว ให้ปรับใช้หรือรัน development server เปิดเว็บไซต์ของคุณในแท็บเบราว์เซอร์ใหม่หรือหน้าต่างไม่ระบุตัวตน คุณควรเห็นปุ่มวิดเจ็ตแชทที่มุมขวาล่าง คลิกเพื่อตรวจสอบว่าเปิดขึ้นมาและทำงานได้อย่างถูกต้อง

ไม่เห็นวิดเจ็ต? ตรวจสอบให้แน่ใจว่าคุณได้เพิ่มสคริปต์ลงในไฟล์ที่ถูกต้องสำหรับเฟรมเวิร์กของคุณ ตรวจสอบคอนโซลนักพัฒนาของเบราว์เซอร์เพื่อดูข้อผิดพลาด หากใช้การเรนเดอร์ฝั่งเซิร์ฟเวอร์ ให้แน่ใจว่าสคริปต์ทำงานฝั่งไคลเอนต์ ลองล้างแคชเบราว์เซอร์หรือดูในหน้าต่างส่วนตัว

ตัวแปรสภาพแวดล้อม: เพื่อความปลอดภัยและความยืดหยุ่นที่ดีขึ้น ให้พิจารณาเก็บ widget ID ของคุณในตัวแปรสภาพแวดล้อม (เช่น NEXT_PUBLIC_ASYNTAI_ID สำหรับ Next.js หรือ VITE_ASYNTAI_ID สำหรับ Vite) แทนที่จะเขียนลงในโค้ดโดยตรง

เอกสาร