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

แพลตฟอร์ม:

Umbraco

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: แก้ไขเทมเพลต Master (แนะนำ)

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

1. เข้าสู่ระบบ Umbraco Backoffice ของคุณ
2. ไปที่ Settings ในแถบด้านข้างซ้าย
3. ขยาย Templates
4. คลิกที่เทมเพลต Master ของคุณ (หรือเทมเพลต layout หลักที่เว็บไซต์ของคุณใช้)
5. ค้นหาแท็กปิด </body>
6. วางโค้ดฝังตัว Asyntai ของคุณก่อนแท็ก </body>
7. คลิก "Save"

ทางเลือก: การใช้ Site Settings Document Type

สำหรับความยืดหยุ่นที่มากขึ้น คุณสามารถเพิ่มฟิลด์แบบกำหนดเองเพื่อจัดการสคริปต์ส่วนท้าย:

1. ไปที่ Settings → Document Types
2. แก้ไข Site Settings document type ของคุณ (หรือสร้างหากยังไม่มี)
3. เพิ่ม property ใหม่ชื่อ "Footer Scripts" พร้อม data type Textarea
4. บันทึก Document Type
5. ไปที่ Content และแก้ไข node Site Settings ของคุณ
6. วางโค้ดฝังตัว Asyntai ของคุณในฟิลด์ Footer Scripts
7. ในเทมเพลต Master ของคุณ ให้เพิ่มโค้ดนี้ก่อน </body>:
   @Html.Raw(Model.Value("footerScripts"))
8. บันทึกทั้งเนื้อหาและเทมเพลต

ทางเลือก: การใช้โฟลเดอร์ Scripts

คุณยังสามารถสร้างไฟล์ JavaScript ใน Umbraco Backoffice:

1. ไปที่ Settings → Scripts
2. คลิกขวาที่ Scripts และเลือก "Create"
3. สร้างไฟล์ใหม่ชื่อ asyntai-chatbot.js
4. เพิ่มโค้ดต่อไปนี้:
   (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);
})();
5. แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงของคุณ
6. บันทึกไฟล์
7. รวมสคริปต์นี้ในเทมเพลต Master ของคุณก่อน </body>:
   <script src="/scripts/asyntai-chatbot.js"></script>

ทางเลือก: เฉพาะหน้าด้วย RenderSection

หากคุณต้องการแชทบอทเฉพาะในบางหน้า:

1. ในเทมเพลต Master ของคุณ ให้เพิ่มก่อน </body>:
   @RenderSection("footerScripts", required: false)
2. ในเทมเพลตหน้าเฉพาะที่คุณต้องการแชทบอท ให้เพิ่ม:
   @section footerScripts {
  <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: ยืนยันการติดตั้ง

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