Cách Thêm Chatbot AI Asyntai vào Contentful

Hướng dẫn từng bước cho trang web chạy bằng Contentful

Nền tảng:

CMS Headless: Contentful là CMS headless, nghĩa là nó cung cấp nội dung qua API nhưng không bao gồm giao diện tích hợp. Việc cài đặt chatbot phụ thuộc vào framework frontend bạn đang sử dụng để hiển thị nội dung Contentful. Chọn phương pháp phù hợp với thiết lập của bạn.

Bước 1: Lấy Mã Nhúng của Bạn

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Lưu ý: Mã ở trên chỉ là ví dụ. Bạn phải sao chép mã nhúng duy nhất của riêng mình từ Bảng điều khiển vì nó chứa ID tiện ích cá nhân của bạn.

Phương pháp 1: Next.js với Contentful (Khuyến nghị)

Nếu bạn sử dụng Next.js để hiển thị nội dung Contentful, thêm chatbot bằng thành phần Script:

Mở tệp bố cục chính: app/layout.tsx (App Router) hoặc pages/_app.tsx (Pages Router)
Import thành phần Script và thêm 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> ) }
Thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế của bạn
Lưu tệp và khởi động lại máy chủ phát triển

Mẹo: Sử dụng strategy="lazyOnload" đảm bảo chatbot tải sau khi trang hoàn toàn tương tác, cung cấp hiệu suất tốt nhất.

Phương pháp 2: Gatsby với Contentful

Cho trang Gatsby lấy nội dung từ Contentful:

Cài đặt gatsby-plugin-load-script (tùy chọn nhưng khuyến nghị):
npm install gatsby-plugin-load-script
Thêm vào 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 } } } ] }
Ngoài ra, sử dụng 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" /> ]) }
Khởi động lại máy chủ phát triển Gatsby

Phương pháp 3: React với Contentful

Cho ứng dụng React tiêu chuẩn (Create React App, Vite, v.v.) sử dụng Contentful:

Mở tệp public/index.html
Thêm mã nhúng trước thẻ đóng </body>:
<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
Lưu tệp

Hoặc sử dụng thành phần React với 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
}

Phương pháp 4: Vue/Nuxt với Contentful

Cho ứng dụng Vue hoặc Nuxt.js sử dụng Contentful:

Nuxt 3:

Thêm vào 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:

Thêm vào index.html trước </body>:
<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Phương pháp 5: HTML Tĩnh với API Contentful

Nếu bạn sử dụng API Content Delivery của Contentful với JavaScript thuần:

Thêm mã nhúng vào tệp HTML trước thẻ đóng </body>:
<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
Lưu tệp và tải lên hosting

Bước 2: Xác minh Cài đặt

Sau khi thêm mã chatbot vào trang chạy bằng Contentful, triển khai hoặc chạy máy chủ phát triển. Truy cập trang web trong tab trình duyệt mới hoặc cửa sổ ẩn danh. Bạn sẽ thấy nút tiện ích trò chuyện ở góc dưới bên phải. Nhấp vào nó để đảm bảo nó mở và hoạt động chính xác.

Không thấy tiện ích? Đảm bảo bạn đã thêm tập lệnh vào đúng tệp cho framework. Kiểm tra bảng điều khiển nhà phát triển trình duyệt để tìm lỗi. Nếu sử dụng render phía máy chủ, đảm bảo tập lệnh chạy ở phía client. Thử xóa bộ nhớ đệm trình duyệt hoặc xem trong cửa sổ ẩn danh.

Biến Môi trường: Để bảo mật và linh hoạt hơn, hãy cân nhắc lưu trữ ID tiện ích trong biến môi trường (ví dụ: NEXT_PUBLIC_ASYNTAI_ID cho Next.js) thay vì mã hóa cứng.

Tài liệu