วิธีเพิ่มแชทบอท AI Asyntai ลงในเว็บไซต์ใด ๆ
คู่มือสากลสำหรับ HTML, เว็บไซต์แบบกำหนดเอง และตัวสร้างเว็บไซต์แบบคงที่
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
ขั้นตอนที่ 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 ส่วนตัวของคุณ
ขั้นตอนที่ 2: เพิ่มลงในไฟล์ HTML ของคุณ
วิธีที่ง่ายที่สุดในการเพิ่มแชทบอทคือวางโค้ดฝังลงในไฟล์ HTML ของคุณโดยตรง:
- เปิดไฟล์ HTML ของคุณในตัวแก้ไขข้อความ
- ค้นหาแท็กปิด
</body> - วางโค้ดฝังตัว Asyntai ของคุณก่อนแท็ก
</body> - บันทึกไฟล์
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<!-- Your website content -->
<!-- Asyntai Chatbot - Add before closing body tag -->
<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>
</body>
</html>
เคล็ดลับ: การเพิ่มสคริปต์ก่อนแท็กปิด </body> ช่วยให้โหลดหลังจากเนื้อหาหน้าเว็บ ซึ่งเหมาะสมที่สุดสำหรับประสิทธิภาพและจะไม่ทำให้หน้าเว็บช้าลง
สำหรับเว็บไซต์หลายหน้า
หากเว็บไซต์ของคุณมีหลายหน้า HTML คุณมีหลายตัวเลือก:
ตัวเลือก A: เพิ่มในแต่ละหน้า
เพิ่มโค้ดฝังลงในแต่ละไฟล์ HTML ที่คุณต้องการให้แชทบอทปรากฏ
ตัวเลือก B: ใช้ Footer Include ร่วม
หากคุณใช้ server-side includes (SSI), PHP includes หรือที่คล้ายกัน:
- สร้างไฟล์ footer.html (หรือ footer.php)
- เพิ่มโค้ดฝัง Asyntai ลงในไฟล์นี้
- รวมไฟล์ footer นี้ในทุกหน้าของคุณ:
<!-- For PHP -->
<?php include 'footer.php'; ?>
<!-- For SSI -->
<!--#include virtual="/footer.html" -->
ตัวเลือก C: การโหลด JavaScript แบบไดนามิก
สร้างไฟล์ JavaScript เดียวที่โหลดแชทบอทในทุกหน้า:
- สร้างไฟล์ชื่อ asyntai-loader.js:
(function() {
var script = document.createElement('script');
script.async = true;
script.src = 'https://asyntai.com/static/js/chat-widget.js';
script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
document.body.appendChild(script);
})(); - แทนที่
YOUR_WIDGET_IDด้วย widget ID จริงของคุณ - รวมสคริปต์นี้ในทุกหน้าของคุณ:
<script src="/js/asyntai-loader.js"></script>
สำหรับตัวสร้างเว็บไซต์แบบคงที่
หากคุณใช้ตัวสร้างเว็บไซต์แบบคงที่ ให้เพิ่มโค้ดฝังลงในเลย์เอาต์หรือเทมเพลตหลักของคุณ:
เพิ่มลงใน _includes/footer.html หรือ _layouts/default.html
เพิ่มลงใน layouts/partials/footer.html หรือ layouts/_default/baseof.html
เพิ่มลงใน gatsby-browser.js หรือใช้ gatsby-ssr.js
เพิ่มลงใน pages/_document.js หรือใช้คอมโพเนนต์ next/script
เพิ่มลงใน nuxt.config.js ภายใต้ head.script
เพิ่มลงในเลย์เอาต์หลักของคุณใน _includes/
เพิ่มลงใน src/layouts/Layout.astro ก่อน </body>
เพิ่มลงใน .vuepress/config.js ภายใต้ head
สำหรับแอป React / Vue / Angular
สำหรับแอปพลิเคชันหน้าเดียว (SPA) คุณสามารถเพิ่มสคริปต์ลงใน index.html หรือโหลดแบบไดนามิก:
React (วิธี index.html)
<!-- In public/index.html, before </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)
// In your App.js or a component
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);
}, []);
Vue (ใน main.js หรือ App.vue)
// In mounted() or onMounted()
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);
Angular (ใน index.html)
<!-- In src/index.html, before </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>
ขั้นตอนที่ 3: ยืนยันการติดตั้ง
หลังจากเพิ่มโค้ดแล้ว ให้เปิดเว็บไซต์ของคุณในแท็บเบราว์เซอร์ใหม่หรือหน้าต่างส่วนตัว คุณควรเห็นปุ่มวิดเจ็ตแชทที่มุมขวาล่าง คลิกเพื่อตรวจสอบว่าเปิดและทำงานได้อย่างถูกต้อง
ไม่เห็นวิดเจ็ต? ตรวจสอบว่าสคริปต์วางอย่างถูกต้องก่อนแท็ก </body> ตรวจสอบให้แน่ใจว่าไม่มีข้อผิดพลาด JavaScript ในคอนโซลเบราว์เซอร์ (กด F12 เพื่อเปิดเครื่องมือนักพัฒนา) ลองล้างแคชเบราว์เซอร์หรือดูในหน้าต่างส่วนตัว
สำคัญ: แชทบอทต้องการให้เว็บไซต์ของคุณถูกให้บริการผ่าน HTTP หรือ HTTPS (ไม่ใช่เปิดโดยตรงเป็นไฟล์) หากคุณทดสอบในเครื่อง ให้ใช้เซิร์ฟเวอร์การพัฒนาในเครื่อง