วิธีเพิ่มแชทบอท AI Asyntai ไปยัง October CMS

แพลตฟอร์ม:

October 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 ของคุณและเลื่อนลงไปที่ส่วน "Embed Code" คัดลอกโค้ดฝังตัวเฉพาะของคุณซึ่งจะมีลักษณะดังนี้:

ขั้นตอนที่ 2: เพิ่มไปยังเทมเพลต Layout (แนะนำ)

วิธีที่แนะนำในการเพิ่มแชทบอทคือแก้ไข layout เริ่มต้นของคุณใน October CMS backend:

1. เข้าสู่ระบบ October CMS backend ของคุณ
2. ไปที่ CMS > Layouts ในเมนูหลัก
3. เปิด layout เริ่มต้นของคุณ (โดยปกติคือ default.htm)
4. ค้นหาแท็กปิด </body> แท็กและ {% scripts %} placeholder
5. เพิ่มโค้ดฝัง Asyntai ของคุณก่อน {% scripts %} และ </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> {% scripts %} </body>
6. คลิก "Save" เพื่อใช้การเปลี่ยนแปลงของคุณ

Alternative Method 1: Using {% put scripts %} Block

คุณสามารถใช้ scripts placeholder ของ October CMS เพื่อฉีดแชทบอทจากหน้าหรือ partial:

1. เปิดหน้าหรือ partial ใดก็ได้ในตัวแก้ไข CMS
2. เพิ่มโค้ดต่อไปนี้โดยใช้ {% put scripts %} บล็อก:
   {% put scripts %} <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> {% endput %}
3. แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงของคุณจากแดชบอร์ด
4. คลิก "Save"

วิธีทางเลือกที่ 2: การใช้ Component PHP

หากคุณต้องการวิธีเชิงโปรแกรม คุณสามารถเพิ่มสคริปต์แชทบอทผ่าน component แบบกำหนดเอง:

1. สร้างหรือแก้ไข component ใน October CMS plugin ของคุณ
2. ในเมธอด onRun() ของ component ให้ใช้เมธอด addJs():
   public function onRun() { $this->addJs('https://asyntai.com/static/js/chat-widget.js', [ 'async' => true, 'data-asyntai-id' => 'YOUR_WIDGET_ID' ]); }
3. แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงของคุณ
4. ลงทะเบียน component ในหน้าที่คุณต้องการให้แชทบอทปรากฏ

วิธีทางเลือกที่ 3: การใช้ Partial

คุณสามารถสร้าง partial ที่นำกลับมาใช้ซ้ำได้สำหรับวิดเจ็ตแชทบอท:

1. ไปที่ CMS > Partials ใน October CMS backend
2. คลิก "+ Add" เพื่อสร้าง partial ใหม่
3. ตั้งชื่อเป็น asyntai-widget.htm
4. เพิ่มโค้ดฝังตัว Asyntai ของคุณไปยัง partial:
   <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. คลิก "Save"
6. เปิดเทมเพลต layout ของคุณและรวม partial ก่อน </body>:
   {% partial 'asyntai-widget' %}
7. บันทึก layout

ขั้นตอนที่ 3: ยืนยันการติดตั้ง

หลังจากบันทึกการเปลี่ยนแปลงแล้ว ให้เปิดเว็บไซต์ October CMS ของคุณในแท็บเบราว์เซอร์ใหม่หรือหน้าต่างไม่ระบุตัวตน คุณควรเห็นปุ่มวิดเจ็ตแชทที่มุมขวาล่าง คลิกเพื่อตรวจสอบว่าเปิดขึ้นมาและทำงานได้อย่างถูกต้อง