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

คู่มือทีละขั้นตอนสำหรับเว็บไซต์ Kirby 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: เพิ่มลงใน 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) เพื่อดูข้อผิดพลาด