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

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

แพลตฟอร์ม:

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

ขั้นแรก ไปที่ แดชบอร์ด 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>

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

ขั้นตอนที่ 2: เลือกวิธีการติดตั้ง

Statamic รองรับทั้ง Antlers และ Blade templating เลือกวิธีตาม templating engine ที่คุณใช้:

วิธีที่ 1: Antlers Layout (แนะนำ)

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

นำทางไปยังไดเรกทอรี resources/views ของโปรเจกต์ Statamic ของคุณ
เปิดไฟล์ layout ของคุณ (โดยปกติคือ layout.antlers.html)
ค้นหาแท็กปิด </body>
วางโค้ดฝังตัว Asyntai ของคุณก่อนแท็ก </body>
บันทึกไฟล์

<!DOCTYPE html>
<html lang="{{ site:short_locale }}">
<head>
  <meta charset="utf-8">
  <title>{{ title }} | {{ site:name }}</title>
  {{ vite src="resources/js/site.js|resources/css/site.css" }}
</head>
<body>
  {{ template_content }}

  <!-- Asyntai Chatbot -->
  <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>

เคล็ดลับ: The {{ template_content }} variable is where Statamic injects your page content. Always add the chatbot script after this, just before </body>.

วิธีที่ 2: Blade Layout

หากคุณใช้เทมเพลต Blade แทน Antlers ให้ทำตามขั้นตอนเหล่านี้:

นำทางไปยังไดเรกทอรี resources/views ของโปรเจกต์ Statamic ของคุณ
เปิดไฟล์ Blade layout ของคุณ (เช่น layout.blade.php)
ค้นหาแท็กปิด </body>
วางโค้ดฝังตัว Asyntai ของคุณก่อนแท็ก </body>
บันทึกไฟล์

<!DOCTYPE html>
<html lang="{{ $site->shortLocale() }}">
<head>
  <meta charset="utf-8">
  <title>{{ $title }} | {{ $site->name() }}</title>
  @vite(['resources/js/site.js', 'resources/css/site.css'])
</head>
<body>
  {!! $template_content !!}

  <!-- Asyntai Chatbot -->
  <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>

หมายเหตุ: In Blade templates, use {!! $template_content !!} to render the page content. The !! syntax prevents HTML escaping.

วิธีที่ 3: การใช้ Partial

สำหรับการจัดระเบียบที่ดีขึ้น คุณสามารถสร้าง partial ที่นำกลับมาใช้ซ้ำได้สำหรับแชทบอท:

ขั้นตอนที่ 1: สร้าง Partial

สร้างไฟล์ใหม่ที่ resources/views/partials/_chatbot.antlers.html
เพิ่มโค้ดฝัง 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>

ขั้นตอนที่ 2: รวมใน Layout ของคุณ

เปิดไฟล์ layout ของคุณ (layout.antlers.html)
เพิ่มแท็ก partial ก่อน </body>:
{{ partial:chatbot }} </body>

ทำไมต้องใช้ partial? Partials ทำให้จัดการสคริปต์ภายนอกได้ง่ายในที่เดียว หากคุณต้องการอัปเดตโค้ดแชทบอท คุณเพียงแค่แก้ไขไฟล์เดียว

การใช้หลาย Layouts

หากเว็บไซต์ Statamic ของคุณใช้หลาย layouts (เช่น layout ต่างกันสำหรับบทความบล็อก, landing pages ฯลฯ) ตรวจสอบให้แน่ใจว่าเพิ่มสคริปต์แชทบอทในแต่ละไฟล์ layout ที่คุณต้องการให้วิดเจ็ตปรากฏ

คุณสามารถตั้งค่า layout ที่หน้าใช้ได้หลายวิธี:

ใน entry: เพิ่ม layout: your_layout ใน front matter
ใน collection: ตั้ง layout เริ่มต้นในไฟล์ YAML การกำหนดค่า collection ของคุณ
ใน blueprint: เพิ่มฟิลด์ layout ที่ผู้แก้ไขสามารถเลือกได้

สำหรับ Statamic Starter Kits

หากคุณใช้ Statamic Starter Kit ตำแหน่ง layout อาจแตกต่างกัน ตำแหน่งทั่วไปรวมถึง:

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html พร้อม partials ใน resources/views/snippets/

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

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

หลังจากเพิ่มโค้ดแล้ว ให้ล้างแคช Statamic เพื่อให้แน่ใจว่าการเปลี่ยนแปลงมีผล:

php artisan cache:clear
php please stache:refresh

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

ไม่เห็นวิดเจ็ต? ตรวจสอบให้แน่ใจว่าคุณล้างทั้งแคชของ Laravel และ Stache ของ Statamic แล้ว หากคุณใช้ static caching ให้รัน php please static:clear ด้วย ตรวจสอบคอนโซลเบราว์เซอร์ (F12) สำหรับข้อผิดพลาด JavaScript

สำคัญ: หากคุณใช้ static site generator ของ Statamic (ssg) ตรวจสอบให้แน่ใจว่าสร้างไฟล์สแตติกใหม่หลังจากเพิ่มสคริปต์แชทบอทโดยรัน php please ssg:generate

เอกสาร