이 Codelab 정보
1. 소개
최종 업데이트: 2021년 8월 23일
Business Messages를 통한 실시간 상담사 트랜스퍼
Business Messages의 실시간 상담사 트랜스퍼 기능을 사용하면 상담사가 봇으로 대화를 시작하고 대화 중간에 실시간 상담사 (사람 상담사)로 전환할 수 있습니다. 봇은 영업시간과 같은 일반적인 질문을 처리할 수 있고, 실시간 상담사는 사용자의 맥락에 더 많이 액세스하여 맞춤설정된 환경을 제공할 수 있습니다. 두 환경 간의 전환이 원활하면 사용자가 질문에 빠르고 정확하게 답변을 받을 수 있어 재방문 참여율이 높아지고 고객 만족도가 높아집니다.
이 Codelab에서는 실시간 상담사 트랜스퍼 기능을 최대한 활용하는 방법을 알아봅니다.
빌드할 항목
이 Codelab에서는 실시간 상담사 트랜스퍼 이벤트를 전송하고 수신할 수 있는 상담사를 위한 웹훅을 빌드합니다. 시작 코드에서 제공하는 기본 UI를 사용하여 빌드한 내용을 테스트합니다.
학습할 내용
- 대화 상태를 저장하고 관리하는 방법
- Business Messages를 사용하여 실시간 상담사 트랜스퍼 이벤트를 전송하는 방법
- 상담사로 대화에 참여하기 위한 웹훅과 기본 UI를 설정하는 방법
- Business Messages API 사용 권장사항
이 Codelab에서는 Business Messages API를 사용하여 실시간 상담사 트랜스퍼를 구현하는 방법을 중점적으로 다룹니다. 각 단계의 시작 코드를 읽어볼 수 있지만 비즈니스 메시지와 관련된 코드만 구현하면 됩니다.
필요한 항목
- 서비스 계정 키를 포함한 Business Messages 에이전트 상담사 만들기 가이드에 따라 상담사를 만들 수 있습니다.
- 에이전트의 GCP 프로젝트에 연결된 작동하는 Cloud Datastore 구성 Cloud Datastore 빠른 시작을 사용하여 설정할 수 있습니다. Cloud Datastore 사용 방법을 알 필요는 없습니다.
- Google Cloud SDK 및 Node.js (버전 10 이상)가 설치된 컴퓨터
- 사용자 환경을 테스트하기 위한 Android 기기 (버전 5 이상) 또는 iOS 기기
- 웹 애플리케이션 프로그래밍 경험 소량의 JavaScript 코드를 작성하고 작성한 코드를 디버그해야 할 수도 있습니다.
2. 에코 봇 만들기
이 단계에서는 'Echo bot'이라는 기본 봇 대리인을 배포합니다. 이 봇은 사용자 메시지를 가져와 Cloud Datastore의 대화 스레드에 로깅한 다음 동일한 콘텐츠로 응답하여 사용자 메시지를 '반향'합니다. 기본 봇과 로깅 인프라가 있으면 이후 단계에서 이를 추가하여 전체 실시간 상담사 트랜스퍼 구현을 만들 수 있습니다.
시작 코드 가져오기
터미널에서 다음 명령어를 사용하여 실시간 상담사 트랜스퍼 시작 코드를 프로젝트의 작업 디렉터리로 클론합니다.
git clone https://github.com/google-business-communications/bm-nodejs-live-agent-transfer
시작 코드 이해하기
이 Codelab에서 사용할 시작 코드 구조를 살펴보겠습니다.
step-1 디렉터리로 이동하여 콘텐츠를 확인합니다. 여기에는 다음과 같은 요소가 포함됩니다.
- bin: 이 디렉터리에는 서버를 설정하고 구성하는 www 시작 스크립트가 포함되어 있습니다.
- libs: 이 디렉터리에는 Cloud Datastore에서 읽고 쓰기 위한 편의 메서드가 포함된
datastore_util.js가 포함되어 있습니다. 이 파일의 작동 방식을 이해할 필요는 없습니다. 사용 가능한 메서드와 그 기능만 알아두면 됩니다. - 리소스: 서비스 계정 키가
credentials.json라는 파일로 포함되어 있습니다. - routes:
index.js파일에는 webhook과 모든 도우미 메서드가 포함되어 있습니다. 이 파일은 작업하고 추가할 기본 파일입니다. - views: 이 디렉터리에는 UI 요소의 EJS 템플릿 파일이 포함되어 있습니다. 이후 단계에서 더 많은 파일이 포함됩니다.
- 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 디렉터리로 이동합니다. 그런 다음 API에 등록하는 데 사용한 프로젝트 ID를 설정하여 Google Cloud 프로젝트를 사용하도록 gcloud 도구를 설정합니다.
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/입니다.
그런 다음 상담사 정보 페이지에서 기본 상호작용 유형과 보조 상호작용 유형을 각각 봇과 사람으로 구성합니다.
에코 봇과 대화하기
Developers Console에서 상담사를 엽니다. 상담사의 세부정보를 검토할 수 있는 개요 페이지가 표시됩니다. 모바일 테스트 기기와 일치하는 상담사 테스트 URL을 복사합니다. 휴대기기에서 이 URL을 사용하여 상담사의 대화형 노출 영역을 실행합니다.
몇 개의 메시지를 보내 에이전트와 상호작용합니다. 대화형 노출 영역은 사용자가 말하는 내용만 복사하므로 사용자 환경이 좋지 않습니다. 사람과 대화할 수 있는 방법이 있으면 좋겠어.
3. 대화에 참여하기
이제 실시간 상담사의 관점에서 대화를 살펴보겠습니다. 실시간 상담사는 대화에 참여하기 전에 대화 ID와 같은 대화에 관한 몇 가지 사항을 알아야 합니다. 사용자가 실시간 상담사와 대화를 요청했는지 여부도 알아두면 도움이 됩니다. 이 단계에서는 기본 CRM (고객 관계 관리) 페이지를 사용하여 이 정보를 확인하고 실시간 상담사로 대화에 참여합니다.
이 단계의 시작 코드는 상담사의 진행 중인 모든 대화 대화목록을 나열하는 기본 CRM을 추가합니다. CRM을 살펴보고 실시간 상담사의 주의가 필요한 대화가 무엇인지 알아보겠습니다.
step-2 디렉터리로 이동하여 이전 단계에서와 같이 앱을 다시 배포합니다.
앱을 배포하면 타겟 URL이 표시됩니다. 브라우저에서 이 URL로 이동하여 이전 단계에서 시작한 대화 대화목록을 확인합니다. 이 대화에서 에코 봇이 상담사의 대리인 역할을 하고 있으므로 대화의 상태는 현재 'Bot-managed'(봇 관리)입니다.
채팅 참여 버튼이 표시되지만 아직 아무 작업도 하지 않습니다. 또한 이 인터페이스에서는 사용자가 실시간 상담사와 대화하고 싶어 하는지 알 수 없습니다.
Business Messages는 사용자가 실제 상담사와 대화하고 싶어 하는 시점을 나타내는 실제 상담사 요청 이벤트를 제공합니다. UI에 표시하려면 이 상태를 추적해야 합니다.
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 엔드포인트를 구현해야 합니다.
/joinConversation의 스텁 메서드에서 다른 TODO 주석을 찾습니다.
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로 업데이트해야 합니다. 또한 Business Messages API의 conversations.events.create 메서드를 사용하여 REPRESENTATIVE_JOINED 이벤트를 게시해야 합니다.
요청 페이로드를 만들려면 다음 표에 설명된 필드를 설정해야 합니다.
필드 이름 | 힌트 |
| 'conversations/{conversationId}'로 설정합니다. |
| 이벤트에 대한 자체 임의 ID를 생성합니다. |
| 제공된 |
| 이벤트 본문 자체입니다. eventType 및 대표자를 설정해야 합니다. |
생성 메서드 참조 페이지 또는 이벤트 참조 페이지를 참고하세요.
구현이 완료되면 앱을 다시 배포하고 채팅 참여 버튼을 클릭합니다. 대화에 참여함 대화상자가 표시되고 채팅 상태가 '실시간 채팅'으로 변경됩니다. 휴대기기에서 대화를 확인하면 채팅에 상담사가 참여했다는 메모가 표시됩니다.
축하합니다. 다음 단계에서는 실시간 상담사가 사용자와 대화하도록 하는 방법을 살펴봅니다.
4. 실제 상담사로 메시지 보내기
이제 대화에 참여했으므로 실시간 상담사 역할을 하며 메시지를 보내 보겠습니다.
step-3 디렉터리로 이동하여 앱을 재배포합니다. CRM에서 이전 단계의 대화목록을 클릭합니다. 이제 기본 채팅 인터페이스가 표시됩니다. 여기에서 사용자의 메시지를 실시간으로 확인할 수 있습니다.
하지만 상담사로서 메시지를 보내는 기능은 아직 구현되지 않았습니다. 이 단계에서 완료해야 합니다.
routes/index.js 파일을 열고 새로 추가된 세 개의 엔드포인트를 확인합니다.
/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) {
...
}
웹훅은 이미 이 메서드를 사용하여 에코 봇의 응답을 전송합니다. 이 메서드는 먼저 수신 메시지 데이터를 대화의 Cloud Datastore 객체에 저장합니다. 그런 다음 응답 메시지를 전송합니다. 생성되는 메시지 객체, 특히 대표 유형을 자세히 살펴보세요.
이제 /sendMessage 엔드포인트를 직접 구현합니다. 여기에서 기존 storeAndSendResponse 메서드를 사용하여 대부분의 작업을 실행할 수 있습니다. 중요한 것은 올바른 담당자를 설정하는 것입니다.
이 작업이 완료되면 앱을 다시 배포하고 CRM에서 대화로 돌아갑니다. 이제 채팅 기록에 메시지가 표시됩니다. 상담사의 메시지가 모바일 테스트 기기에 표시되는 것을 볼 수도 있습니다.
계속하기 전에 새 엔드포인트의 작동 방식을 이해해야 합니다. 다음 단계에서는 대화에서 나가는 자체 엔드포인트를 추가합니다.
5. 대화 종료
사용자의 질문을 해결한 후 대화에서 나와 사용자가 봇과 다시 대화하도록 할 수 있습니다. Business Messages에서는 이 변경사항이 REPRESENTATIVE_LEFT 이벤트로 신호를 보냅니다.
step-4 디렉터리로 이동하여 앱을 재배포하고 대화 대화목록으로 돌아갑니다. 이제 대화목록 하단에 대화 닫기 및 종료 링크가 표시됩니다. leaveConversation 엔드포인트가 구현되지 않았기 때문에 이 링크는 아직 작동하지 않습니다.
index.js 파일을 확인합니다. 새 leaveConversation 엔드포인트를 만들라는 TODO 주석이 있습니다.
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.
*/
이를 구현하려면 지금까지 Codelab에서 배운 모든 내용을 종합해야 합니다. 이 엔드포인트는 다음을 실행해야 합니다.
- 스레드를
BOT_THREAD_STATE로 업데이트합니다. REPRESENTATIVE_LEFT이벤트를 전송합니다.- 대화에서 사용자에게 에코 봇과 대화 중이라고 알리는 메시지를 보냅니다.
storeAndSendResponse메서드를 사용합니다. 담당자가BOT로 다시 변경되었습니다.
마지막 단계에서는 사용자에게 대화 상태를 명확히 합니다. 상담사가 채팅을 종료하면 사용자에게 이벤트가 표시되지만 반드시 에코 봇과 다시 대화하고 있다는 것을 알지는 못합니다. 봇에서 직접 메시지를 전송하면 사용자 혼란을 줄이고 환경을 개선할 수 있습니다.
이제 봇이 문제를 처리하고 있으므로 상담사는 다른 대화에 참여할 수 있습니다. 샘플 코드와 CRM을 원하는 만큼 사용해 보세요. 비즈니스의 실시간 상담사 트랜스퍼 환경에 대한 다양한 아이디어를 테스트해 보고 어떤 결과가 나오는지 확인해 보세요.
6. 요약
실시간 상담사 트랜스퍼 Codelab을 완료하셨습니다. 축하합니다.
실시간 상담사 트랜스퍼를 처음부터 끝까지 처리할 수 있는 상담사를 만들었습니다. Cloud Datastore를 사용하여 대화 상태를 추적하는 한 가지 방법도 알아봤습니다.
실시간 상담사 트랜스퍼를 사용하면 일반적인 요청은 봇에 맡기고 실시간 상담사가 더 복잡한 문의를 처리할 수 있습니다. 사용자는 새롭게 맞춤설정되고 유용한 환경에 더 만족하게 되어 다시 방문하고 친구에게 비즈니스를 추천할 가능성이 높아집니다.
다음 단계
다음 Codelab을 확인해 보세요.
추가 자료
- 봇에서 실시간 상담사에게 전달하기 가이드에서 실시간 상담사 전달의 기본사항을 검토하세요.
- Dialogflow 가이드를 사용하여 에코 봇을 FAQ 봇으로 업그레이드합니다.