logo
Entwicklung
Suchen
iframe

iframe

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

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

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

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

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

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

ความปลอดภัยและการจำกัดอัตราการใช้งาน

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

  • ขีดจำกัดการใช้แต้มรวม: กำหนดขีดจำกัดการใช้แต้มรวมสำหรับ "widget bubble" หากปิดใช้งานถือว่าไม่จำกัด
    ขีดจำกัดแต้มรวม

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

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

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

Event Callback

วิธีส่ง Event พฤติกรรมผู้ใช้ widget bubble ไปยัง GA4 หรือระบบ Third-Party

  1. สร้าง event callback สำหรับ GA4 รับ Measurement Protocol API Secret และ Measurement ID จากโปรเจกต์ GA4 ที่ต้องการ แล้วกรอกข้อมูล
  2. สร้าง event callback แบบ Webhook เลือก event ที่ต้องการตามคำแนะนำหน้าเพจ แล้วกรอก URL และข้อมูลยืนยันตัวตน
    ตัวอย่างการตั้งค่า Webhook Callback
  3. "เปิดใช้งาน" callback ในรายการ event callback และตรวจสอบข้อมูลที่ GA4 หรือ Webhook ว่าถูกต้อง เมื่อเก็บข้อมูลสำเร็จแล้ว สามารถนำข้อมูลไปวิเคราะห์ต่อได้

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

การตั้งค่า User ID

  1. ตัวเลือกที่ 1: รูปแบบ URL สำหรับฝัง iframe คือ: iframe_url+?user_id=your_user_id

    หมายเหตุ: รองรับให้นักพัฒนา Agent ตั้งค่า user ID

  2. ตัวเลือกที่ 2: ตั้งค่า user ID แบบไดนามิกผ่านโค้ด javascript
Array.from(document.getElementsByTagName('iframe')).filter(iframe => iframe.src.includes('gptbots')).forEach(iframe => iframe.contentWindow.postMessage('{"type":"UserId","data":"your_user_id"}', '*'))
                      
                      Array.from(document.getElementsByTagName('iframe')).filter(iframe => iframe.src.includes('gptbots')).forEach(iframe => iframe.contentWindow.postMessage('{"type":"UserId","data":"your_user_id"}', '*'))

                    
Dieser Codeblock im schwebenden Fenster

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

หากฝังหน้าเว็บผ่าน iframe ให้เติมอีเมลของผู้ใช้ใน URL ของ iframe เช่น: iframe_url?email=somebody@mail.com
หมายเหตุ: ช่วยให้นักพัฒนา Agent กรอกอีเมลผู้ใช้ล่วงหน้า ผู้ใช้ไม่ต้องกรอกอีเมลเองเมื่อต้องการขอรับบริการจากเจ้าหน้าที่ หากไม่ได้ตั้งค่าอีเมล ผู้ใช้จำเป็นต้องกรอกอีเมลก่อนจึงจะขอรับบริการจากเจ้าหน้าที่ได้

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

นักพัฒนาสามารถตั้งค่าตัวแปรกำหนดเองแบบชั่วคราวสำหรับแต่ละบทสนทนา เพื่อให้ Agent ตอบสนองแบบไดนามิก
การฝังหน้าเว็บผ่าน iframe พร้อมตัวแปรกำหนดเอง ใช้รูปแบบ URL: iframe_url?var_key1=value1&var_key2=value2

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

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

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

                    
Dieser Codeblock im schwebenden Fenster