วิธีเพิ่มแชทบอท AI Asyntai ลงใน Contentful

คู่มือทีละขั้นตอนสำหรับเว็บไซต์ที่ใช้ Contentful

แพลตฟอร์ม:

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

ขั้นตอนที่ 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 กับ Contentful (แนะนำ)

หากคุณใช้ Next.js เพื่อแสดงเนื้อหา Contentful ให้เพิ่มแชทบอทโดยใช้คอมโพเนนต์ Script:

เปิดไฟล์เลย์เอาต์หลักของคุณ: 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" ช่วยให้แชทบอทโหลดหลังจากหน้าเว็บพร้อมใช้งานเต็มที่ ให้ประสิทธิภาพที่ดีที่สุด

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

สำหรับเว็บไซต์ Gatsby ที่ดึงเนื้อหาจาก Contentful:

ติดตั้ง gatsby-plugin-load-script (ไม่จำเป็นแต่แนะนำ):
npm install gatsby-plugin-load-script
เพิ่มลงใน gatsby-config.js ของคุณ:
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 } } } ] }
หรือใช้ 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" /> ]) }
รีสตาร์ทเซิร์ฟเวอร์การพัฒนา Gatsby ของคุณ

วิธีที่ 3: React กับ Contentful

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

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

หรือใช้คอมโพเนนต์ React กับ 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
}

วิธีที่ 4: Vue/Nuxt กับ Contentful

สำหรับแอปพลิเคชัน Vue หรือ Nuxt.js ที่ใช้ Contentful:

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

Vue 3:

เพิ่มลงใน index.html ของคุณก่อน </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

วิธีที่ 5: HTML แบบคงที่กับ Contentful API

หากคุณใช้ Content Delivery API ของ Contentful กับ JavaScript ธรรมดา:

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

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

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

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

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

เอกสาร