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

แพลตฟอร์ม:

TYPO3

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: การใช้ TypoScript footerData (แนะนำ)

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

1. เข้าสู่ระบบ TYPO3 Backend ของคุณ
2. ไปที่ Web → Template
3. เลือกหน้ารากในโครงสร้างหน้า
4. คลิก "Edit the whole template record" (หรือเลือก "Info/Modify" แล้ว "Setup")
5. ในฟิลด์ Setup ให้เพิ่มโค้ด TypoScript ต่อไปนี้:
   page.footerData.99 = TEXT
page.footerData.99.value = <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>
6. แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงของคุณจากแดชบอร์ด
7. คลิก "Save"
8. ล้างแคช TYPO3: Admin Tools → Maintenance → Flush TYPO3 and PHP Cache

ทางเลือก: การใช้ Site Package (สำหรับ Site Packages)

หากคุณใช้ site package คุณสามารถเพิ่มสคริปต์ผ่านไฟล์การกำหนดค่า TypoScript:

1. นำทางไปยังโฟลเดอร์ site package ของคุณ: packages/your_sitepackage/Configuration/TypoScript/
2. เปิดหรือสร้าง setup.typoscript
3. เพิ่มโค้ดต่อไปนี้:
   page.footerData {
  99 = TEXT
  99.value = <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>
}
4. แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงของคุณ
5. ล้างแคชใน TYPO3 backend

ทางเลือก: การใช้ Fluid Template (FooterAssets)

สำหรับเว็บไซต์ที่ใช้ Fluid templates คุณสามารถใช้ส่วน FooterAssets:

1. นำทางไปยังไฟล์ Fluid template ของคุณ (โดยปกติอยู่ใน Resources/Private/Templates/)
2. เพิ่มส่วน FooterAssets ใน layout หรือเทมเพลตของคุณ:
   <f:section name="FooterAssets">
  <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>
</f:section>
3. ตรวจสอบให้แน่ใจว่า page layout ของคุณแสดงผลส่วน FooterAssets:
   <f:render section="FooterAssets" optional="true" />
4. ล้างแคช TYPO3

ทางเลือก: การใช้ AssetCollector (สำหรับนักพัฒนา)

สำหรับนักพัฒนา extension TYPO3 v10.3+ มี AssetCollector API:

1. ในโค้ด PHP ของคุณ (เช่น controller หรือ middleware) ให้ inject AssetCollector
2. เพิ่มสคริปต์พร้อม custom attributes:
   use TYPO3\CMS\Core\Page\AssetCollector;

$this->assetCollector->addJavaScript(
  'asyntai_chatbot',
  'https://asyntai.com/static/js/chat-widget.js',
  ['async' => 'async', 'data-asyntai-id' => 'YOUR_WIDGET_ID']
);

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

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