Chuyển nhân viên hỗ trợ trực tiếp

1. Giới thiệu

53003251caaf2be5.png 6717b85f57d859d3.png

Lần cập nhật gần đây nhất: ngày 23 tháng 08 năm 2021

Chuyển dữ liệu trực tiếp của nhân viên hỗ trợ bằng Business Messages

Tính năng chuyển nhân viên hỗ trợ trực tiếp của Business Messages cho phép nhân viên hỗ trợ của bạn bắt đầu cuộc trò chuyện dưới vai trò bot và chuyển giữa cuộc trò chuyện với một nhân viên hỗ trợ trực tiếp (người đại diện). Bot của bạn có thể xử lý các câu hỏi phổ biến như giờ mở cửa, còn nhân viên hỗ trợ trực tiếp có thể mang đến trải nghiệm phù hợp, đồng thời có nhiều quyền truy cập hơn vào ngữ cảnh của người dùng. Khi quá trình chuyển đổi giữa hai trải nghiệm này diễn ra suôn sẻ, người dùng sẽ nhận được câu trả lời một cách nhanh chóng và chính xác cho các câu hỏi của mình. Nhờ đó, tỷ lệ tương tác của người dùng cũ sẽ cao hơn và mức độ hài lòng của khách hàng cũng tăng lên.

Lớp học lập trình này sẽ hướng dẫn bạn cách sử dụng đầy đủ tính năng chuyển nhân viên hỗ trợ đang hoạt động.

Sản phẩm bạn sẽ tạo ra

Trong lớp học lập trình này, bạn sẽ xây dựng một webhook cho nhân viên hỗ trợ có thể gửi và nhận các sự kiện chuyển nhân viên hỗ trợ trực tiếp. Bạn sẽ sử dụng giao diện người dùng cơ bản do mã khởi đầu cung cấp để kiểm thử xem bạn đã tạo những gì.

49aca3df6b196c50.png

Kiến thức bạn sẽ học được

  • Cách lưu trữ và quản lý trạng thái cuộc trò chuyện.
  • Cách sử dụng Business Messages để gửi sự kiện chuyển nhân viên hỗ trợ trực tiếp.
  • Cách thiết lập webhook và giao diện người dùng cơ bản để tham gia cuộc trò chuyện với tư cách là nhân viên hỗ trợ.
  • Các phương pháp hay nhất để sử dụng API Business Messages.

Lớp học lập trình này tập trung vào việc sử dụng Business Messages API để triển khai tính năng chuyển nhân viên hỗ trợ trực tiếp. Bạn có thể đọc qua mã khởi đầu cho từng giai đoạn, nhưng chỉ cần triển khai mã liên quan đến Business Messages.

Bạn cần

  • Một nhân viên hỗ trợ của Business Messages, bao gồm cả khoá tài khoản dịch vụ của bạn. Bạn có thể tạo nhân viên hỗ trợ bằng cách làm theo phần Hướng dẫn tạo nhân viên hỗ trợ.
  • Một cấu hình Cloud Datastore đang hoạt động được liên kết với dự án GCP của nhân viên hỗ trợ của bạn. Bạn có thể sử dụng hướng dẫn bắt đầu nhanh Cloud Datastore để thiết lập. Bạn không cần biết cách sử dụng Cloud Datastore.
  • Một máy tính đã cài đặt Google Cloud SDKNode.js (phiên bản 10 trở lên).
  • Thiết bị Android (phiên bản 5 trở lên) hoặc thiết bị iOS để kiểm thử trải nghiệm người dùng.
  • Có kinh nghiệm lập trình ứng dụng web. Bạn sẽ viết một lượng nhỏ mã JavaScript và có thể cần phải gỡ lỗi những gì bạn viết.

2. Tạo bot tạo tiếng vang

Ở bước này, bạn sẽ triển khai một đại diện bot cơ bản có tên là "bot Echo". Bot này nhận tin nhắn của người dùng, ghi nhật ký vào một chuỗi trò chuyện trong Cloud Datastore, sau đó "lặp lại" tin nhắn của người dùng bằng cách trả lời bằng cùng một nội dung. Sau khi có bot cơ bản và cơ sở hạ tầng ghi nhật ký, bạn có thể thêm vào đó để tạo quy trình triển khai chuyển nhân viên hỗ trợ trực tiếp đầy đủ ở các bước sau.

Tải mã nguồn ban đầu

Trong dòng lệnh, hãy sao chép mã khởi đầu Live Agent Transfer vào thư mục đang làm việc của dự án bằng lệnh sau:

git clone https://github.com/google-business-communications/bm-nodejs-live-agent-transfer

Tìm hiểu về mã khởi đầu

Hãy cùng tìm hiểu cấu trúc mã khởi đầu mà bạn sẽ thực hiện xuyên suốt lớp học lập trình này.

Chuyển đến thư mục step-1 và xem nội dung của thư mục đó. Lớp này chứa các phần tử sau:

  • bin: Thư mục này chứa tập lệnh khởi đầu www giúp thiết lập và định cấu hình máy chủ.
  • libs: Thư mục này chứa datastore_util.js, chứa các phương thức thuận tiện để đọc và ghi từ Cloud Datastore. Bạn không cần hiểu cách hoạt động của tệp này. Bạn chỉ cần lưu ý các phương thức có sẵn và chức năng của chúng.
  • resources: Tệp này chứa khoá tài khoản dịch vụ của bạn dưới dạng tệp có tên credentials.json.
  • routes (tuyến đường): Tệp index.js chứa webhook và tất cả các phương thức trợ giúp của webhook. Đây là tệp chính mà bạn sẽ làm việc và thêm vào.
  • view: Thư mục này chứa các tệp mẫu EJS cho các phần tử trên giao diện người dùng. Trang này sẽ chứa các tệp khác trong các bước sau.
  • app.js, app.yaml, package.json: Các tệp này định cấu hình ứng dụng và các phần phụ thuộc của ứng dụng.

Trước khi triển khai, hãy tải khoá tài khoản dịch vụ GCP xuống rồi sao chép tệp thông tin xác thực JSON vào từng thư mục tài nguyên trong mã mẫu. Hãy làm việc này cho từng bước của lớp học lập trình.

cp credentials.json bm-nodejs-live-agent-transfer/step-<step number>/resources/credentials.json

Triển khai mã khởi đầu

Trong dòng lệnh, hãy chuyển đến thư mục step-1 của mẫu. Sau đó, hãy thiết lập công cụ gcloud để sử dụng dự án của bạn trên Google Cloud bằng cách đặt mã dự án mà bạn đã dùng để đăng ký với các API.

gcloud config set project <PROJECT_ID>

Để triển khai ứng dụng, hãy chạy lệnh sau:

gcloud app deploy

Lưu ý URL của ứng dụng đã triển khai trong kết quả của lệnh gần đây nhất:

Deployed service [default] to [https://PROJECT_ID.appspot.com]

Mã khởi đầu mà bạn vừa triển khai chứa một ứng dụng web có webhook để nhận tin nhắn từ Business Messages. Ứng dụng sẽ đọc lại thông báo cho người dùng và ghi lại các chuỗi thông báo vào Cloud Datastore.

Định cấu hình nhân viên hỗ trợ

Chuyển đến trang Cài đặt tài khoản trong Business Communications Developer Console, rồi đặt webhook thành URL của ứng dụng đã triển khai. Ví dụ: https://PROJECT_ID.appspot.com/callback/.

Sau đó, trên trang thông tin về Nhân viên hỗ trợ, hãy thiết lập loại tương tác chính và phụ thành Bot và Nhân lực tương ứng.

db0cca5b74f999ad.png

Đang trò chuyện với bot báo hiệu

Mở nhân viên hỗ trợ của bạn trong Developer Console. Bạn sẽ thấy trang Tổng quan để xem thông tin chi tiết về nhân viên hỗ trợ. Sao chép URL thử nghiệm nhân viên hỗ trợ khớp với thiết bị thử nghiệm di động của bạn. Sử dụng URL này trên thiết bị di động của bạn để chạy giao diện trò chuyện của nhân viên hỗ trợ.

536313929e5c0b3e.png

Tương tác với nhân viên hỗ trợ bằng cách gửi một vài tin nhắn. Nền tảng trò chuyện chỉ sao chép những gì bạn nói, không phải là trải nghiệm rất hữu ích cho người dùng. Giá như có cách nào đó để nói chuyện với một người thật!

3. Đang tham gia cuộc trò chuyện

Bây giờ, hãy cùng xem cuộc trò chuyện từ góc độ của nhân viên hỗ trợ trực tiếp. Là một nhân viên hỗ trợ trực tiếp, bạn cần biết một số thông tin về cuộc trò chuyện trước khi tham gia, chẳng hạn như mã cuộc trò chuyện. Bạn cũng nên biết liệu người dùng đã yêu cầu trò chuyện với nhân viên hỗ trợ trực tiếp hay chưa. Ở bước này, bạn sẽ sử dụng một trang CRM (Quản lý quan hệ khách hàng) cơ bản để xem thông tin này và tham gia cuộc trò chuyện với tư cách là một nhân viên hỗ trợ trực tiếp.

Đoạn mã khởi đầu cho bước này sẽ thêm một hệ thống CRM cơ bản liệt kê tất cả các chuỗi trò chuyện đang diễn ra cho nhân viên hỗ trợ. Hãy cùng xem xét hệ thống CRM đó để biết những cuộc trò chuyện nào có thể cần nhân viên hỗ trợ trực tiếp chú ý.

Chuyển đến thư mục step-2 và triển khai lại ứng dụng như đã thực hiện trong bước trước.

Khi triển khai ứng dụng, bạn sẽ thấy một URL mục tiêu. Truy cập vào URL này trong trình duyệt để xem một danh sách có chuỗi trò chuyện mà bạn đã bắt đầu ở bước trước. Trạng thái của cuộc trò chuyện hiện là "Do bot quản lý" vì bot này đang đóng vai trò là người đại diện cho nhân viên hỗ trợ của chúng tôi trong cuộc trò chuyện này.

8f624e9befb8e827.png

Nút Tham gia cuộc trò chuyện xuất hiện nhưng chưa có chức năng gì. Trên giao diện này, bạn cũng không biết được người dùng có muốn trò chuyện với một nhân viên hỗ trợ hay không.

Business Messages cung cấp một sự kiện trực tiếp do nhân viên hỗ trợ yêu cầu để cho biết thời điểm người dùng muốn trò chuyện với nhân viên hỗ trợ. Bạn cần theo dõi trạng thái đó để liệt kê trong giao diện người dùng.

Hãy xem phương thức gọi lại trong index.js. Bình luận TODO cho biết nơi bạn cần nắm bắt yêu cầu của người dùng về một nhân viên hỗ trợ đang hoạt động và cập nhật trạng thái chuỗi.

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.
      }
    }
  });
...
});

Bạn cần sử dụng các phương thức trong libs/datastore_utils.js để tải chuỗi cuộc trò chuyện hiện tại và cập nhật trạng thái của chuỗi trò chuyện đó thành QUEUED_THREAD_STATE.

Nếu bạn không biết nên làm gì, hãy xem qua các giải pháp. Mã khởi đầu bao gồm một thư mục solutions trong mỗi bước mà bạn cần hoàn tất một số mã. Các thư mục này chứa bản sao của toàn bộ ứng dụng cùng với quá trình triển khai hoàn chỉnh cho bước cụ thể.

Sau khi hoàn tất quá trình triển khai và triển khai lại ứng dụng, hãy dùng trình đơn mục bổ sung trong cuộc trò chuyện trên thiết bị di động để yêu cầu nhân viên hỗ trợ trực tiếp.

e58d2b77e9c64492.png

Bây giờ, nếu quay lại CRM, bạn sẽ thấy ghi chú trên chuỗi trò chuyện có nội dung "Đã yêu cầu nhân viên hỗ trợ trực tiếp". Người dùng này cần một số trợ giúp từ một người! Bạn cần triển khai điểm cuối joinConversation để nút này có thể hoạt động.

Tìm nhận xét TODO khác trong phương thức xếp gọn cho /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',
  });
});

Bạn cần cập nhật lại trạng thái luồng, lần này là LIVE_AGENT_THREAD_STATE. Ngoài ra, bạn cần sử dụng phương thức conversations.events.create của API Business Messages để đăng sự kiện REPRESENTATIVE_JOINED.

Để tạo tải trọng yêu cầu, bạn cần đặt các trường được nêu trong bảng sau:

Tên trường

Gợi ý

parent

Hãy đặt cuộc trò chuyện này thành "conversations/{conversationId}".

eventId

Tạo mã nhận dạng ngẫu nhiên của riêng bạn cho sự kiện đó.

auth

Sử dụng phương thức initCredentials được cung cấp.

resource

Đây là chính nội dung sự kiện. Bạn nên đặt eventType và đại diện.

Hãy xem trang tham khảo về phương thức tạo hoặc trang tham khảo về sự kiện để được trợ giúp.

Sau khi triển khai xong, hãy triển khai lại ứng dụng rồi nhấp vào nút Tham gia cuộc trò chuyện. Hộp thoại Đã tham gia cuộc trò chuyện sẽ xuất hiện và trạng thái trò chuyện sẽ chuyển thành "Trò chuyện trực tiếp". Nếu xem cuộc trò chuyện trên thiết bị di động, bạn sẽ thấy ghi chú trong cuộc trò chuyện mà nhân viên hỗ trợ trực tiếp của bạn đã tham gia.

Xin chúc mừng! Ở bước tiếp theo, chúng ta sẽ xem cách làm cho nhân viên hỗ trợ trực tiếp nói chuyện với người dùng của bạn.

4. Nhắn tin với tư cách nhân viên hỗ trợ trực tiếp

Giờ bạn đã tham gia cuộc trò chuyện, đã đến lúc gửi một số tin nhắn với tư cách là nhân viên hỗ trợ trực tiếp.

Chuyển đến thư mục step-3 và triển khai lại ứng dụng. Trong CRM, hãy nhấp vào chuỗi trò chuyện của bạn ở bước trước. Lúc này, bạn sẽ thấy giao diện trò chuyện cơ bản. Từ đây, bạn có thể xem tin nhắn của người dùng theo thời gian thực.

46dd083f08f43961.png

Tuy nhiên, việc gửi tin nhắn với tư cách nhân viên hỗ trợ vẫn chưa được triển khai. Bạn cần phải hoàn tất việc đó trong bước này.

Mở tệp routes/index.js và xem 3 điểm cuối mới được thêm:

  • /messages: Lấy tệp khung hiển thị messages.ejs và hiển thị tệp đó trong trình duyệt. Khi nhấp vào một chuỗi cuộc trò chuyện trong chỉ mục, bạn sẽ được chuyển đến một trong những trang sau.
  • /retrieveMessages: Lấy nội dung thư của một chuỗi và trả về danh sách tất cả các thư trong cuộc trò chuyện đã được định dạng. Trang thông báo sẽ định kỳ gọi điểm cuối này để cho thấy các thông báo mới nhất.
  • /sendMessage: Gửi tin nhắn từ nhân viên hỗ trợ trực tiếp đến người dùng. Trang tin nhắn sẽ gọi hàm này khi bạn nhấp vào Gửi. Hiện chưa triển khai tính năng này.

Bây giờ, hãy xem phương thức storeAndSendResponse hiện có:

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) {
...
}

Webhook đã sử dụng phương thức này để gửi câu trả lời từ bot báo hiệu. Trước tiên, phương thức này sẽ lưu trữ dữ liệu tin nhắn đến trong đối tượng Cloud Datastore cho cuộc trò chuyện. Sau đó, Chrome sẽ gửi tin nhắn phản hồi. Xem xét kỹ đối tượng thông báo mà nó tạo ra, đặc biệt là ở loại đại diện.

Bây giờ, hãy tự triển khai điểm cuối /sendMessage. Bạn có thể sử dụng phương thức storeAndSendResponse hiện có tại đây để thực hiện hầu hết công việc. Điều quan trọng là hãy nhớ đặt đúng đại diện.

Sau khi hoàn thành bước này, hãy triển khai lại ứng dụng và quay lại cuộc trò chuyện của bạn trong CRM. Giờ đây, bạn có thể xem tin nhắn của mình xuất hiện trong nhật ký trò chuyện. Bạn cũng có thể xem tin nhắn của nhân viên hỗ trợ xuất hiện trên thiết bị thử nghiệm di động.

49aca3df6b196c50.png

Trước khi tiếp tục, hãy đảm bảo bạn đã hiểu rõ cách hoạt động của các điểm cuối mới. Trong bước tiếp theo, bạn sẽ thêm điểm cuối của riêng mình để rời khỏi cuộc trò chuyện.

5. Rời khỏi cuộc trò chuyện

Sau khi trợ giúp người dùng bằng câu hỏi của họ, bạn nên rời khỏi cuộc trò chuyện và để người dùng tiếp tục trò chuyện với bot. Trong Business Messages, sự thay đổi này được báo hiệu bằng một sự kiện REPRESENTATIVE_LEFT.

Chuyển đến thư mục step-4, triển khai lại ứng dụng và quay lại chuỗi trò chuyện của bạn. Hiện có một đường liên kết Đóng và rời khỏi cuộc trò chuyện ở cuối chuỗi thư. Đường liên kết này chưa hoạt động vì chưa triển khai điểm cuối leaveConversation.

ef4ad8107c3fff2.png

Xem tệp index.js. Có một nhận xét trong mục TODO hướng dẫn bạn tạo điểm cuối leaveConversation mới.

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.
 */

Để triển khai việc này, bạn cần tổng hợp mọi kiến thức đã học được từ lớp học lập trình từ trước đến nay. Điểm cuối này sẽ thực hiện những việc sau:

  • Cập nhật luồng thành BOT_THREAD_STATE.
  • Gửi một sự kiện REPRESENTATIVE_LEFT.
  • Gửi tin nhắn trong cuộc trò chuyện để cho người dùng biết họ đang nói chuyện với bot nghe lại. Sử dụng phương thức storeAndSendResponse. Hãy nhớ rằng người đại diện đã chuyển lại thành BOT.

Bước cuối cùng sẽ làm rõ trạng thái trò chuyện cho người dùng. Người dùng sẽ thấy một sự kiện khi một người đại diện rời khỏi cuộc trò chuyện, nhưng không nhất thiết phải biết rằng họ đang nói lại với bot nghe lại. Bằng cách gửi tin nhắn trực tiếp từ bot, bạn có thể giúp người dùng bớt nhầm lẫn và cải thiện trải nghiệm.

Vì bot này đang xử lý mọi việc nên nhân viên hỗ trợ trực tiếp của bạn có thể tham gia cuộc trò chuyện khác. Hãy thử sử dụng mã mẫu và CRM bao nhiêu tuỳ thích. Hãy thử nghiệm một số ý tưởng của bạn về trải nghiệm chuyển nhân viên hỗ trợ trực tiếp của doanh nghiệp và xem ý tưởng của bạn.

6. Kết thúc

Chúc mừng bạn đã hoàn thành lớp học lập trình về tính năng chuyển nhân viên hỗ trợ trực tiếp!

Bạn đã tạo một nhân viên hỗ trợ có thể xử lý quá trình chuyển nhân viên hỗ trợ trực tiếp từ đầu đến cuối. Bạn cũng đã tìm hiểu một cách để theo dõi trạng thái trò chuyện với Cloud Datastore.

Với tính năng chuyển nhân viên hỗ trợ trực tiếp, bạn sẽ gửi các yêu cầu thường gặp cho bot của mình, còn nhân viên hỗ trợ trực tiếp sẽ xử lý các yêu cầu phức tạp hơn. Người dùng của bạn sẽ hài lòng hơn với trải nghiệm hữu ích và được tuỳ chỉnh mới, tăng khả năng họ quay lại và giới thiệu doanh nghiệp của bạn với bạn bè.

Tiếp theo là gì?

Hãy xem một số lớp học lập trình sau:

Tài liệu đọc thêm

Tài liệu tham khảo