Bubble Widget

ฝัง Agent ของคุณเป็น bubble widget บนเว็บไซต์ธุรกิจ ให้ผู้ใช้คลิกที่ bubble widget เพื่อเปิดหน้าต่างสนทนา รองรับบริการต่าง ๆ เช่น การสนับสนุนลูกค้าออนไลน์, ให้คำปรึกษาก่อนขาย, และสร้างลีด

วิธีเชื่อมต่อกับเว็บไซต์

1. ไปที่ Agent-Integration-Widget Bubble แล้วคัดลอก "โค้ดสำหรับการเชื่อมต่อ"
   
2. วางโค้ดลงในแท็ก head ของหน้า HTML เว็บไซต์ของคุณ
3. เผยแพร่เว็บไซต์เพื่อให้ AI Agent แสดงผลและเริ่มต้นสนทนาได้ทันที
4. หากต้องการปรับแต่ง UI และโลโก้, ควบคุมความถี่การส่งข้อความของผู้ใช้ หรือแสดงข้อความเชิงรุกเพื่อเพิ่มอัตราการมีส่วนร่วม สามารถตั้งค่าขั้นสูงได้

การปรับแต่ง UI

ฟีเจอร์นี้รองรับการตั้งค่าขนาด ตำแหน่ง สี ไอคอน โลโก้ และชื่อของ bubble widget ได้ตามต้องการ

• ชื่อเล่น Widget: กำหนดชื่อได้เอง
• คำอธิบาย Widget: ใส่คำอธิบายได้เอง
• การตั้งค่าธีม: ปรับแต่งสีธีม ไอคอน bubble และรูปลักษณ์ Agent
• การปรับแต่ง Bubble: ตั้งค่าตำแหน่งและขนาดของ bubble ให้เหมาะกับธุรกิจ
• การปรับแต่งหน้าต่างแชท: กำหนดความกว้างและสูงของหน้าต่างแชท (ไม่ควรกำหนดค่ามากเกินไปเพื่อรองรับหน้าจอขนาดเล็ก)
• Agent LOGO:
  • Platform LOGO: แสดงโลโก้ GPTBots
  • Organization LOGO: แสดงโลโก้องค์กรที่อัปโหลด ที่นี่ Agent ทุกตัวในองค์กรจะใช้โลโก้นี้
  • Custom LOGO: แสดงโลโก้ที่อัปโหลดเอง แต่ละ Agent ใช้โลโก้ต่างกันได้ (ฟีเจอร์นี้ต้องติดต่อฝ่ายขายเพื่อเปิดใช้งาน)
  • No LOGO: ไม่แสดงโลโก้ใด ๆ ในหน้าต่างแชท

ข้อความเชิงรุก (Proactive Messages)

ข้อความเชิงรุกสามารถแสดงเป็นการ์ดหรือข้อความกระตุ้น เพื่อดึงดูดความสนใจและชวนผู้ใช้เข้าสู่การสนทนาหรือกรอกข้อมูลลีดก่อนคลิก bubble widget โดยมี 2 รูปแบบ ได้แก่ "Prompt Messages" และ "Card Messages"

วิธีสร้าง Prompt Messages

• เนื้อหาข้อความ: ตั้งค่าได้สูงสุด 3 ข้อความ จะแสดงแบบไดนามิกจากล่างขึ้นบนเมื่อเปิดใช้งาน
• กฎการแสดงผล: ตั้งค่าเงื่อนไขทริกเกอร์ prompt ได้สูงสุด 3 เงื่อนไข จะแสดงข้อความเชิงรุกเมื่อเข้าเงื่อนไขที่กำหนด
  • เงื่อนไขทริกเกอร์: ตรวจสอบจากเบราว์เซอร์/ภาษาของเบราว์เซอร์/เขตเวลา/ประเทศ/ระบบปฏิบัติการ/UTM ฯลฯ
  • Expressions: มีตัวดำเนินการ เช่น =/≠/ช่วง/มี/ไม่มี/มีค่า/ไม่มีค่า สำหรับตัวแปรแบบตัวเลขและข้อความ
  • AND & OR: ตั้งค่าให้ต้องเข้าเงื่อนไขทั้งหมด หรือแค่บางเงื่อนไขก็ได้
  • Events: ทริกเกอร์ข้อความเชิงรุกได้ทันทีหรือหลังจาก N วินาที
• การควบคุมความถี่: เพื่อป้องกันการรบกวนผู้ใช้ สามารถกำหนดจำนวนครั้งสูงสุดต่อ "เว็บไซต์/หน้า" ต่อ "วัน/สัปดาห์/เดือน"

วิธีสร้าง Card Messages

หลังตั้งค่าเนื้อหาการ์ดแล้ว การตั้งค่าอื่น ๆ จะเหมือนกับ prompt message

• อัปโหลดรูปภาพ: รองรับการอัปโหลดรูปภาพเอง (แนะนำให้ควบคุมขนาดไฟล์เพื่อไม่ให้โหลดช้า)
• หัวข้อ/เนื้อหา: กำหนดข้อความได้เอง

วิธีเปิดใช้งานข้อความเชิงรุก

1. ในรายการข้อความเชิงรุก เลือกข้อความที่ต้องการแล้วกดปุ่มเปิดใช้งาน
2. เข้าไปที่หน้าเว็บไซต์เพื่อดูข้อความเชิงรุกที่แสดงผล
3. คลิกข้อความเชิงรุกเพื่อเปิดหน้าต่างสนทนา

ความปลอดภัยและการควบคุมความถี่

• Domain Whitelist: กำหนดโดเมนที่อนุญาตให้ฝัง "โค้ดเชื่อมต่อ bubble widget" หากปิดใช้งานจะถือว่าไม่จำกัด
  

• Credit Consumption Limit: กำหนดขีดจำกัดการใช้เครดิตของ "bubble widget" หากปิดใช้งานจะถือว่าไม่จำกัด
  

  • ตั้งค่าได้สูงสุด 3 กฎ
  • รองรับการตั้งค่าขีดจำกัดเครดิตรวมแบบ "รายวัน/รายสัปดาห์/รายเดือน"

• User Consumption Limit: กำหนดขีดจำกัดการใช้เครดิตต่อผู้ใช้แต่ละคน หากปิดใช้งานจะถือว่าไม่จำกัด
  

  • ตั้งค่าได้สูงสุด 3 กฎ
  • รองรับการตั้งค่าขีดจำกัดเครดิตต่อผู้ใช้แบบ "รายวัน/รายสัปดาห์/รายเดือน"

• User Rate Limit: กำหนดขีดจำกัดความถี่การส่งข้อความต่อผู้ใช้แต่ละคน หากปิดใช้งานจะถือว่าไม่จำกัด
  

  • ตั้งค่าได้สูงสุด 3 กฎ
  • รองรับการตั้งค่าจำนวนข้อความสูงสุดต่อช่วงเวลาที่กำหนด
  • หากเกินขีดจำกัด Agent จะไม่ตอบกลับและจะส่งข้อความแจ้งเตือนอัตโนมัติ

Event Callback

วิธีส่งข้อมูลเหตุการณ์ของ bubble widget ไปยัง GA4 หรือระบบภายนอก

1. สร้าง event callback ใน GA4 รับ Measurement Protocol API Secret และ Measurement ID จากโปรเจกต์เป้าหมาย แล้วกรอกข้อมูล

2. สร้าง Webhook callback เลือก event ที่ต้องการตามคำแนะนำในหน้า แล้วกรอก URL และข้อมูลยืนยันตัวตน
   

3. เปิดใช้งาน callback ในรายการ event callback จากนั้นตรวจสอบข้อมูลใน GA4 หรือ Webhook ว่าถูกต้องหรือไม่ เมื่อบันทึกข้อมูลสำเร็จแล้วสามารถนำไปวิเคราะห์ต่อได้

การใช้งานขั้นสูง

ตั้งค่า User ID

นักพัฒนา Agent สามารถตั้งค่ารหัสประจำตัวผู้ใช้ได้

                      
                      window.ChatBot.setUserId("your_user_id")

                    

ตั้งค่าอีเมลผู้ใช้

นักพัฒนา Agent สามารถตั้งค่าอีเมลของผู้ใช้ได้ เมื่อผู้ใช้ขอรับบริการมนุษย์จะสามารถข้ามขั้นตอนกรอกอีเมลได้ หากไม่ได้ตั้งค่าจะต้องกรอกอีเมลก่อนเรียกเจ้าหน้าที่

                      
                      window.ChatBot.setEmail("somebody@mail.com")

                    

ตั้งค่าตัวแปรแบบกำหนดเอง

นักพัฒนาสามารถตั้งค่า ค่าชั่วคราวสำหรับตัวแปรแบบกำหนดเอง ที่มีผลเฉพาะในบทสนทนานั้น ๆ เพื่อรองรับตรรกะและการตอบสนองแบบไดนามิกของ Agent

                      
                      window.ChatBot.setCustomVariables({"var_key1": "value1", "var_key2": "value2"})

                    

ตั้งค่าแสดงหน้าต่างแชทอัตโนมัติ

นักพัฒนา Agent สามารถตั้งค่าให้แสดงหน้าต่างแชทโดยอัตโนมัติ โดยที่ผู้ใช้ยังไม่ต้องคลิก bubble component หากผู้ใช้คลิก bubble component หน้าต่างแชทจะปิดลง

                      
                      <script src="https://www.gptbots.ai/widget/xxxxxxxxxxxxxx/chat.js" onload="ChatBot.show()"></script>

                    

ตั้งค่าข้ามสถานะเริ่มต้น

นักพัฒนา Agent สามารถข้ามสถานะเริ่มต้นของหน้าต่างแชทเพื่อแสดงข้อความต้อนรับและคำถามที่ตั้งไว้ล่วงหน้าได้ทันที

                      
                      <script src="https://www.gptbots.ai/widget/xxxxxxxxxxxxxx/chat.js?skipWelcome=1"></script>

                    

รูปแบบข้อมูล Event Callback

เหตุการณ์และแอตทริบิวต์ของ bubble widget ที่ส่งผ่าน Webhook หรือ GA4 จะใช้รูปแบบข้อมูลดังนี้ โปรดแยกแยะและจัดเก็บข้อมูลให้ถูกต้อง

                      
                      {
  "client_id": "",  //ควรใช้ gtag ของ GA4 หากไม่มีจะสร้างโดย GPTBots
  "user_id": "",  //UserId ที่นักพัฒนาตั้งค่า ถ้าไม่ได้ตั้งค่าจะเป็น null
  "event_name": "Show widget bubble",     //ชื่อเหตุการณ์
  "event_params": {  
      "key1": "abc",  //ชื่อแอตทริบิวต์: ค่า (string)
      "key2": 123     //ชื่อแอตทริบิวต์: ค่า (number)
    }
}

                    

ฝัง Bubble Widget ใน Shopify

1. คัดลอกโค้ดฝัง bubble widget
   

2. ไปที่แผงผู้ดูแลร้าน Shopify ค้นหาเทมเพลตที่ใช้งานอยู่แล้วเลือก "Edit Code"
   

3. ค้นหาไฟล์ "theme.liquid" แล้ววางโค้ดฝังไว้ใน <head> จากนั้นบันทึก
   

4. bubble widget จะปรากฏที่มุมขวาล่างของเว็บไซต์ร้านค้า ให้ผู้เข้าชมใช้ปรึกษาได้ทันที