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

คู่มือทีละขั้นตอนสำหรับ SilverStripe CMS

แพลตฟอร์ม:

ขั้นตอนที่ 1: รับโค้ดฝังตัวของคุณ

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

<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: เพิ่มไปยังเทมเพลต SilverStripe (แนะนำ)

วิธีที่ง่ายที่สุดในการเพิ่มแชทบอทไปยังเว็บไซต์ SilverStripe ของคุณคือแก้ไขไฟล์เทมเพลตหลักของธีมโดยตรง:

เปิดไฟล์เทมเพลตของธีม (เช่น themes/yourtheme/templates/Page.ss)
เพิ่มโค้ดฝังตัวก่อนแท็กปิด </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>
  </body>
</html>

บันทึกไฟล์และล้างแคช SilverStripe โดยเพิ่ม ?flush=1 ต่อท้าย URL เว็บไซต์ของคุณ

เคล็ดลับ: SilverStripe ใช้ไฟล์เทมเพลต .ss พร้อมระบบ template inheritance การวางสคริปต์ในเทมเพลต Page.ss ฐานทำให้แชทบอทปรากฏในทุกหน้าของเว็บไซต์ หากธีมของคุณใช้โฟลเดอร์ Includes คุณยังสามารถวางสคริปต์ในไฟล์ include ที่ใช้ร่วมกัน

วิธีทางเลือกที่ 1: การใช้คลาส Requirements ใน Controller

SilverStripe มีคลาส Requirements สำหรับจัดการ JavaScript และ CSS dependencies เชิงโปรแกรม นี่เป็นวิธีที่แนะนำสำหรับนักพัฒนา:

เปิด app/src/PageController.php (หรือไฟล์ page controller ของคุณ)
ในเมธอด init() ให้ใช้ Requirements::customScript() เพื่อโหลดวิดเจ็ตแบบไดนามิก:

use SilverStripe\View\Requirements;

class PageController extends \SilverStripe\CMS\Controllers\ContentController
{
    protected function init()
    {
        parent::init();
        Requirements::customScript(<<<JS
            var script = document.createElement('script');
            script.src = 'https://asyntai.com/static/js/chat-widget.js';
            script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
            script.async = true;
            document.head.appendChild(script);
        JS);
    }
}

บันทึกไฟล์และล้างแคชโดยเข้าชม yourdomain.com?flush=1

หมายเหตุ: คลาส Requirements เป็นวิธีมาตรฐานของ SilverStripe ในการรวมสคริปต์และสไตล์ชีต การใช้ Requirements::customScript() แสดงผล JavaScript แบบ inline วิธีนี้ทำให้วิดเจ็ตถูกโหลดในทุกหน้าที่จัดการโดย PageController ของคุณ

วิธีทางเลือกที่ 2: การใช้ Requirements ในเทมเพลต

คุณยังสามารถใช้ template syntax ของ SilverStripe เพื่อ require ไฟล์ JavaScript โดยตรงในเทมเพลต .ss ของคุณ:

เปิดไฟล์เทมเพลตของธีม (เช่น themes/yourtheme/templates/Page.ss)
เพิ่มโค้ดต่อไปนี้ใกล้ด้านล่างของเทมเพลต ก่อน </body>:

<% require javascript("https://asyntai.com/static/js/chat-widget.js") %>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var scripts = document.querySelectorAll('script[src*="chat-widget.js"]');
        scripts.forEach(function(s) {
            s.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
        });
    });
</script>
</body>

เคล็ดลับ: syntax <% require %> เป็นวิธีระดับเทมเพลตของ SilverStripe ในการรวม assets โปรดทราบว่าวิธีนี้ไม่รองรับการเพิ่ม custom data attribute ไปยังแท็กสคริปต์โดยกำเนิด ดังนั้นเราจึงเพิ่มข้อมูลเริ่มต้นขนาดเล็กเพื่อตั้งค่า widget ID

วิธีทางเลือกที่ 3: การใช้ SilverStripe Config (YAML)

สำหรับวิธีที่ขับเคลื่อนด้วยการกำหนดค่า คุณสามารถใช้การกำหนดค่า YAML ของ SilverStripe เพื่อเพิ่ม requirements ทั่วโลก:

เปิดหรือสร้างไฟล์ app/_config/app.yml
เพิ่มการกำหนดค่าเพื่อรวมวิดเจ็ตผ่าน custom extension หรือการตั้งค่า controller:

# app/_config/app.yml
---
Name: asyntai-chatbot
After: '#rootroutes'
---
SilverStripe\Core\Injector\Injector:
  AsyntaiChatbotExtension:
    class: App\Extensions\AsyntaiChatbotExtension

สร้างไฟล์ extension app/src/Extensions/AsyntaiChatbotExtension.php:

namespace App\Extensions;

use SilverStripe\Core\Extension;
use SilverStripe\View\Requirements;

class AsyntaiChatbotExtension extends Extension
{
    public function onAfterInit()
    {
        Requirements::customScript("
            var script = document.createElement('script');
            script.src = 'https://asyntai.com/static/js/chat-widget.js';
            script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
            script.async = true;
            document.head.appendChild(script);
        ");
    }
}

ใช้ extension กับ PageController ของคุณใน app/_config/app.yml:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

รัน ?flush=1 เพื่อสร้างแคชการกำหนดค่าใหม่

หมายเหตุ: การใช้การกำหนดค่า YAML และ extensions เป็นวิธี SilverStripe ที่เป็นโมดูลาร์ที่สุด ช่วยแยกการรวมแชทบอทออกจากตรรกะ controller หลักและทำให้เปิดหรือปิดได้ง่ายโดยไม่ต้องเปลี่ยนโค้ด

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

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

ไม่เห็นวิดเจ็ต? ตรวจสอบให้แน่ใจว่าคุณล้างแคชโดยเพิ่ม ?flush=1 ต่อท้าย URL เว็บไซต์ ตรวจสอบว่าคุณเปลี่ยน YOUR_WIDGET_ID เป็น widget ID จริงของคุณจากแดชบอร์ด ล้างแคชเบราว์เซอร์หรือดูในโหมดไม่ระบุตัวตน เปิดคอนโซลเบราว์เซอร์ (F12) เพื่อตรวจสอบข้อผิดพลาด JavaScript หากใช้คลาส Requirements ให้ตรวจสอบว่าเมธอด init() ของ PageController ถูกเรียกอย่างถูกต้อง