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

คู่มือทีละขั้นตอนสำหรับ Grav 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: เพิ่มลงในเทมเพลตธีม Grav (แนะนำ)

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

ไปที่ไดเรกทอรี user/themes/yourtheme/templates/ ของโปรเจกต์ Grav และเปิด default.html.twig (หรือเทมเพลตหลักที่ธีมของคุณใช้)
เพิ่มโค้ดฝัง Asyntai ของคุณก่อนแท็กปิด </body>:

<!-- user/themes/yourtheme/templates/default.html.twig -->
...
    <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>

บันทึกไฟล์

เคล็ดลับ: Grav ใช้ Twig เป็นเครื่องมือเทมเพลต เทมเพลตหลักโดยทั่วไปคือ default.html.twig หรือ partials/base.html.twig ขึ้นอยู่กับธีมของคุณ ตรวจสอบโครงสร้างธีมเพื่อค้นหาไฟล์ที่ถูกต้องที่มีแท็กปิด </body>

วิธีทางเลือกที่ 1: การใช้ Grav Asset Manager

Asset Manager ในตัวของ Grav ให้วิธีที่สะอาดในการเพิ่ม JavaScript assets ผ่าน Twig:

เปิดเทมเพลต Twig หลักของธีมคุณ (เช่น user/themes/yourtheme/templates/partials/base.html.twig)
ใช้ Asset Manager เพื่อเพิ่ม JavaScript:

{% do assets.addJs('https://asyntai.com/static/js/chat-widget.js', {group: 'bottom', loading: 'async', 'data-asyntai-id': 'YOUR_WIDGET_ID'}) %}

หรือเพิ่ม JavaScript แบบ inline เพื่อสร้างองค์ประกอบสคริปต์แบบไดนามิกในเทมเพลตหลักของคุณ:

<!-- user/themes/yourtheme/templates/partials/base.html.twig -->
...
{% block bottom %}
    {{ assets.js('bottom') }}
{% endblock %}

<script>
(function() {
  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.body.appendChild(script);
})();
</script>
</body>
</html>

หมายเหตุ: วิธี Asset Manager เป็นวิธีที่ Grav แนะนำสำหรับการจัดการ JavaScript assets มีการสนับสนุนในตัวสำหรับ asset pipelining, การจัดลำดับ และการจัดกลุ่ม

วิธีทางเลือกที่ 2: การใช้ปลั๊กอิน Custom JS

หากคุณต้องการวิธีที่ใช้ปลั๊กอินโดยไม่ต้องแก้ไขไฟล์ธีม:

ติดตั้งปลั๊กอิน "Custom JS" จากแผงผู้ดูแลระบบ Grav หรือผ่าน CLI:

bin/gpm install custom-js

ไปที่ Admin > Plugins > Custom JS
เพิ่มโค้ดสคริปต์ embed:

<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>

บันทึกการตั้งค่าปลั๊กอิน

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

วิธีทางเลือกที่ 3: การใช้ Block Override ใน Child Template

หากธีม Grav ของคุณใช้การสืบทอด block ของ Twig คุณสามารถ override block ด้านล่างใน child template:

{% block bottom %}
    {{ parent() }}
    <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>
{% endblock %}

สร้างหรือเปิด child template ที่ขยายจากเทมเพลตหลักของธีม
เพิ่ม block override ที่แสดงด้านบน
การเรียก parent() ทำให้มั่นใจว่าเนื้อหาที่มีอยู่ทั้งหมดในบล็อกจะถูกรักษาไว้

หมายเหตุ: วิธีนี้ใช้ระบบการสืบทอดเทมเพลตของ Twig ตรวจสอบให้แน่ใจว่าชื่อ block (เช่น bottom) ตรงกับ block ที่กำหนดในเทมเพลตหลักของธีม ชื่อ block ทั่วไป ได้แก่ bottom, javascripts หรือ footer

วิธีทางเลือกที่ 4: การใช้ปลั๊กอิน Grav Custom Head

อีกตัวเลือกที่ใช้ปลั๊กอินคือปลั๊กอิน Custom Head:

ติดตั้งปลั๊กอิน custom-head ผ่าน CLI หรือแผงผู้ดูแลระบบ:

bin/gpm install custom-head

ไปที่ Admin > Plugins > Custom Head
เพิ่มโค้ดสคริปต์ embed Asyntai ของคุณในการตั้งค่าปลั๊กอิน:

<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>

บันทึกการตั้งค่า

เคล็ดลับ: ปลั๊กอิน Custom Head อนุญาตให้คุณแทรกโค้ดลงในส่วน head หรือ body ของเว็บไซต์โดยไม่ต้องแตะไฟล์ธีม ตรวจสอบเอกสารปลั๊กอินสำหรับตัวเลือกการวางที่ถูกต้องเพื่อแทรกสคริปต์ก่อนแท็กปิด </body>

ขั้นตอนที่ 3: ล้างแคชและยืนยัน

หลังจากเพิ่มโค้ดแล้ว ให้ล้างแคช Grav และตรวจสอบการติดตั้ง:

# Clear cache via CLI
bin/grav clearcache

# Or clear cache from Admin Panel:
# Admin > Tools > Clear Cache

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

ไม่เห็นวิดเจ็ต? ตรวจสอบให้แน่ใจว่าคุณได้ล้างแคช Grav ด้วย bin/grav clearcache หรือจากแผงผู้ดูแลระบบ ตรวจสอบว่าคุณได้แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงจากแดชบอร์ด ล้างแคชเบราว์เซอร์หรือดูในโหมดส่วนตัว เปิดคอนโซลเบราว์เซอร์ (F12) เพื่อตรวจสอบข้อผิดพลาด JavaScript ตรวจสอบว่าสคริปต์อยู่ในซอร์สโค้ดของหน้าโดยคลิกขวาและเลือก "View Page Source"