Cách Thêm Chatbot AI Asyntai vào DatoCMS
Hướng dẫn từng bước cho trang web chạy bằng DatoCMS
HTML/Custom
WordPress
Shopify
WooCommerce
BigCommerce
Ecwid
Wix
Squarespace
Webflow
Weebly
HubSpot
Tilda
Adobe Experience Manager
Duda
Google Sites
Bludit
Plesk
Concrete CMS
Craft CMS
Contentful
Docusaurus
Strapi
Joomla
Kentico
Drupal
Magento
Blogger
Bitrix
TYPO3
PrestaShop
OpenCart
Ghost
Hugo
Statamic
Umbraco
Volusion
Moodle
SilverStripe
Grav
October CMS
ProcessWire
Sanity
ExpressionEngine
Sylius
Backdrop CMS
MODX
Bagisto
PayloadCMS
e107
CrafterCMS
Kirby
MedusaCMS
DatoCMS
GoDaddy
Framer
Bubble
Carrd
Jimdo
Strikingly
Kajabi
Teachable
Thinkific
ClickFunnels
Hostinger
Unbounce
Leadpages
Systeme.io
Instapage
CMS Headless: DatoCMS là CMS headless cung cấp nội dung qua API. Mã chatbot cần được thêm vào ứng dụng frontend (Next.js, Gatsby, Nuxt, v.v.), không phải vào bảng điều khiển DatoCMS.
Bước 1: Lấy Mã Nhúng của Bạn
Đầu tiên, đi đến Bảng điều khiển Asyntai và cuộn xuống phần "Mã Nhúng". Sao chép mã nhúng duy nhất của bạn sẽ trông như thế này:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></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.
Bước 2: Thêm vào Frontend Next.js (Phổ biến nhất)
Next.js là framework frontend phổ biến nhất được sử dụng với DatoCMS. Thêm chatbot bằng thành phần Script:
App Router (app/layout.tsx):
- Mở tệp bố cục gốc:
app/layout.tsx - 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="afterInteractive"
/>
</body>
</html>
)
} - Thay thế
YOUR_WIDGET_IDbằ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
Pages Router (pages/_app.tsx):
- Mở tệp
pages/_app.tsx - Thêm thành phần Script:
import Script from 'next/script'
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Component {...pageProps} />
<Script
src="https://asyntai.com/static/js/chat-widget.js"
data-asyntai-id="YOUR_WIDGET_ID"
strategy="afterInteractive"
/>
</>
)
}
Mẹo: Sử dụng strategy="afterInteractive" đảm bảo chatbot tải ngay sau khi trang trở nên tương tác, cung cấp sự cân bằng tốt giữa hiệu suất và tính sẵn sàng.
Phương pháp Thay thế 1: Frontend Gatsby
Cho trang Gatsby lấy nội dung từ DatoCMS qua gatsby-source-datocms:
- Tạo hoặc chỉnh sửa
gatsby-ssr.jstrong thư mục gốc dự án: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"
/>
])
} - Thay thế
YOUR_WIDGET_IDbằng ID tiện ích thực tế của bạn - Khởi động lại máy chủ phát triển Gatsby
Phương pháp Thay thế 2: Frontend Nuxt.js
Dành cho ứng dụng Nuxt.js sử dụng nội dung DatoCMS:
- 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'
}
]
}
}
}) - Thay thế
YOUR_WIDGET_IDbằng ID tiện ích thực tế của bạn - Khởi động lại máy chủ phát triển Nuxt
Phương pháp Thay thế 3: HTML Thuần / Trang Tĩnh
Nếu bạn sử dụng API Content Delivery của DatoCMS với trang HTML tĩnh hoặc trình tạo trang tĩnh:
- Thêm mã nhúng vào tệp HTML trước thẻ đóng
</body>:<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> - Thay thế
YOUR_WIDGET_IDbằng ID tiện ích thực tế của bạn - Lưu tệp và tải lên hosting
Phương pháp Thay thế 4: React (Vite/CRA)
Cho ứng dụng React tiêu chuẩn (Create React App, Vite) sử dụng DatoCMS API:
Lựa chọn A: Thêm vào public/index.html
- Mở tệp
public/index.html(CRA) hoặcindex.html(Vite) - Thêm mã nhúng trước thẻ đóng
</body>:<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> - Lưu tệp
Lựa chọn B: useEffect trong Thành phần Gốc
- Tạo thành phần chatbot hoặc thêm vào thành phần gốc:
// 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
} - Import và hiển thị thành phần trong
App.jsxhoặc bố cục gốc
Bước 3: Triển khai và Xác minh
Sau khi thêm mã chatbot vào trang chạy bằng DatoCMS, 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 hoặc VITE_ASYNTAI_ID cho Vite) thay vì mã hóa cứng.