iframe

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

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

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

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

คุณสมบัตินี้รองรับการปรับแต่งขนาด ตำแหน่ง สี ไอคอน โลโก้ และชื่อของ widget bubble

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

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

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

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

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

• จำกัดการใช้แต้มต่อผู้ใช้: กำหนดขีดจำกัดแต้มต่อผู้ใช้แต่ละราย หากปิดคือไม่จำกัด
  

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

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

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

การเชื่อมต่อ Event Callback

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

1. สร้าง Callback Event สำหรับ GA4 รับ Measurement Protocol API Secret และ Measurement ID จากโปรเจ็กต์ GA4 แล้วกรอกลงไป

2. สร้าง Callback Event ผ่าน Webhook เลือกเหตุการณ์ที่ต้องการ กรอก URL และข้อมูลยืนยันตัวตนตามคำแนะนำหน้าเว็บ
   

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

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

ตั้งค่า User ID

1. ตัวเลือกที่ 1: กำหนด user id ผ่าน 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"}', '*'))

                    

ตั้งค่า Email ผู้ใช้

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

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

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

iframe พารามิเตอร์ควบคุมอินเทอร์เฟซ

• show_messages: ควบคุมว่าจะแสดงประวัติการสนทนาหรือไม่
  iframe_url+?show_messages=true
• show_auto_call: จะเริ่มการโทรโดยอัตโนมัติหรือไม่
  iframe_url+?show_auto_call=true

วิธีดักฟัง Event ของ iframe

รองรับการดึงข้อมูลพฤติกรรมผู้ใช้ผ่านการดักฟัง event postMessage ของ iframe นักพัฒนาสามารถวิเคราะห์และประมวลผลข้อมูลตามความต้องการทางธุรกิจได้

                      
                      window.addEventListener('message', (e) => {
  let msg;
  try {
    msg = JSON.parse(e.data);
  } catch {
    return;
  }
  switch (msg.type) {
    case 'audio_conversation_id':
      console.log('audio_conversation_id', msg.data);
      // msg.data คือ conversation id ของการโทรครั้งนี้
      break;
    case 'audio_call_started':
      console.log('audio_call_started', msg.data);
      // msg.data === 'manual'（ผู้ใช้เริ่มเอง）| 'auto'（เริ่มอัตโนมัติ）event เริ่มการโทร, 
      break;
    case 'audio_call_ended':
      console.log('audio_call_ended', msg.data);
      // msg.data === 'manual'（ผู้ใช้วางสาย）| 'auto'（สิ้นสุดอัตโนมัติ เช่น หมดเวลา/สายหลุด）event สิ้นสุดการโทร
      break;
  }
});