วิธีเพิ่มแชทบอท AI Asyntai ลงใน Contentful
คู่มือทีละขั้นตอนสำหรับเว็บไซต์ที่ใช้ Contentful
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: Contentful เป็น headless CMS หมายความว่าให้บริการเนื้อหาผ่าน API แต่ไม่มีฟรอนต์เอนด์ในตัว การติดตั้งแชทบอทขึ้นอยู่กับเฟรมเวิร์กฟรอนต์เอนด์ที่คุณใช้แสดงเนื้อหา Contentful เลือกวิธีด้านล่างที่ตรงกับการตั้งค่าของคุณ
ขั้นตอนที่ 1: รับโค้ดฝังตัวของคุณ
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>
หมายเหตุ: โค้ดด้านบนเป็นเพียงตัวอย่าง คุณต้องคัดลอกโค้ดฝังตัวเฉพาะของคุณจากแดชบอร์ดเนื่องจากมี 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>(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> - บันทึกไฟล์
หรือใช้คอมโพเนนต์ 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>(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>
วิธีที่ 5: HTML แบบคงที่กับ Contentful API
หากคุณใช้ Content Delivery API ของ Contentful กับ JavaScript ธรรมดา:
- เพิ่มโค้ดฝังลงในไฟล์ 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> - บันทึกไฟล์และอัปโหลดไปยังโฮสติ้งของคุณ
ขั้นตอนที่ 2: ตรวจสอบการติดตั้ง
หลังจากเพิ่มโค้ดแชทบอทลงในเว็บไซต์ที่ใช้ Contentful แล้ว ให้ deploy หรือเรียกใช้เซิร์ฟเวอร์การพัฒนาของคุณ เยี่ยมชมเว็บไซต์ของคุณในแท็บเบราว์เซอร์ใหม่หรือหน้าต่างส่วนตัว คุณควรเห็นปุ่มวิดเจ็ตแชทที่มุมขวาล่าง คลิกเพื่อตรวจสอบว่าเปิดและทำงานได้อย่างถูกต้อง
ไม่เห็นวิดเจ็ต? ตรวจสอบให้แน่ใจว่าคุณได้เพิ่มสคริปต์ลงในไฟล์ที่ถูกต้องสำหรับเฟรมเวิร์กของคุณ ตรวจสอบคอนโซลนักพัฒนาของเบราว์เซอร์เพื่อดูข้อผิดพลาด หากใช้การเรนเดอร์ฝั่งเซิร์ฟเวอร์ ให้แน่ใจว่าสคริปต์ทำงานฝั่งไคลเอนต์ ลองล้างแคชเบราว์เซอร์หรือดูในหน้าต่างส่วนตัว
ตัวแปรสภาพแวดล้อม: เพื่อความปลอดภัยและความยืดหยุ่นที่ดีขึ้น ให้พิจารณาเก็บ widget ID ของคุณในตัวแปรสภาพแวดล้อม (เช่น NEXT_PUBLIC_ASYNTAI_ID สำหรับ Next.js) แทนที่จะเขียนลงในโค้ดโดยตรง