1. บทนำ
อัปเดตล่าสุด: 23-08-2021
การโอนกับตัวแทนแบบเรียลไทม์ด้วย Business Messages
ฟีเจอร์การโอนไปยังตัวแทนแบบเรียลไทม์ของ Business Messages ช่วยให้ตัวแทนเริ่มการสนทนาในฐานะบ็อตและเปลี่ยนเป็นตัวแทนแบบเรียลไทม์ (ตัวแทนที่เป็นบุคคล) ในระหว่างการสนทนาได้ บอทสามารถจัดการคําถามทั่วไป เช่น เวลาทําการ ขณะที่ตัวแทนแบบเรียลไทม์สามารถมอบประสบการณ์การใช้งานที่ปรับแต่งได้ด้วยการเข้าถึงบริบทของผู้ใช้มากขึ้น เมื่อการเปลี่ยนผ่านระหว่าง 2 ประสบการณ์นี้ราบรื่น ผู้ใช้จะได้รับคำตอบอย่างรวดเร็วและถูกต้อง ส่งผลให้อัตราการมีส่วนร่วมที่กลับมาสูงขึ้นและความพึงพอใจของลูกค้าเพิ่มขึ้น
โค้ดแล็บนี้จะสอนวิธีใช้ฟีเจอร์การโอนกับตัวแทนแบบเรียลไทม์ให้เกิดประโยชน์สูงสุด
สิ่งที่คุณจะสร้าง
ในโค้ดแล็บนี้ คุณจะได้สร้างเว็บฮุคสำหรับตัวแทนที่สามารถส่งและรับเหตุการณ์การโอนตัวแทนแบบเรียลไทม์ คุณจะใช้ UI พื้นฐานที่โค้ดเริ่มต้นให้มาเพื่อทดสอบสิ่งที่สร้างขึ้น
สิ่งที่คุณจะได้เรียนรู้
- วิธีจัดเก็บและจัดการสถานะการสนทนา
- วิธีใช้ Business Messages เพื่อส่งเหตุการณ์การโอนตัวแทนแบบเรียลไทม์
- วิธีตั้งค่า Webhook และ UI พื้นฐานสำหรับการเข้าร่วมการสนทนาในฐานะตัวแทน
- แนวทางปฏิบัติแนะนำในการใช้ Business Messages API
โค้ดแล็บนี้มุ่งเน้นที่การใช้ Business Message API เพื่อใช้การโอนกับตัวแทนแบบเรียลไทม์ คุณสามารถอ่านโค้ดเริ่มต้นสำหรับแต่ละระยะได้ แต่คุณต้องใช้เฉพาะโค้ดที่เกี่ยวข้องกับ Business Messages
สิ่งที่ต้องมี
- ตัวแทน Business Messages รวมถึงคีย์บัญชีบริการ คุณสร้างตัวแทนได้โดยทำตามคู่มือสร้างตัวแทน
- การกําหนดค่า Cloud Datastore ที่ใช้งานได้ซึ่งลิงก์กับโปรเจ็กต์ GCP ของตัวแทน คุณใช้การเริ่มต้นใช้งาน Cloud Datastore อย่างรวดเร็วเพื่อตั้งค่านี้ได้ คุณไม่จำเป็นต้องทราบวิธีใช้ Cloud Datastore
- คอมพิวเตอร์ที่ติดตั้ง Google Cloud SDK และ Node.js (เวอร์ชัน 10 ขึ้นไป)
- อุปกรณ์ Android (เวอร์ชัน 5 ขึ้นไป) หรืออุปกรณ์ iOS เพื่อทดสอบประสบการณ์ของผู้ใช้
- มีประสบการณ์ด้านการเขียนโปรแกรมเว็บแอป คุณจะต้องเขียนโค้ด JavaScript เพียงเล็กน้อยและอาจต้องแก้ไขข้อบกพร่องของสิ่งที่เขียน
2. สร้างบ็อต Echo
ในขั้นตอนนี้ คุณจะนำตัวแทนบ็อตพื้นฐานที่เรียกว่า "Echo Bot" ไปใช้งาน บ็อตนี้จะรับข้อความของผู้ใช้ บันทึกลงในชุดข้อความการสนทนาใน Cloud Datastore แล้ว "สะท้อน" ข้อความของผู้ใช้ด้วยการตอบกลับด้วยเนื้อหาเดียวกัน เมื่อคุณมีโครงสร้างพื้นฐานของบ็อตและการบันทึกขั้นพื้นฐานแล้ว คุณสามารถเพิ่มโครงสร้างพื้นฐานดังกล่าวเพื่อสร้างการใช้งานการโอนตัวแทนแบบเรียลไทม์อย่างเต็มรูปแบบในขั้นตอนต่อๆ ไป
รับรหัสเริ่มต้น
ในเทอร์มินัล ให้โคลนโค้ดเริ่มต้นสำหรับการโอนตัวแทนแบบเรียลไทม์ไปยังไดเรกทอรีที่ทำงานของโปรเจ็กต์ด้วยคำสั่งต่อไปนี้
git clone https://github.com/google-business-communications/bm-nodejs-live-agent-transfer
ทําความเข้าใจโค้ดเริ่มต้น
มาดูโครงสร้างโค้ดเริ่มต้นที่คุณจะใช้ตลอดทั้ง Codelab
ไปที่ไดเรกทอรี step-1 แล้วดูเนื้อหา โดยไฟล์ดังกล่าวจะมีองค์ประกอบต่อไปนี้
- bin: ไดเรกทอรีนี้มีสคริปต์เริ่มต้น www ซึ่งจะตั้งค่าและกำหนดค่าเซิร์ฟเวอร์
- libs: ไดเรกทอรีนี้มี
datastore_util.jsซึ่งมีเมธอดที่สะดวกสำหรับการอ่านและเขียนจาก Cloud Datastore คุณไม่จำเป็นต้องเข้าใจวิธีการทำงานของไฟล์นี้ เพียงจดบันทึกวิธีการที่ใช้ได้และสิ่งที่วิธีการเหล่านั้นทำ - resources: ไฟล์นี้มีคีย์บัญชีบริการเป็นไฟล์ชื่อ
credentials.json - routes: ไฟล์
index.jsมี Webhook และเมธอดตัวช่วยทั้งหมด ไฟล์นี้เป็นไฟล์หลักที่คุณจะใช้และเพิ่มข้อมูล - views: ไดเรกทอรีนี้มีไฟล์เทมเพลต EJS สําหรับองค์ประกอบ UI โดยจะมีไฟล์อื่นๆ เพิ่มเติมในขั้นตอนต่อๆ ไป
- app.js, app.yaml, package.json: ไฟล์เหล่านี้จะกําหนดค่าแอปพลิเคชันและทรัพยากร Dependency ของแอป
ก่อนทำให้ใช้งานได้ ให้ดาวน์โหลดคีย์บัญชีบริการ GCP และคัดลอกไฟล์ข้อมูลเข้าสู่ระบบ JSON ไปยังไดเรกทอรีทรัพยากรแต่ละรายการในโค้ดตัวอย่าง ทําเช่นนี้กับทุกขั้นตอนของโค้ดแล็บ
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 Developer Console และตั้งค่า Webhook เป็น URL ของแอปพลิเคชันที่ติดตั้งใช้งาน เช่น https://PROJECT_ID.appspot.com/callback/
จากนั้นในหน้าข้อมูลตัวแทน ให้กําหนดค่าประเภทการโต้ตอบหลักและรองเป็น "บ็อต" และ "เจ้าหน้าที่" ตามลําดับ
การสนทนากับบ็อต Echo
เปิดตัวแทนในคอนโซลของนักพัฒนาแอป คุณจะเห็นหน้าภาพรวมที่ให้คุณตรวจสอบรายละเอียดของตัวแทน คัดลอก URL ทดสอบของตัวแทนที่ตรงกับอุปกรณ์ทดสอบบนอุปกรณ์เคลื่อนที่ ใช้ URL นี้ในอุปกรณ์เคลื่อนที่เพื่อเปิดแพลตฟอร์มการสนทนาของตัวแทน
โต้ตอบกับตัวแทนโดยส่งข้อความ 2-3 ข้อความ แพลตฟอร์มการสนทนาจะคัดลอกเฉพาะสิ่งที่คุณพูด ซึ่งไม่ใช่ประสบการณ์ที่มีประโยชน์มากนักสำหรับผู้ใช้ หากมีวิธีพูดคุยกับเจ้าหน้าที่จริงๆ
3. การเข้าร่วมการสนทนา
มาดูการสนทนาจากมุมมองของตัวแทนแบบเรียลไทม์กัน ในฐานะตัวแทนแบบเรียลไทม์ คุณจำเป็นต้องทราบข้อมูลบางอย่างเกี่ยวกับการสนทนาก่อนที่จะเข้าร่วม เช่น รหัสการสนทนา นอกจากนี้ คุณควรทราบว่าผู้ใช้ได้ขอพูดคุยกับตัวแทนแบบเรียลไทม์หรือไม่ ในขั้นตอนนี้ คุณจะใช้หน้า CRM (การจัดการลูกค้าสัมพันธ์) พื้นฐานเพื่อดูข้อมูลนี้และเข้าร่วมการสนทนาในฐานะตัวแทนแบบเรียลไทม์
รหัสเริ่มต้นสำหรับขั้นตอนนี้จะเพิ่ม CRM พื้นฐานซึ่งแสดงชุดข้อความการสนทนาต่อเนื่องทั้งหมดสำหรับตัวแทน เรามาดู CRM ดังกล่าวเพื่อดูว่าการสนทนาใดบ้างที่ตัวแทนแบบเรียลไทม์อาจต้องให้ความสนใจ
ไปที่ไดเรกทอรี step-2 และติดตั้งใช้งานแอปอีกครั้งตามที่ทําในขั้นตอนก่อนหน้า
เมื่อทําให้การเผยแพร่แอป คุณจะเห็น URL เป้าหมาย ไปที่ URL นี้ในเบราว์เซอร์เพื่อดูข้อมูลที่มีชุดข้อความการสนทนาที่คุณเริ่มไว้ในขั้นตอนก่อนหน้า ขณะนี้สถานะการสนทนาคือ "จัดการโดยบ็อต" เนื่องจาก Echo Bot ทำหน้าที่เป็นตัวแทนของตัวแทนของเราในการสนทนานี้
ปุ่มเข้าร่วมแชทปรากฏขึ้นแต่ยังไม่ได้ดำเนินการใดๆ นอกจากนี้ คุณไม่สามารถบอกได้จากอินเทอร์เฟซนี้ว่าผู้ใช้ต้องการพูดคุยกับตัวแทนแบบเรียลไทม์หรือไม่
Business Messages มีเหตุการณ์ที่ขอตัวแทนแบบเรียลไทม์ซึ่งระบุเวลาที่ผู้ใช้ต้องการพูดคุยกับตัวแทนแบบเรียลไทม์ คุณต้องติดตามสถานะดังกล่าวเพื่อแสดงใน UI
ดูเมธอด Callback ใน index.js ความคิดเห็น TODO บ่งบอกตำแหน่งที่คุณควรรับคําขอของผู้ใช้สำหรับตัวแทนแบบเรียลไทม์และอัปเดตสถานะชุดข้อความ
step-2/routes/index.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 คุณควรเห็นหมายเหตุในชุดข้อความการสนทนาที่ระบุว่า "ขอตัวแทนแบบเรียลไทม์" ผู้ใช้รายนี้ต้องการความช่วยเหลือจากเจ้าหน้าที่ คุณต้องติดตั้งใช้งานปลายทาง joinConversation เพื่อให้ปุ่มทํางาน
ค้นหาความคิดเห็น TODO อื่นๆ ในเมธอดการจำลองสําหรับ /joinConversation
step-2/routes/index.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 และตัวแทน |
ดูความช่วยเหลือได้ที่หน้าอ้างอิงสำหรับเมธอด create หรือหน้าอ้างอิงเหตุการณ์
เมื่อติดตั้งใช้งานเสร็จแล้ว ให้ทําให้การเผยแพร่แอปอีกครั้ง แล้วคลิกปุ่มเข้าร่วมแชท กล่องโต้ตอบเข้าร่วมการสนทนาจะปรากฏขึ้น และสถานะแชทจะเปลี่ยนเป็น "แชทสด" หากดูการสนทนาบนอุปกรณ์เคลื่อนที่ คุณจะเห็นหมายเหตุในแชทว่าตัวแทนแบบเรียลไทม์เข้าร่วมแล้ว
ยินดีด้วย ในขั้นตอนถัดไป เราจะมาดูวิธีให้ตัวแทนแบบเรียลไทม์พูดคุยกับผู้ใช้
4. การรับส่งข้อความในฐานะเจ้าหน้าที่บริการลูกค้า
เมื่อเข้าร่วมการสนทนาแล้ว ก็ถึงเวลาส่งข้อความในฐานะตัวแทนแบบเรียลไทม์
ไปที่ไดเรกทอรี step-3 แล้วติดตั้งใช้งานแอปอีกครั้ง ใน CRM ให้คลิกชุดข้อความการสนทนาจากขั้นตอนก่อนหน้า ตอนนี้คุณควรเห็นอินเทอร์เฟซแชทพื้นฐาน จากตรงนี้ คุณสามารถดูข้อความของผู้ใช้แบบเรียลไทม์
อย่างไรก็ตาม การส่งข้อความในฐานะตัวแทนยังไม่พร้อมใช้งาน คุณต้องดำเนินการให้เสร็จสมบูรณ์ในขั้นตอนนี้
เปิดไฟล์ routes/index.js แล้วดูที่ปลายทางที่เพิ่มใหม่ 3 รายการต่อไปนี้
/messages: รับไฟล์มุมมองmessages.ejsและแสดงผลในเบราว์เซอร์ เมื่อคลิกชุดข้อความการสนทนาจากดัชนี ระบบจะนําคุณไปยังหน้าใดหน้าหนึ่งต่อไปนี้/retrieveMessages: รับเนื้อหาข้อความของชุดข้อความและแสดงผลรายการข้อความทั้งหมดในการสนทนาที่มีการจัดรูปแบบ หน้าข้อความจะเรียกใช้ปลายทางนี้เป็นระยะๆ เพื่อแสดงข้อความล่าสุด/sendMessage: ส่งข้อความจากตัวแทนเจ้าหน้าที่บริการลูกค้าถึงผู้ใช้ หน้าข้อความจะเรียกใช้เหตุการณ์นี้เมื่อคุณคลิก "ส่ง" ขณะนี้ยังไม่ได้ติดตั้งใช้งาน
มาดูวิธีการ storeAndSendResponse ที่มีอยู่กัน
step-3/routes/index.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 ใหม่
step-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.
*/
หากต้องการใช้วิธีนี้ คุณจะต้องรวบรวมทุกสิ่งที่ได้เรียนรู้จากโค้ดแล็บจนถึงตอนนี้ ปลายทางนี้ควรทําดังนี้
- อัปเดตชุดข้อความเป็น
BOT_THREAD_STATE - ส่งเหตุการณ์
REPRESENTATIVE_LEFT - ส่งข้อความในการสนทนาเพื่อแจ้งให้ผู้ใช้ทราบว่ากำลังพูดกับ Echo Bot ใช้เมธอด
storeAndSendResponseโปรดทราบว่าตัวแทนได้เปลี่ยนกลับไปเป็นBOTแล้ว
ขั้นตอนสุดท้ายจะชี้แจงสถานะการสนทนาให้ผู้ใช้ทราบ ผู้ใช้จะเห็นเหตุการณ์เมื่อตัวแทนออกจากแชท แต่อาจไม่ทราบว่าตนเองกำลังพูดกับบอท Echo อีกครั้ง การส่งข้อความจากบ็อตโดยตรงจะช่วยลดความสับสนของผู้ใช้และปรับปรุงประสบการณ์การใช้งาน
เมื่อบ็อตจัดการสิ่งต่างๆ ได้แล้ว ตัวแทนที่พร้อมให้บริการแบบเรียลไทม์จะเข้าร่วมการสนทนาอื่นได้ ลองใช้โค้ดตัวอย่างและ CRM ได้ตามต้องการ ลองใช้แนวคิดต่างๆ ที่คุณมีสำหรับประสบการณ์การโอนกับตัวแทนแบบเรียลไทม์ของธุรกิจ แล้วดูผลลัพธ์ที่ได้
6. สรุป
ขอแสดงความยินดีที่ผ่าน Codelab การโอนกับตัวแทนแบบเรียลไทม์
คุณได้สร้างตัวแทนที่จัดการการโอนไปยังตัวแทนแบบเรียลไทม์ได้ตั้งแต่ต้นจนจบ นอกจากนี้ คุณยังได้เรียนรู้วิธีติดตามสถานะการสนทนาด้วย Cloud Datastore
เมื่อใช้การโอนไปยังตัวแทนแบบเรียลไทม์ คุณจะส่งคำขอทั่วไปให้บ็อตได้ ขณะที่ตัวแทนแบบเรียลไทม์จะจัดการคำถามที่ซับซ้อนมากขึ้น ผู้ใช้จะพึงพอใจมากขึ้นกับประสบการณ์การใช้งานใหม่ที่ปรับแต่งและมีประโยชน์ ซึ่งจะเพิ่มแนวโน้มที่ผู้ใช้จะกลับมาและแนะนำธุรกิจของคุณให้เพื่อนๆ ทราบ
ขั้นตอนถัดไป
ลองดู Codelab ต่อไปนี้
อ่านเพิ่มเติม
- ตรวจสอบพื้นฐานของการโอนไปยังตัวแทนแบบเรียลไทม์ด้วยคำแนะนำในการส่งต่อจากบอทไปยังตัวแทนแบบเรียลไทม์
- อัปเกรดบ็อต Echo เป็นบ็อตคําถามที่พบบ่อยด้วยคู่มือ Dialogflow