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

แพลตฟอร์ม:

Moodle

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: รับโค้ดฝังตัวของคุณ

ก่อนอื่น ไปที่แดชบอร์ด Asyntai ของคุณและเลื่อนลงไปที่ส่วน "Embed Code" คัดลอกโค้ดฝังตัวเฉพาะของคุณซึ่งจะมีลักษณะดังนี้:

ขั้นตอนที่ 2: การใช้ Additional HTML (แนะนำ)

Moodle มีฟีเจอร์ในตัวสำหรับเพิ่ม HTML/JavaScript แบบกำหนดเองไปยังทุกหน้า:

1. เข้าสู่ระบบเว็บไซต์ Moodle ของคุณในฐานะผู้ดูแลระบบ
2. ไปที่ Site administration
3. นำทางไปยัง Appearance → Additional HTML
4. เลื่อนลงไปที่ส่วน "Before BODY is closed"
5. วางโค้ดฝัง Asyntai ของคุณในพื้นที่ข้อความ
6. คลิก "Save changes"

ทางเลือก: การใช้การตั้งค่าธีม

ธีม Moodle หลายตัว (รวมถึง Boost และรุ่นย่อย) มีการตั้งค่าของตัวเองสำหรับเพิ่ม JavaScript แบบกำหนดเอง:

1. ไปที่ Site administration → Appearance → Themes
2. คลิก Theme settings สำหรับธีมที่ใช้งานอยู่ (เช่น Boost)
3. มองหาส่วน "Raw SCSS", "Additional HTML" หรือ "Custom JavaScript"
4. หากมีฟิลด์ JavaScript ให้วางโค้ดฝังตัว Asyntai ของคุณที่นั่น
5. คลิก "Save changes"
6. ล้างแคช: Site administration → Development → Purge caches

ทางเลือก: สร้าง Local Plugin

สำหรับการควบคุมที่มากขึ้น คุณสามารถสร้าง local plugin อย่างง่าย:

1. สร้างโครงสร้างโฟลเดอร์: local/asyntaichatbot/ ในการติดตั้ง Moodle ของคุณ
2. สร้าง version.php:
   <?php
defined('MOODLE_INTERNAL') || die();
$plugin->component = 'local_asyntaichatbot';
$plugin->version = 2024010100;
$plugin->requires = 2022041900;
3. สร้าง lib.php:
   <?php
defined('MOODLE_INTERNAL') || die();

function local_asyntaichatbot_before_footer() {
  global $PAGE;
  $PAGE->requires->js_call_amd('local_asyntaichatbot/loader', 'init');
}
4. สร้างโฟลเดอร์ amd/src/ และไฟล์ loader.js:
   define([], function() {
  return {
    init: 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);
    }
  };
});
5. แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงของคุณ
6. ไปที่ Site administration → Notifications เพื่อติดตั้ง plugin
7. ล้างแคชหลังการติดตั้ง

ทางเลือก: แก้ไขเทมเพลตส่วนท้ายของธีม

คุณยังสามารถแก้ไขเทมเพลตส่วนท้ายของธีมโดยตรง:

1. นำทางไปยังโฟลเดอร์ธีมของคุณ: theme/YOUR_THEME/
2. ค้นหาไฟล์ layout (เช่น layout/columns2.php หรือ templates/columns2.mustache)
3. ค้นหาแท็กปิด </body> หรือส่วนท้าย
4. เพิ่มโค้ดฝังตัว Asyntai ของคุณก่อน </body>
5. บันทึกไฟล์
6. ล้างแคช Moodle

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

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