วิธีเพิ่มแชทบอท AI Asyntai ลงใน DatoCMS
คู่มือทีละขั้นตอนสำหรับเว็บไซต์ที่ใช้ 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
Headless CMS: DatoCMS เป็น headless CMS ที่ส่งมอบเนื้อหาผ่าน API โค้ดแชทบอทต้องถูกเพิ่มลงในแอปพลิเคชันฟรอนต์เอนด์ของคุณ (Next.js, Gatsby, Nuxt ฯลฯ) ไม่ใช่ในแดชบอร์ด DatoCMS
ขั้นตอนที่ 1: รับโค้ดฝังตัวของคุณ
ก่อนอื่น ไปที่แดชบอร์ด Asyntai ของคุณและเลื่อนลงไปที่ส่วน "Embed Code" คัดลอกโค้ดฝังตัวเฉพาะของคุณซึ่งจะมีลักษณะดังนี้:
<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>
หมายเหตุ: โค้ดด้านบนเป็นเพียงตัวอย่าง คุณต้องคัดลอกโค้ดฝังตัวเฉพาะของคุณจากแดชบอร์ดเนื่องจากมี widget ID ส่วนตัวของคุณ
ขั้นตอนที่ 2: เพิ่มลงในฟรอนต์เอนด์ Next.js (พบมากที่สุด)
Next.js เป็นเฟรมเวิร์กฟรอนต์เอนด์ที่นิยมใช้กับ DatoCMS มากที่สุด เพิ่มแชทบอทโดยใช้คอมโพเนนต์ Script:
App Router (app/layout.tsx):
- เปิดไฟล์เลย์เอาต์หลักของคุณ:
app/layout.tsx - นำเข้าคอมโพเนนต์ 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="afterInteractive"
/>
</body>
</html>
)
} - แทนที่
YOUR_WIDGET_IDด้วย widget ID จริงของคุณ - บันทึกไฟล์และรีสตาร์ทเซิร์ฟเวอร์การพัฒนาของคุณ
Pages Router (pages/_app.tsx):
- เปิดไฟล์
pages/_app.tsxของคุณ - เพิ่มคอมโพเนนต์ 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"
/>
</>
)
}
เคล็ดลับ: การใช้ strategy="afterInteractive" ช่วยให้แชทบอทโหลดทันทีหลังจากหน้าเว็บพร้อมใช้งาน ให้สมดุลที่ดีระหว่างประสิทธิภาพและความพร้อมใช้งาน
วิธีทางเลือกที่ 1: ฟรอนต์เอนด์ Gatsby
สำหรับเว็บไซต์ Gatsby ที่ดึงเนื้อหาจาก DatoCMS ผ่าน gatsby-source-datocms:
- สร้างหรือแก้ไข
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 ของคุณ
วิธีทางเลือกที่ 2: ฟรอนต์เอนด์ Nuxt.js
สำหรับแอปพลิเคชัน Nuxt.js ที่ใช้เนื้อหา DatoCMS:
- เพิ่มลงใน
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'
}
]
}
}
}) - แทนที่
YOUR_WIDGET_IDด้วย widget ID จริงของคุณ - รีสตาร์ทเซิร์ฟเวอร์การพัฒนา Nuxt ของคุณ
วิธีทางเลือกที่ 3: HTML ธรรมดา / เว็บไซต์แบบคงที่
หากคุณใช้ Content Delivery API ของ DatoCMS กับเว็บไซต์ HTML แบบคงที่หรือตัวสร้างเว็บไซต์แบบคงที่:
- เพิ่มโค้ดฝังลงในไฟล์ HTML ของคุณก่อนแท็กปิด
</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> - แทนที่
YOUR_WIDGET_IDด้วย widget ID จริงของคุณ - บันทึกไฟล์และอัปโหลดไปยังโฮสติ้งของคุณ
วิธีทางเลือกที่ 4: React (Vite/CRA)
สำหรับแอป React มาตรฐาน (Create React App, Vite) ที่ใช้ DatoCMS API:
ตัวเลือก A: เพิ่มลงใน public/index.html
- เปิดไฟล์
public/index.html(CRA) หรือindex.html(Vite) ของคุณ - เพิ่มโค้ดฝังก่อนแท็กปิด
</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> - บันทึกไฟล์
ตัวเลือก B: 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
} - นำเข้าและเรนเดอร์คอมโพเนนต์ใน
App.jsxหรือเลย์เอาต์หลักของคุณ
ขั้นตอนที่ 3: Deploy และตรวจสอบ
หลังจากเพิ่มโค้ดแชทบอทลงในเว็บไซต์ที่ใช้ DatoCMS แล้ว ให้ deploy หรือเรียกใช้เซิร์ฟเวอร์การพัฒนาของคุณ เยี่ยมชมเว็บไซต์ของคุณในแท็บเบราว์เซอร์ใหม่หรือหน้าต่างส่วนตัว คุณควรเห็นปุ่มวิดเจ็ตแชทที่มุมขวาล่าง คลิกเพื่อตรวจสอบว่าเปิดและทำงานได้อย่างถูกต้อง
ไม่เห็นวิดเจ็ต? ตรวจสอบให้แน่ใจว่าคุณได้เพิ่มสคริปต์ลงในไฟล์ที่ถูกต้องสำหรับเฟรมเวิร์กของคุณ ตรวจสอบคอนโซลนักพัฒนาของเบราว์เซอร์เพื่อดูข้อผิดพลาด หากใช้การเรนเดอร์ฝั่งเซิร์ฟเวอร์ ให้แน่ใจว่าสคริปต์ทำงานฝั่งไคลเอนต์ ลองล้างแคชเบราว์เซอร์หรือดูในหน้าต่างส่วนตัว
ตัวแปรสภาพแวดล้อม: เพื่อความปลอดภัยและความยืดหยุ่นที่ดีขึ้น ให้พิจารณาเก็บ widget ID ของคุณในตัวแปรสภาพแวดล้อม (เช่น NEXT_PUBLIC_ASYNTAI_ID สำหรับ Next.js หรือ VITE_ASYNTAI_ID สำหรับ Vite) แทนที่จะเขียนลงในโค้ดโดยตรง