1. ข้อมูลเบื้องต้น
อัปเดตล่าสุด: 23 สิงหาคม 2021
การโอนตัวแทนแบบเรียลไทม์ด้วย Business Messages
ฟีเจอร์การโอน Agent แบบสดของ Business Messages ช่วยให้ตัวแทนของคุณเริ่มการสนทนาในฐานะบ็อตและเปลี่ยนการสนทนาระหว่างกลางเป็น Agent แบบสด (เจ้าหน้าที่ได้) บ็อตจะจัดการกับคําถามทั่วไป เช่น เวลาทําการได้ ขณะที่ตัวแทนแบบเรียลไทม์จะมอบประสบการณ์ที่กําหนดเอง ซึ่งให้การเข้าถึงบริบทของผู้ใช้ได้มากขึ้น เมื่อการเปลี่ยนแปลงระหว่างประสบการณ์ทั้งสองแบบราบรื่นเช่นนี้ ผู้ใช้จะได้รับคําตอบอย่างรวดเร็วและถูกต้อง ซึ่งส่งผลให้อัตราการมีส่วนร่วมของลูกค้าเพิ่มสูงขึ้น และเพิ่มความพึงพอใจของลูกค้า
Codelab นี้จะสอนวิธีใช้ฟีเจอร์การโอน Agent แบบสดโดยสมบูรณ์
สิ่งที่คุณจะสร้าง
ใน Codelab นี้ คุณจะต้องสร้างเว็บฮุคสําหรับตัวแทนที่ส่งและรับเหตุการณ์การโอน Agent แบบสดได้ คุณจะใช้ UI พื้นฐานจากโค้ดเริ่มต้นเพื่อทดสอบสิ่งที่คุณสร้าง
สิ่งที่จะได้เรียนรู้
- วิธีจัดเก็บและจัดการสถานะการสนทนา
- วิธีใช้ Business Messages เพื่อส่งกิจกรรมการโอน Agent แบบสด
- วิธีตั้งค่าเว็บฮุคและ UI พื้นฐานสําหรับการเข้าร่วมการสนทนาในฐานะตัวแทน
- แนวทางปฏิบัติแนะนําในการใช้ Business Messages API
Codelab นี้มุ่งเน้นที่การใช้ Business Message API เพื่อใช้การโอน Agent แบบสด คุณอ่านรหัสเริ่มต้นสําหรับแต่ละขั้นตอนได้ แต่ต้องติดตั้งโค้ดที่เกี่ยวข้องกับ Business Messages เท่านั้น
สิ่งที่คุณต้องมี
- ตัวแทน Business Messages รวมถึงคีย์บัญชีบริการของคุณ คุณสร้าง Agent ได้โดยทําตามคู่มือสําหรับ Agent
- การกําหนดค่า Cloud Datastore ที่ทํางานอยู่ที่ลิงก์กับโปรเจ็กต์ GCP ของ Agent โดยคุณสามารถใช้การเริ่มต้น Cloud Datastore อย่างรวดเร็วเพื่อตั้งค่า คุณไม่จําเป็นต้องรู้วิธีใช้ Cloud Datastore
- คอมพิวเตอร์ที่ติดตั้ง Google Cloud SDK และ Node.js (เวอร์ชัน 10 ขึ้นไป)
- อุปกรณ์ Android (เวอร์ชัน 5 ขึ้นไป) หรืออุปกรณ์ iOS ที่ใช้ทดสอบประสบการณ์ของผู้ใช้
- มีประสบการณ์ในการใช้การเขียนโปรแกรมเว็บแอปพลิเคชัน คุณจะเขียนโค้ด JavaScript ในจํานวนไม่มาก และอาจต้องแก้ไขข้อบกพร่องในสิ่งที่คุณเขียน
2. สร้างบ็อตเสียงก้อง
ในขั้นตอนนี้ คุณจะทําให้ตัวแทนบ็อตพื้นฐานที่ใช้ชื่อว่า "บ็อตเอคโค" ใช้งานได้ บ็อตจะบันทึกข้อความของผู้ใช้ บันทึกผู้ใช้ไปยังชุดข้อความการสนทนาใน Cloud Datastore จากนั้น "สะท้อน" ข้อความของผู้ใช้ด้วยการตอบสนองกับเนื้อหาเดียวกัน เมื่อคุณมีบ็อตและโครงสร้างการบันทึกพื้นฐานแล้ว คุณสามารถเพิ่มลงในบ็อตเพื่อสร้างการโอน Agent แบบใช้จริงในขั้นตอนถัดไปได้
รับโค้ดเริ่มต้น
ในเทอร์มินัล ให้จําลองโค้ดเริ่มต้นสําหรับการโอน Agent แบบสดเป็นไดเรกทอรีที่ใช้งานได้ของโปรเจ็กต์ด้วยคําสั่งต่อไปนี้
git clone https://github.com/google-business-communications/bm-nodejs-live-agent-transfer
ทําความเข้าใจเกี่ยวกับโค้ดเริ่มต้น
มาดูกันที่โครงสร้างโค้ดเริ่มต้นที่คุณจะใช้กันตลอดทั้ง Codelab
ไปที่ไดเรกทอรี step-1 และดูเนื้อหาในไดเรกทอรีนั้น ไฟล์มีองค์ประกอบต่อไปนี้:
- bin: ไดเรกทอรีนี้มีสคริปต์เริ่มต้น www ซึ่งตั้งค่าและกําหนดค่าเซิร์ฟเวอร์
- libs: ไดเรกทอรีนี้มี
datastore_util.jsซึ่งมีวิธีที่สะดวกในการอ่านและเขียนจาก Cloud Datastore คุณไม่จําเป็นต้องเข้าใจวิธีการทํางานของไฟล์นี้ เพียงจดบันทึกวิธีการที่ใช้ได้และวิธีใช้งาน - ทรัพยากร: มีคีย์บัญชีบริการของคุณเป็นไฟล์ชื่อ
credentials.json - เส้นทาง: ไฟล์
index.jsมีเว็บฮุคและวิธีการช่วยเหลือทั้งหมด นี่คือไฟล์หลักที่คุณจะทํางานและเพิ่มลงในไฟล์ - views: ไดเรกทอรีนี้มีไฟล์เทมเพลต EJS สําหรับองค์ประกอบ UI ซึ่งจะมีไฟล์เพิ่มเติมในขั้นตอนถัดไป
- app.js, app.yaml, package.json: ไฟล์เหล่านี้กําหนดค่าแอปพลิเคชันและการอ้างอิง
ก่อนทําให้ใช้งานได้ ให้ดาวน์โหลดคีย์บัญชีบริการ GCP และคัดลอกไฟล์ข้อมูลเข้าสู่ระบบ JSON ไปยังไดเรกทอรีทรัพยากรแต่ละรายการในโค้ดตัวอย่าง ทําเช่นนี้กับ Codelab ทุกๆ ขั้นตอน
cp credentials.json bm-nodejs-live-agent-transfer/step-<step number>/resources/credentials.json
การทําให้โค้ดเริ่มต้นใช้งานได้
ในเทอร์มินัล ให้ไปที่ไดเรกทอรี step-1 ของตัวอย่าง จากนั้นตั้งค่าเครื่องมือ gcloud เพื่อใช้โปรเจ็กต์ Google Cloud โดยการตั้งค่ารหัสโปรเจ็กต์ที่คุณใช้ในการลงทะเบียนกับ API
gcloud config set project <PROJECT_ID>
หากต้องการทําให้แอปพลิเคชันใช้งานได้ ให้เรียกใช้คําสั่งต่อไปนี้:
gcloud app deploy
โปรดสังเกต URL ของแอปพลิเคชันที่ทําให้ใช้งานได้ในเอาต์พุตของคําสั่งล่าสุดดังนี้
Deployed service [default] to [https://PROJECT_ID.appspot.com]
รหัสเริ่มต้นที่คุณเพิ่งทําให้ใช้งานได้จะมีเว็บแอปพลิเคชันพร้อมด้วยเว็บฮุคเพื่อรับข้อความจาก Business Messages แอปพลิเคชันจะสะท้อนข้อความกลับไปยังผู้ใช้และบันทึกชุดข้อความไปยัง Cloud Datastore
กำหนดค่าตัวแทนของคุณ
ไปที่หน้าการตั้งค่าบัญชีในคอนโซลของนักพัฒนาซอฟต์แวร์ Business Communications และตั้งค่าเว็บฮุคของคุณเป็น URL ของแอปพลิเคชันที่ทําให้ใช้งานได้แล้ว เช่น https://PROJECT_ID.appspot.com/callback/
จากนั้นในหน้า ข้อมูลตัวแทน ให้กําหนดค่าประเภทการโต้ตอบหลักและรองเป็นบ็อตและมนุษย์ตามลําดับ
กําลังคุยกับบ็อตก้อง
เปิด Agent ใน Developer Console คุณจะเห็นหน้าภาพรวมที่ให้คุณตรวจสอบรายละเอียดเกี่ยวกับตัวแทนได้ คัดลอก URL ทดสอบของตัวแทนที่ตรงกับอุปกรณ์ทดสอบบนอุปกรณ์เคลื่อนที่ ใช้ URL นี้ในอุปกรณ์เคลื่อนที่เพื่อเปิดพื้นที่การสนทนาของตัวแทน
โต้ตอบกับตัวแทนโดยส่งข้อความ 2-3 ข้อความ แพลตฟอร์มการสนทนาจะคัดลอกเฉพาะสิ่งที่คุณพูด ไม่ใช่ประสบการณ์ของผู้ใช้ที่มีประโยชน์มาก หากมีวิธีพูดคุยกับบุคคลจริงๆ เท่านั้น
3. กําลังเข้าร่วมการสนทนา
คราวนี้มาดูบทสนทนาจากมุมมองของตัวแทนแบบเรียลไทม์กัน ในฐานะตัวแทนแบบเรียลไทม์ คุณต้องทราบข้อมูลบางอย่างเกี่ยวกับการสนทนาก่อนเข้าร่วม เช่น รหัสการสนทนา การที่ผู้ใช้ขอพูดคุยกับตัวแทนแบบเรียลไทม์ก็เป็นประโยชน์ ในขั้นตอนนี้ คุณจะใช้หน้า CRM (การจัดการลูกค้าสัมพันธ์) พื้นฐานเพื่อดูข้อมูลนี้ และเข้าร่วมการสนทนาในฐานะตัวแทนแบบเรียลไทม์
โค้ดเริ่มต้นสําหรับขั้นตอนนี้จะเพิ่ม CRM พื้นฐานซึ่งจะแสดงรายการชุดข้อความการสนทนาทั้งหมดที่กําลังดําเนินอยู่สําหรับ Agent ลองมาดู CRM นี้เพื่อดูว่าการสนทนาใดบ้างที่ต้องให้เจ้าหน้าที่ดูแลอยู่
ไปที่ไดเรกทอรี step-2 แล้วทําให้แอปใช้งานได้อีกครั้งเหมือนที่คุณทําในขั้นตอนก่อนหน้า
เมื่อคุณทําให้แอปใช้งานได้ คุณจะเห็น URL เป้าหมาย ไปที่ URL นี้ในเบราว์เซอร์เพื่อดูข้อมูลที่มีชุดข้อความการสนทนาที่คุณเริ่มไว้ในขั้นตอนก่อนหน้า สถานะสําหรับการสนทนาคือ "จัดการบ็อต" เนื่องจากบ็อตสะท้อนเสียงทําหน้าที่เป็นตัวแทนของตัวแทนในการสนทนานี้
ปุ่มเข้าร่วมแชทจะปรากฏขึ้นแต่ยังไม่ได้ทําอะไร นอกจากนี้ คุณยังบอกไม่ได้ว่าอินเทอร์เฟซนี้ต้องการให้ผู้ใช้พูดคุยกับตัวแทนแบบเรียลไทม์หรือไม่
Business Messages มีกิจกรรมสดที่ร้องขอโดยตัวแทน ซึ่งจะระบุเมื่อผู้ใช้ต้องการพูดคุยกับตัวแทนแบบสด คุณต้องติดตามสถานะนั้นเพื่อแสดงใน UI
ลองดูวิธีการติดต่อกลับใน index.js ความคิดเห็น TODO จะระบุที่ที่คุณต้องการรับคําขอสําหรับ Agent แบบสดของผู้ใช้และอัปเดตสถานะชุดข้อความ
ขั้นตอนที่ 2/เส้นทาง/ดัชนี.js
/**
* The webhook callback method.
*/
router.post('/callback', async function(req, res, next) {
...
} else if (requestBody.userStatus !== undefined) {
if (requestBody.userStatus.requestedLiveAgent !== undefined) {
...
// TODO: Update the thread state to QUEUED_THREAD_STATE.
}
}
});
...
});
คุณต้องใช้เมธอดใน libs/datastore_utils.js เพื่อโหลดชุดข้อความการสนทนาปัจจุบัน และอัปเดตสถานะของชุดข้อความเป็น QUEUED_THREAD_STATE
หากไม่แน่ใจว่าต้องทําอย่างไร ให้ลองหาทางแก้ไข โค้ดเริ่มต้นจะมีไดเรกทอรี solutions กํากับอยู่ในทุกขั้นตอนที่คุณต้องดําเนินการให้เสร็จสิ้น ไดเรกทอรีเหล่านี้จะมีสําเนาของทั้งแอปที่มีการใช้งานที่ครบถ้วนของขั้นตอนหนึ่งๆ
เมื่อติดตั้งใช้งานเสร็จแล้วและทําให้แอปใช้งานได้ ให้ใช้เมนูรายการเพิ่มเติมในการสนทนาในอุปกรณ์เคลื่อนที่เพื่อขอตัวแทนแบบเรียลไทม์
ในตอนนี้ ถ้าคุณกลับไปที่ CRM คุณจะเห็นโน้ตในชุดข้อความการสนทนาที่บอกว่า "คําขอ Agent แบบสด" ผู้ใช้รายนี้ต้องการความช่วยเหลือจากมนุษย์ คุณต้องใช้ปลายทาง joinConversation เพื่อทําให้ปุ่มใช้งานได้
ค้นหาความคิดเห็น TODO อื่นๆ ในข้อความที่ถูกตัดเนื้อหาสําหรับภาษา /joinConversation
ขั้นตอนที่ 2/เส้นทาง/ดัชนี.js
/**
* Updates the thread state and sends a representative join signal to the user.
*/
router.post('/joinConversation', async function(req, res, next) {
let conversationId = req.body.conversationId;
// TODO: Update the thread state to LIVE_AGENT_THREAD_STATE and post a REPRESENTATIVE_JOINED event.
res.json({
'result': 'ok',
});
});
คุณต้องอัปเดตสถานะของชุดข้อความอีกครั้งเป็น LIVE_AGENT_THREAD_STATE นอกจากนี้ต้องใช้เมธอด conversations.events.create ของ Business Messages API เพื่อโพสต์กิจกรรม REPRESENTATIVE_JOINED
หากต้องการสร้างเปย์โหลดคําขอ คุณจะต้องตั้งค่าช่องที่ระบุไว้ในตารางต่อไปนี้
ชื่อช่อง | คําแนะนํา |
| ตั้งค่าเป็น 'conversations/{conversationId}' |
| สร้างรหัสแบบสุ่มของคุณสําหรับเหตุการณ์ |
| ใช้เมธอด |
| นี่คือตัวเนื้อหากิจกรรม คุณควรตั้งค่า eventType และตัวแทน |
ดูหน้าข้อมูลอ้างอิงสําหรับวิธีสร้าง หรือหน้าการอ้างอิงเหตุการณ์เพื่อรับความช่วยเหลือ
เมื่อติดตั้งใช้งานเสร็จแล้ว ให้ทําให้แอปใช้งานได้อีกครั้ง และคลิกปุ่มเข้าร่วมแชท กล่องโต้ตอบการสนทนาที่เข้าร่วมจะปรากฏขึ้น และสถานะของแชทจะเปลี่ยนเป็น "แชทสด" หากดูการสนทนาในอุปกรณ์เคลื่อนที่ คุณจะเห็นโน้ตในแชทที่ตัวแทนแบบเรียลไทม์เข้าร่วม
ยินดีด้วย ในขั้นตอนถัดไป เราจะมาดูวิธีทําให้ตัวแทนแบบเรียลไทม์พูดคุยกับผู้ใช้
4. การรับส่งข้อความในฐานะตัวแทนแบบสด
เมื่อเข้าร่วมการสนทนาแล้ว ก็ถึงเวลาส่งข้อความในฐานะตัวแทนแบบสด
ไปที่ไดเรกทอรี step-3 และทําให้แอปใช้งานได้อีกครั้ง ใน CRM ให้คลิกชุดข้อความสนทนาจากขั้นตอนก่อนหน้า ตอนนี้คุณควรจะเห็นอินเทอร์เฟซการแชทพื้นฐาน จากที่นี่ คุณสามารถดูข้อความของผู้ใช้ในแบบเรียลไทม์
อย่างไรก็ตาม การส่งข้อความในขณะที่ตัวแทนยังใช้งานไม่ได้ คุณจําเป็นต้องดําเนินการในขั้นตอนนี้เสร็จสิ้น
เปิดไฟล์ routes/index.js และดูปลายทางที่เพิ่มใหม่ 3 รายการดังนี้
/messages: รับไฟล์มุมมองmessages.ejsและแสดงผลในเบราว์เซอร์ เมื่อคุณคลิกที่ชุดข้อความการสนทนาจากดัชนี คุณจะไปที่หน้าใดหน้าหนึ่งต่อไปนี้/retrieveMessages: รับเนื้อหาของชุดข้อความและแสดงรายการข้อความที่จัดรูปแบบทั้งหมดในการสนทนา หน้าข้อความจะเรียกใช้ปลายทางนี้เป็นระยะๆ เพื่อแสดงข้อความล่าสุด/sendMessage: ส่งข้อความจากตัวแทน Agent แบบสดไปยังผู้ใช้ หน้าข้อความจะเรียกสิ่งนี้เมื่อคุณคลิก ส่ง ยังไม่ได้ใช้งานในขณะนี้
ลองมาดูวิธีที่มีอยู่ของ storeAndSendResponse กัน
ขั้นตอนที่ 3/เส้นทาง/ดัชนี.js
/**
* Updates the thread, adds a new message and sends a response to the user.
*
* @param {string} message The message content that was received.
* @param {string} conversationId The unique id for this user and agent.
* @param {string} threadState Represents who is managing the conversation for the CRM.
* @param {string} representativeType The representative sending the message, BOT or HUMAN.
*/
async function storeAndSendResponse(message, conversationId, threadState, representativeType) {
...
}
เว็บฮุคใช้วิธีนี้ในการส่งคําตอบจากบ็อต echo อยู่แล้ว เมธอดนี้จะจัดเก็บข้อมูลข้อความขาเข้าในออบเจ็กต์ Cloud Datastore ของการสนทนาก่อน จากนั้นจึงส่งข้อความตอบกลับ ตรวจสอบวัตถุของข้อความที่สร้างขึ้นอย่างละเอียด โดยเฉพาะประเภทตัวแทน
ตอนนี้ ให้ใช้ปลายทาง /sendMessage ด้วยตัวคุณเอง คุณใช้วิธี storeAndSendResponse ที่มีอยู่ได้ที่นี่เพื่อทํางานส่วนใหญ่ สิ่งสําคัญคือต้องตั้งตัวแทนที่ถูกต้อง
เมื่อแก้ปัญหาได้แล้ว ให้ทําให้แอปใช้งานได้อีกครั้ง แล้วกลับไปที่การสนทนาใน CRM ต่อไปนี้คุณจะเห็นข้อความปรากฏในประวัติการแชทได้แล้ว นอกจากนี้ คุณยังจะเห็นข้อความของตัวแทนแสดงบนอุปกรณ์เคลื่อนที่ทดสอบด้วย
ก่อนดําเนินการต่อ โปรดตรวจสอบว่าคุณเข้าใจวิธีการทํางานของปลายทางใหม่ ในขั้นตอนถัดไป คุณจะต้องเพิ่มปลายทางของคุณเองเพื่อออกจากการสนทนา
5. กําลังออกจากการสนทนา
หลังจากช่วยผู้ใช้ตอบคําถามแล้ว คุณอาจต้องออกจากการสนทนาและให้ผู้ใช้คุยกับบ็อตอีกครั้ง ใน Business Messages การเปลี่ยนแปลงนี้จะส่งสัญญาณจากเหตุการณ์ REPRESENTATIVE_LEFT
ไปที่ไดเรกทอรี step-4 ทําให้แอปใช้งานได้อีกครั้ง แล้วกลับไปที่ชุดข้อความการสนทนา ขณะนี้มีลิงก์ปิดและออกจากการสนทนาที่ด้านล่างของชุดข้อความ ลิงก์นี้ยังใช้ไม่ได้เนื่องจากปลายทาง leaveConversation ไม่ได้ใช้งาน
ดูไฟล์ index.js มีความคิดเห็น TODO ที่แนะนําให้สร้างปลายทาง leaveConversation ใหม่
ขั้นตอนที่ 4/routes/index.js
/*
* TODO: Create a '/leaveConversation' endpoint that does the following:
* - Updates the thread to BOT_THREAD_STATE.
* - Sends a REPRESENTATIVE_LEFT event.
* - Sends a message to the thread informing the user that they are speaking to the echo bot again.
*
* Hint: You can use the same methods that '/joinConversation' uses.
*/
ในการใช้วิธีนี้ คุณจําเป็นต้องนําทุกอย่างที่ได้เรียนรู้จาก Codelab มาปรับใช้ ปลายทางนี้ควรทําดังนี้
- อัปเดตชุดข้อความเป็น
BOT_THREAD_STATE - ส่งเหตุการณ์
REPRESENTATIVE_LEFT - ส่งข้อความในการสนทนาเพื่อบอกผู้ใช้ว่ากําลังพูดกับบ็อตเสียงก้อง ใช้เมธอด
storeAndSendResponseโปรดทราบว่าเปลี่ยนตัวแทนกลับเป็นBOTแล้ว
ขั้นตอนสุดท้ายคือการแสดงสถานะของการสนทนาสําหรับผู้ใช้ ผู้ใช้จะเห็นเหตุการณ์เมื่อตัวแทนออกจากแชท แต่อาจไม่รู้ว่ากําลังพูดอยู่กับบ็อตก้องอีกครั้ง การส่งข้อความจากบ็อตโดยตรงจะช่วยลดความสับสนของผู้ใช้และปรับปรุงประสบการณ์การใช้งาน
ในตอนนี้ เจ้าพนักงานบ็อตกําลังจัดการสิ่งต่างๆ อยู่ ตัวแทนแบบเรียลไทม์ของคุณจะพร้อมเข้าร่วมการสนทนาอีกครั้ง ลองเล่นกับโค้ดตัวอย่างและ CRM ได้เท่าที่ต้องการ ลองทดสอบแนวคิดหลายๆ อย่างที่คุณมีสําหรับประสบการณ์การโอน Agent สําหรับธุรกิจของคุณแบบสดๆ และดูว่าจะเป็นอย่างไร
6. ใกล้จะเสร็จแล้ว
ขอแสดงความยินดีกับ Codelab การโอน Agent แบบสด
คุณได้สร้างตัวแทนที่จัดการการโอน Agent แบบสดเรียบร้อยแล้ว นอกจากนี้ยังได้เรียนรู้วิธีติดตามสถานะการสนทนาด้วย Cloud Datastore
การโอน Agent แบบสดจะทําให้คุณฝากคําขอตามปกติไว้กับบ็อต ส่วน Agent แบบสดจะจัดการคําถามที่ซับซ้อนกว่านั้น ผู้ใช้ของคุณจะพึงพอใจกับประสบการณ์ที่กําหนดเองและมีประโยชน์ใหม่ๆ ซึ่งจะช่วยเพิ่มโอกาสที่จะกลับมาและแนะนําธุรกิจของคุณกับเพื่อนๆ
ขั้นตอนถัดไป
โปรดดู Codelab ต่อไปนี้
อ่านเพิ่มเติม
- อ่านข้อมูลพื้นฐานเกี่ยวกับการโอน Agent แบบสดด้วยคู่มือ Handoff จากบ็อตไปยัง Live Agent
- อัปเกรดบ็อตเสียงก้องเป็นบ็อตคําถามที่พบบ่อยด้วยคู่มือ Dialogflow