วิธีเพิ่มแชทบอท AI Asyntai ลงใน Kirby
คู่มือทีละขั้นตอนสำหรับเว็บไซต์ Kirby CMS
HTML/Custom
WordPress
Shopify
WooCommerce
BigCommerce
Ecwid
Wix
Squarespace
Webflow
Weebly
HubSpot
Tilda
Adobe Experience Manager
Duda
Google Sites
Bludit
Plesk
Concrete CMS
Docusaurus
Hugo
Kentico
Volusion
Craft CMS
Contentful
Strapi
Joomla
Drupal
Magento
Blogger
Bitrix
TYPO3
PrestaShop
OpenCart
Ghost
Statamic
Umbraco
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: รับโค้ดฝังตัวของคุณ
ขั้นแรก ไปที่ แดชบอร์ด Asyntai ของคุณ แล้วเลื่อนลงไปที่ส่วน "โค้ดฝัง" คัดลอกโค้ดฝังเฉพาะของคุณ ซึ่งจะมีลักษณะดังนี้:
<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: เพิ่มลงใน Kirby Snippet (แนะนำ)
Kirby เป็น flat-file PHP CMS ที่ใช้ snippets สำหรับส่วนเทมเพลตที่นำกลับมาใช้ใหม่ได้ วิธีที่แนะนำคือสร้าง snippet เฉพาะสำหรับแชทบอท:
- สร้างไฟล์ snippet ใหม่ที่
site/snippets/asyntai-widget.php - วางโค้ดฝังลงในไฟล์:
<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>
จากนั้นรวม snippet ในเทมเพลตหลักของคุณ (เช่น site/templates/default.php) หรือเลย์เอาต์ ก่อนแท็กปิด </body>:
<?php snippet('asyntai-widget') ?>
</body>
</html>
เคล็ดลับ: หากคุณใช้เลย์เอาต์ร่วมหรือ footer snippet คุณสามารถเพิ่มการเรียก snippet ที่นั่นเพื่อให้ปรากฏในทุกหน้าโดยอัตโนมัติ ตัวอย่างเช่น เพิ่มลงใน footer snippet ก่อน </body>
วิธีทางเลือกที่ 1: เพิ่มลงใน Footer Snippet
หากเว็บไซต์ Kirby ของคุณใช้ footer snippet คุณสามารถเพิ่มโค้ดฝังโดยตรงที่นั่น:
- เปิด
site/snippets/footer.php(สร้างใหม่ถ้ายังไม่มี) - เพิ่มโค้ดฝังก่อนแท็กปิด
</body>:
<!-- Footer content -->
<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>
ตรวจสอบให้แน่ใจว่าเทมเพลตของคุณรวม footer snippet:
<?php snippet('footer') ?>
หมายเหตุ: หาก footer snippet ถูกรวมในเทมเพลตทั้งหมดอยู่แล้ว การเพิ่มแชทบอทที่นี่ช่วยให้ปรากฏในทุกหน้าโดยไม่ต้องแก้ไขไฟล์เทมเพลตแต่ละไฟล์
วิธีทางเลือกที่ 2: การใช้ปลั๊กอิน Kirby
คุณสามารถสร้างปลั๊กอิน Kirby เพื่อแทรกสคริปต์แชทบอทลงในทุกหน้าโดยอัตโนมัติโดยไม่ต้องแก้ไขเทมเพลตใด ๆ:
- สร้างไดเรกทอรีและไฟล์ปลั๊กอินที่
site/plugins/asyntai/index.php - เพิ่มโค้ดต่อไปนี้เพื่อใช้ hooks ของ Kirby ในการแทรกสคริปต์:
Kirby::plugin('custom/asyntai', [
'hooks' => [
'page.render:after' => function ($contentType, $body) {
$script = '<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>';
return str_replace('</body>', $script . '</body>', $body);
}
]
]);
เคล็ดลับ: วิธีปลั๊กอินเหมาะสมหากคุณต้องการให้แชทบอทโหลดในทุกหน้าโดยอัตโนมัติโดยไม่ต้องแก้ไขไฟล์เทมเพลตหรือ snippet ใด ๆ มันยังช่วยให้การรวมแชทบอทเป็นโมดูลและง่ายต่อการเปิดหรือปิด
วิธีทางเลือกที่ 3: การใช้ js() Helper ของ Kirby
Kirby มี js() helper ในตัวสำหรับโหลดไฟล์ JavaScript คุณสามารถใช้ในเทมเพลตหรือ snippet:
<?= js('https://asyntai.com/static/js/chat-widget.js', ['async' => true, 'data-asyntai-id' => 'YOUR_WIDGET_ID']) ?>
หรือเพิ่มสคริปต์โดยตรงในไฟล์ PHP เทมเพลตก่อน </body>:
<?php // site/templates/default.php ?>
<html>
<head>
<!-- head content -->
</head>
<body>
<!-- page content -->
<?php snippet('header') ?>
<main>
<?= $page->text()->kirbytext() ?>
</main>
<?php snippet('footer') ?>
<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>
หมายเหตุ: หากคุณใช้ js() helper ตรวจสอบให้แน่ใจว่าวางอยู่ภายในส่วน <body> ของเทมเพลตเพื่อให้แชทบอทโหลดได้อย่างถูกต้อง
ขั้นตอนที่ 3: ยืนยันการติดตั้ง
หลังจากเพิ่มโค้ดฝังลงในเว็บไซต์ Kirby แล้ว ให้เยี่ยมชมเว็บไซต์ในแท็บเบราว์เซอร์ใหม่หรือหน้าต่างส่วนตัว คุณควรเห็นปุ่มวิดเจ็ตแชทที่มุมขวาล่าง คลิกเพื่อตรวจสอบว่าเปิดและทำงานได้อย่างถูกต้อง
ไม่เห็นวิดเจ็ต? ตรวจสอบให้แน่ใจว่าคุณได้แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงจากแดชบอร์ด ตรวจสอบว่าไฟล์ snippet หรือปลั๊กอินถูกบันทึกในไดเรกทอรีที่ถูกต้อง หากใช้วิธีปลั๊กอิน ตรวจสอบให้แน่ใจว่าโครงสร้างไดเรกทอรีปลั๊กอินคือ site/plugins/asyntai/index.php ล้างแคชเบราว์เซอร์หรือทดสอบในโหมดส่วนตัว ตรวจสอบคอนโซลนักพัฒนาของเบราว์เซอร์ (F12) เพื่อดูข้อผิดพลาด