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

คู่มือทีละขั้นตอนสำหรับเว็บไซต์ ProcessWire CMS

แพลตฟอร์ม:

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

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

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

หมายเหตุ: โค้ดด้านบนเป็นเพียงตัวอย่าง คุณต้องคัดลอกโค้ดฝังตัวเฉพาะของคุณจากแดชบอร์ดเนื่องจากมี widget ID ส่วนตัวของคุณ

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

ProcessWire ใช้ไฟล์เทมเพลต PHP ที่อยู่ในไดเรกทอรี site/templates/ วิธีที่ง่ายที่สุดคือเพิ่มโค้ดฝังตัวโดยตรงไปยังไฟล์เทมเพลตหลักของคุณ:

เข้าถึงไฟล์การติดตั้ง ProcessWire ของคุณผ่าน FTP, SSH หรือตัวจัดการไฟล์
นำทางไปยัง site/templates/
เปิดไฟล์เทมเพลตหลักของคุณ — โดยปกติคือ _main.php หรือ basic-page.php ขึ้นอยู่กับโปรไฟล์เว็บไซต์ของคุณ
หากคุณใช้ delayed output strategy (ค่าเริ่มต้นสำหรับโปรไฟล์เว็บไซต์ส่วนใหญ่) ให้เปิด _main.php
ค้นหาแท็กปิด </body>
วางโค้ดฝังตัว Asyntai ของคุณก่อนหน้านี้:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>

เคล็ดลับ: การวางสคริปต์ก่อนแท็กปิด </body> ทำให้แชทบอทโหลดหลังจากเนื้อหาหน้า ซึ่งแนะนำสำหรับประสิทธิภาพที่ดีที่สุดและจะไม่ทำให้การแสดงผลหน้าช้าลง

วิธีทางเลือกที่ 1: การใช้ _foot.inc หรือไฟล์ Append _main.php

หากเว็บไซต์ ProcessWire ของคุณใช้วิธี append file (พบบ่อยในโปรไฟล์เว็บไซต์หลายตัว) คุณสามารถเพิ่มโค้ดฝังตัวไปยัง footer include ที่ใช้ร่วมกัน:

นำทางไปยัง site/templates/
เปิด _foot.inc (หรือไฟล์ footer include ที่เทียบเท่าของคุณ)
วางโค้ดฝังตัว Asyntai ของคุณก่อนแท็กปิด </body>
บันทึกไฟล์

delayed output strategy ของ ProcessWire โดยทั่วไปทำงานกับไฟล์สำคัญสามไฟล์:

_init.php — รันก่อนทุกเทมเพลต กำหนดค่าตัวแปรเริ่มต้น
ไฟล์เทมเพลตของคุณ (เช่น basic-page.php) — เติมตัวแปรเนื้อหา
_main.php — แสดงผล HTML markup สุดท้ายโดยใช้ตัวแปรเหล่านั้น

หากเว็บไซต์ของคุณใช้วิธีนี้ การเพิ่มสคริปต์ไปยัง _main.php ก่อน </body> จะทำให้ปรากฏในทุกหน้า

หมายเหตุ: ชื่อไฟล์ _init.php และ _main.php ถูกกำหนดค่าใน site/config.php ของคุณผ่านการตั้งค่า $config->prependTemplateFile และ $config->appendTemplateFile ตรวจสอบ config ของคุณหากไฟล์มีชื่อต่างออกไป

วิธีทางเลือกที่ 2: การใช้ $config->scripts Array

ProcessWire มี $config->scripts FilenameArray ที่คุณสามารถใช้จัดการไฟล์ JavaScript ใน _init.php หรือไฟล์เทมเพลตแต่ละตัว ให้เพิ่ม:

<?php
$config->scripts->add('https://asyntai.com/static/js/chat-widget.js');
?>

จากนั้นใน _main.php (หรือ footer include) ของคุณ ให้วนลูปผ่าน scripts array เพื่อแสดงผล:

<?php foreach($config->scripts as $file): ?>
<script src="<?php echo $file; ?>"></script>
<?php endforeach; ?>

สำคัญ: วิธี $config->scripts จัดการ attribute src ของสคริปต์ แต่ attribute data-asyntai-id ต้องจัดการแยกต่างหาก คุณจะต้องเพิ่ม data attribute ด้วยตนเองในผลลัพธ์ของลูป หรือใช้วิธีแท็กสคริปต์โดยตรงจากขั้นตอนที่ 2 แทนสำหรับการตั้งค่าที่ง่ายที่สุด

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

สำหรับวิธีขั้นสูงกว่า คุณสามารถใช้ระบบ hook ของ ProcessWire เพื่อฉีดสคริปต์แชทบอทเข้าไปในทุกหน้าโดยอัตโนมัติ เพิ่มโค้ดต่อไปนี้ไปยังไฟล์ site/ready.php ของคุณ:

<?php
$wire->addHookAfter('Page::render', function(HookEvent $event) {
    $html = $event->return;
    $script = '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
    $html = str_replace('</body>', $script . '</body>', $html);
    $event->return = $html;
});
?>

Hook นี้ดักจับผลลัพธ์ HTML ที่แสดงผลของทุกหน้าและฉีดสคริปต์ Asyntai ก่อนแท็กปิด </body> โดยอัตโนมัติ

เคล็ดลับ: วิธี hook ready.php เหมาะอย่างยิ่งหากคุณต้องการแชทบอทในทุกหน้าโดยไม่ต้องแก้ไขไฟล์เทมเพลตใดๆ นอกจากนี้ยังคงอยู่หลังการเปลี่ยนแปลงเทมเพลตและการอัปเดตธีมเนื่องจากอยู่นอกไฟล์เทมเพลต

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

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

ไม่เห็นวิดเจ็ต? ตรวจสอบให้แน่ใจว่าคุณบันทึกไฟล์ที่แก้ไขทั้งหมดแล้ว ลองล้างแคชเบราว์เซอร์หรือดูในหน้าต่างไม่ระบุตัวตน หากเปิดใช้งานแคชเทมเพลตของ ProcessWire คุณอาจต้องล้างโดยไปที่ Modules → Core → Template Engine Cache หรือเพิ่ม ?nocache=1 ใน URL ของคุณ ตรวจสอบด้วยว่าไฟล์เทมเพลตของคุณถูกใช้จริงโดยหน้าที่คุณกำลังดู