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

แพลตฟอร์ม:

CrafterCMS

HTML/Custom WordPress Shopify WooCommerce BigCommerce Ecwid Wix Squarespace Webflow Weebly HubSpot Tilda Adobe Experience Manager Duda Google Sites Bludit Plesk Concrete CMS Docusaurus Hugo Kentico Volusion Craft CMS Contentful Strapi Joomla Drupal Magento Blogger Bitrix TYPO3 PrestaShop OpenCart Ghost Statamic Umbraco 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 ของคุณและเลื่อนลงไปที่ส่วน "Embed Code" คัดลอกโค้ดฝังตัวเฉพาะของคุณซึ่งจะมีลักษณะดังนี้:

ขั้นตอนที่ 2: เพิ่มลงในเทมเพลต FreeMarker (แนะนำ)

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

1. ใน Crafter Studio ไปที่ Site Dashboard > Content Types หรือไปที่เทมเพลต
2. เปิดเทมเพลตหน้าหลักของคุณ (เช่น /templates/web/pages/home.ftl หรือเลย์เอาต์หลัก)
3. ค้นหาแท็กปิด </body>
4. วางโค้ดฝัง Asyntai ของคุณก่อนแท็ก </body>:
   <!-- Asyntai AI Chatbot --> <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </body>
5. บันทึกไฟล์และเผยแพร่ผ่าน Crafter Studio

วิธีทางเลือกที่ 1: การใช้ Crafter Template Components

เพื่อการจัดระเบียบที่ดีขึ้น ให้สร้างเทมเพลตคอมโพเนนต์เฉพาะสำหรับวิดเจ็ตแชทบอท:

1. ใน Crafter Studio สร้างไฟล์เทมเพลตใหม่ที่ /templates/web/components/asyntai-widget.ftl
2. เพิ่มเนื้อหาต่อไปนี้ลงในเทมเพลตคอมโพเนนต์:
   <!-- Asyntai AI Chatbot Component --> <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
3. รวมไว้ในเทมเพลตเลย์เอาต์หลักของคุณโดยใช้คำสั่ง include ของ FreeMarker:
   <#include "/templates/web/components/asyntai-widget.ftl" />
4. หรือหากใช้ระบบเรนเดอร์คอมโพเนนต์ของ Crafter ให้ใช้:
   <@renderComponent component=contentModel.asyntaiWidget />
5. บันทึกทั้งสองไฟล์และเผยแพร่ผ่าน Crafter Studio

วิธีทางเลือกที่ 2: การใช้การตั้งค่า Head/Scripts ของ Crafter

CrafterCMS อนุญาตให้คุณแทรกสคริปต์ทั่วทั้งเว็บไซต์ผ่านการตั้งค่าเว็บไซต์:

1. ใน Crafter Studio ไปที่ Site Config > Configuration
2. เปิดไฟล์ Engine Site Configuration (site-config.xml)
3. เพิ่มการตั้งค่าการแทรกสคริปต์แบบกำหนดเอง:
   <site> <!-- Existing configuration... --> <!-- Custom Scripts --> <scripts> <script> <src>https://asyntai.com/static/js/chat-widget.js</src> <async>true</async> <data-asyntai-id>YOUR_WIDGET_ID</data-asyntai-id> </script> </scripts> </site>
4. หรือแก้ไขเลย์เอาต์ FreeMarker หลักของคุณเพื่ออ่านจากการตั้งค่าเว็บไซต์และแทรกสคริปต์แบบไดนามิก:
   <#if siteConfig.getString("scripts.script.src", "")?has_content> <script async src="${siteConfig.getString("scripts.script.src")}" data-asyntai-id="${siteConfig.getString("scripts.script.data-asyntai-id")}"></script> </#if>
5. บันทึกและเผยแพร่การเปลี่ยนแปลงการตั้งค่า

วิธีทางเลือกที่ 3: การใช้ Groovy Controller

CrafterCMS รองรับสคริปต์ Groovy สำหรับลอจิกฝั่งเซิร์ฟเวอร์ คุณสามารถใช้ controller เพื่อเพิ่มสคริปต์แชทบอทแบบไดนามิก:

1. สร้างสคริปต์ Groovy ใน /scripts/pages/ (เช่น /scripts/pages/home.groovy หรือ controller ทั่วทั้งเว็บไซต์ของคุณ)
2. เพิ่มโค้ดต่อไปนี้เพื่อแทรก URL สคริปต์ลงในโมเดลเทมเพลต:
   // /scripts/pages/home.groovy import org.craftercms.engine.service.context.SiteContext def siteContext = SiteContext.current // Add Asyntai chatbot configuration to the model model.asyntaiEnabled = true model.asyntaiWidgetId = "YOUR_WIDGET_ID" model.asyntaiScriptSrc = "https://asyntai.com/static/js/chat-widget.js"
3. จากนั้นอ้างอิงตัวแปรโมเดลในเทมเพลต FreeMarker ของคุณ:
   <#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
4. บันทึกทั้งสคริปต์ Groovy และไฟล์เทมเพลต
5. เผยแพร่การเปลี่ยนแปลงผ่าน Crafter Studio

ขั้นตอนที่ 3: เผยแพร่และตรวจสอบ

หลังจากทำการเปลี่ยนแปลง ให้เผยแพร่ผ่าน Crafter Studio:

1. ใน Crafter Studio ไปที่ Site Dashboard
2. ตรวจสอบการเปลี่ยนแปลงของคุณในส่วน My Recent Activity หรือ Pending Approval
3. คลิก Publish เพื่อเผยแพร่การเปลี่ยนแปลงไปยังเว็บไซต์ของคุณ
4. เยี่ยมชมเว็บไซต์ CrafterCMS ของคุณในแท็บเบราว์เซอร์ใหม่หรือหน้าต่างส่วนตัว
5. คุณควรเห็นปุ่มวิดเจ็ตแชทที่มุมล่างขวา
6. คลิกเพื่อให้แน่ใจว่าเปิดและทำงานได้อย่างถูกต้อง