วิธีเพิ่มแชทบอท AI Asyntai ลงใน ExpressionEngine

แพลตฟอร์ม:

ExpressionEngine

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: เพิ่มลงในเลย์เอาต์เทมเพลต (แนะนำ)

วิธีที่ง่ายที่สุดในการเพิ่มแชทบอทในทุกหน้าคือการแก้ไขเทมเพลตเลย์เอาต์หลักในแผงควบคุม ExpressionEngine:

1. ในแผงควบคุม EE ไปที่ Developer > Templates > Template Groups
2. เปิดกลุ่มเทมเพลตหลักของคุณ (โดยปกติคือ "site") และแก้ไขเทมเพลตเลย์เอาต์ (หรือเทมเพลตที่ครอบคลุมทุกหน้า)
3. ค้นหาแท็กปิด </body>
4. วางโค้ดฝัง Asyntai ของคุณก่อนแท็ก </body>:
   <!-- Asyntai AI Chatbot --> <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>
5. บันทึกเทมเพลต

วิธีทางเลือกที่ 1: การใช้ EE Template Partials

Template Partials ของ ExpressionEngine อนุญาตให้คุณสร้างส่วนย่อยที่นำกลับมาใช้ใหม่ได้ซึ่งสามารถรวมข้ามเทมเพลต:

1. ไปที่ Developer > Templates > Template Partials
2. คลิก "New" เพื่อสร้าง partial ใหม่ชื่อ _asyntai_widget
3. วางโค้ดฝัง 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>
4. บันทึก partial
5. รวมไว้ในเทมเพลตเลย์เอาต์ของคุณก่อนแท็กปิด </body>:
   {embed="_asyntai_widget"} </body>

วิธีทางเลือกที่ 2: การใช้ HTML Header/Footer ของ EE

การตั้งค่า ExpressionEngine บางแบบมีส่วน footer ทั่วไปสำหรับเพิ่มสคริปต์:

1. ไปที่ Settings > Content & Design > Global Template Preferences
2. หากการตั้งค่า EE ของคุณมีส่วน footer ทั่วไป ให้วางโค้ดฝัง Asyntai ที่นั่น
3. หากไม่มีส่วน footer ทั่วไป ให้แก้ไขเทมเพลตเลย์เอาต์หลักของคุณโดยตรงและเพิ่มโค้ดฝังก่อนแท็กปิด </body>:
   <!-- Asyntai AI Chatbot --> <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>
4. บันทึกการเปลี่ยนแปลงของคุณ

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

สำหรับผู้ใช้ขั้นสูง คุณสามารถแทรกสคริปต์แชทบอทผ่านการตั้งค่า ExpressionEngine หรือโดยการสร้าง add-on แบบกำหนดเอง:

1. เข้าถึงไฟล์โปรเจกต์ ExpressionEngine ของคุณผ่าน FTP, SSH หรือตัวแก้ไขโค้ดของคุณ
2. ไปที่ไดเรกทอรี system/user/config/ และเปิด config.php
3. สำหรับการแทรก JavaScript แบบกำหนดเอง ให้พิจารณาสร้าง add-on/extension EE ง่าย ๆ ที่ hook เข้ากับ template_post_parse hook เพื่อแทรกสคริปต์เมื่อเรนเดอร์หน้า:
   // In your custom extension public function template_post_parse($final_template, $is_partial, $site_id) { $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>'; $final_template = str_replace('</body>', $script . '</body>', $final_template); return $final_template; }
4. แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงของคุณจากแดชบอร์ด

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

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