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

แพลตฟอร์ม:

Craft CMS

HTML/Custom WordPress Shopify WooCommerce BigCommerce Ecwid Wix Squarespace Webflow Weebly HubSpot Tilda Adobe Experience Manager Duda Google Sites Bludit Plesk Concrete CMS Craft CMS Contentful Docusaurus Strapi Joomla Kentico Drupal Magento Blogger Bitrix TYPO3 PrestaShop OpenCart Ghost Hugo Statamic Umbraco Volusion Moodle SilverStripe Grav October CMS ProcessWire Sanity ExpressionEngine Sylius Backdrop CMS MODX Bagisto PayloadCMS e107 CrafterCMS Kirby MedusaCMS DatoCMS GoDaddy Framer Bubble Carrd Jimdo Strikingly Kajabi Teachable Thinkific ClickFunnels Hostinger Unbounce Leadpages Systeme.io Instapage

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

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

ขั้นตอนที่ 2: แก้ไขเทมเพลตเลย์เอาต์ของคุณ (แนะนำ)

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

1. เข้าถึงไฟล์โปรเจกต์ Craft CMS ของคุณผ่าน FTP, SSH หรือตัวแก้ไขโค้ดของคุณ
2. ไปที่ไดเรกทอรี templates/
3. ค้นหาไฟล์เลย์เอาต์หลักของคุณ (โดยทั่วไปชื่อ _layout.twig, _layout.html หรืออยู่ใน templates/_layouts/)
4. ค้นหาแท็กปิด </body>
5. วางโค้ดฝังตัว Asyntai ของคุณก่อนแท็ก </body>
6. บันทึกไฟล์

Alternative: Using Twig {% js %} Tag (Craft CMS 3.x+)

Craft CMS มีแท็ก Twig ในตัวสำหรับลงทะเบียน JavaScript:

1. เปิดเทมเพลตเลย์เอาต์หลักของคุณ
2. เพิ่มโค้ดต่อไปนี้ก่อนแท็กปิด </body>:
   {% js %} (function() { var script = document.createElement('script'); script.async = true; script.src = 'https://asyntai.com/static/js/chat-widget.js'; script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID'); document.body.appendChild(script); })(); {% endjs %}
3. แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงของคุณ
4. บันทึกไฟล์

ทางเลือก: สร้างไฟล์ include แยกต่างหาก

เพื่อการจัดระเบียบที่ดีขึ้น ให้สร้างไฟล์ include เฉพาะ:

1. สร้างไฟล์ใหม่: templates/_includes/chatbot.twig (หรือ .html)
2. เพิ่มโค้ดฝัง 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>
3. ในเทมเพลตเลย์เอาต์หลักของคุณ ให้รวมไฟล์นี้ก่อน </body>:
   {% include '_includes/chatbot' %}
4. บันทึกทั้งสองไฟล์

ทางเลือก: การโหลดแบบมีเงื่อนไข

เพื่อโหลดแชทบอทเฉพาะในหน้าหรือส่วนที่กำหนด:

1. ในเทมเพลตเลย์เอาต์หรือหน้าของคุณ ให้ใช้เงื่อนไข Twig:
   {% if entry.showChatbot ?? true %} <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> {% endif %}
2. หรือตรวจสอบส่วนเฉพาะ:
   {% if craft.app.request.segments[0] != 'admin' %} <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> {% endif %}

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

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