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

แพลตฟอร์ม:

HubSpot

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 ของคุณและเลื่อนลงไปที่ส่วน "Embed Code" คัดลอกโค้ดฝังตัวเฉพาะของคุณซึ่งจะมีลักษณะดังนี้:

ขั้นตอนที่ 2: การใช้การตั้งค่าเว็บไซต์ (แนะนำ)

วิธีที่ง่ายที่สุดในการเพิ่มแชทบอทในทุกหน้าของเว็บไซต์ HubSpot:

1. เข้าสู่ระบบบัญชี HubSpot ของคุณ
2. คลิกไอคอนการตั้งค่า (เฟือง) ในแถบนำทางหลัก
3. ในแถบด้านข้างซ้าย ไปที่ Website > Pages
4. เลื่อนลงไปที่ส่วน "Site footer HTML"
5. วางโค้ดฝัง Asyntai ของคุณในพื้นที่ข้อความ
6. คลิก "Save" ที่ด้านล่างของหน้า

ทางเลือก: การติดตั้งเฉพาะหน้า

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

1. ไปที่ Marketing > Website > Website Pages (หรือ Landing Pages)
2. คลิกที่หน้าที่คุณต้องการแก้ไข
3. ในตัวแก้ไขหน้า คลิก Settings ที่ด้านบน
4. เลื่อนลงไปที่ "Advanced options"
5. ค้นหาส่วน "Footer HTML"
6. วางโค้ดฝังตัว Asyntai ของคุณ
7. คลิก "Apply changes" และเผยแพร่หน้าของคุณ

ทางเลือก: การใช้ Design Manager

เพื่อการควบคุมมากขึ้น คุณสามารถเพิ่มไฟล์ JavaScript ผ่าน Design Manager:

1. ไปที่ Marketing > Files and Templates > Design Tools
2. ในแถบด้านข้างซ้าย คลิก File > New file
3. เลือก "JavaScript" จากดรอปดาวน์
4. ตั้งชื่อไฟล์ของคุณ (เช่น asyntai-chatbot.js)
5. เพิ่มโค้ดต่อไปนี้:
   (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);
})();
6. แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงของคุณ
7. คลิก "Publish changes"
8. รวมไฟล์นี้ในเทมเพลตของคุณโดยใช้ require_js หรือลิงก์ในการตั้งค่าเว็บไซต์

ทางเลือก: การใช้โมดูลแบบกำหนดเอง

สร้างโมดูลที่นำกลับมาใช้ใหม่ได้สำหรับแชทบอท:

1. ไปที่ Marketing > Files and Templates > Design Tools
2. คลิก File > New file > Module
3. ตั้งชื่อว่า "Asyntai Chatbot"
4. ในไฟล์ module.html วางโค้ดฝังของคุณ
5. เผยแพร่โมดูล
6. เพิ่มโมดูลลงในส่วน footer ของเทมเพลต หรือลากไปวางบนหน้าแต่ละหน้า

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

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