실시간 상담사 트랜스퍼

1. 소개

최종 업데이트: 2021년 8월 23일

Business Messages를 사용한 실시간 에이전트 트랜스퍼

Business Messages의 실시간 에이전트 트랜스퍼 기능을 사용하면 에이전트가 봇으로 대화를 시작하고 대화 중에 실제 상담사 (대리인)로 전환할 수 있습니다. 봇은 영업시간과 같은 일반적인 질문을 처리할 수 있고, 실제 상담사는 사용자의 컨텍스트에 더 많이 액세스할 수 있는 맞춤설정된 환경을 제공할 수 있습니다. 두 환경 간의 전환이 원활하게 이루어지면 사용자가 질문에 빠르고 정확하게 답변할 수 있으므로 재방문율과 고객 만족도가 높아집니다.

이 Codelab에서는 실시간 에이전트 트랜스퍼 기능을 최대한 활용하는 방법을 알아봅니다.

빌드할 항목

이 Codelab에서는 실시간 에이전트 트랜스퍼 이벤트를 주고받을 수 있는 에이전트용 웹훅을 빌드합니다. 시작 코드에서 제공하는 기본 UI를 사용하여 빌드한 항목을 테스트합니다.

참고: 이 Codelab을 진행하기 위해서는 이미 파트너로 등록되어 있고 지원팀의 승인을 받아야 합니다. 아직 조건이 충족되지 않았으면 이 Codelab을 시작하기 전 Business Messages에 등록하고 승인을 기다려야 합니다.

학습할 내용

• 대화 상태를 저장하고 관리하는 방법
• Business Messages를 사용하여 실시간 상담사 트랜스퍼 이벤트를 전송하는 방법
• 에이전트로 대화에 참여하기 위한 웹훅 및 기본 UI를 설정하는 방법
• Business Messages API 사용 권장사항

이 Codelab에서는 Business Message API를 사용하여 실시간 에이전트 전송을 구현하는 데 중점을 둡니다. 각 단계의 시작 코드를 읽을 수 있지만 Business Messages와 관련된 코드만 구현하면 됩니다.

필요한 항목

• Business Messages 에이전트(서비스 계정 키 포함) 에이전트 만들기 가이드에 따라 에이전트를 만들 수 있습니다.
• 에이전트의 GCP 프로젝트에 연결된 작동 중인 Cloud Datastore 구성 Cloud Datastore 빠른 시작을 사용하여 이를 설정할 수 있습니다. Cloud Datastore를 사용하는 방법을 몰라도 됩니다.
• Google Cloud SDK 및 Node.js (버전 10 이상)가 설치된 컴퓨터
• 사용자 환경을 테스트하기 위한 Android 기기 (버전 5 이상) 또는 iOS 기기.
• 웹 애플리케이션 프로그래밍 경험 소량의 JavaScript 코드를 작성하고 디버그해야 할 수도 있습니다.

2. 에코 봇 만들기

이 단계에서는 '에코 봇'이라는 기본 봇 담당자를 배포합니다. 이 봇은 사용자 메시지를 가져와 Cloud Datastore의 대화 스레드에 기록한 다음 동일한 콘텐츠로 응답하여 사용자의 메시지를 '에코'합니다. 기본 봇과 로깅 인프라가 있으면 이를 추가하여 이후 단계에서 완전한 실시간 에이전트 전송 구현을 만들 수 있습니다.

시작 코드 가져오기

터미널에서 다음 명령어를 사용하여 Live Agent Transfer 시작 코드를 프로젝트의 작업 디렉터리에 클론합니다.

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

시작 코드 이해

Codelab 전체에서 작업할 시작 코드 구조를 살펴보겠습니다.

step-1 디렉터리로 이동하여 콘텐츠를 확인합니다. 이 속성은 다음과 같은 요소를 포함합니다.

• bin: 이 디렉터리에는 서버를 설정하고 구성하는 www 시작 스크립트가 포함되어 있습니다.
• libs: 이 디렉터리에는 Cloud Datastore에서 읽기 및 쓰기를 위한 편리한 메서드가 포함된 datastore_util.js가 포함되어 있습니다. 이 파일의 작동 방식을 이해할 필요가 없습니다. 사용 가능한 메서드와 그 기능을 확인하세요.
• resources: 서비스 계정 키가 credentials.json이라는 파일로 포함됩니다.
• routes: index.js 파일에는 웹훅 및 모든 도우미 메서드가 포함됩니다. 작업하고 추가할 기본 파일입니다.
• 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

도움말: 서비스 키를 설정하거나 다운로드하는 데 도움이 필요하면 서비스 계정 관리를 위한 Google Cloud 가이드를 참고하세요.

시작 코드 배포

터미널에서 샘플의 step-1 디렉터리로 이동합니다. 그런 다음 API에 등록할 때 사용한 프로젝트 ID를 설정하여 gcloud 도구가 Google Cloud 프로젝트를 사용하도록 설정합니다.

gcloud config set project <PROJECT_ID>

애플리케이션을 배포하려면 다음 명령어를 실행합니다.

gcloud app deploy

마지막 명령어 결과에서 배포된 애플리케이션의 URL을 기록해 둡니다.

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

방금 배포한 시작 코드에는 Business Messages에서 메시지를 수신하기 위한 웹훅이 있는 웹 애플리케이션이 포함되어 있습니다. 애플리케이션이 사용자에게 메시지를 다시 에코하고 메시지 스레드를 Cloud Datastore에 로깅합니다.

에이전트를 구성하세요.

비즈니스 커뮤니케이션 개발자 콘솔의 계정 설정 페이지로 이동하여 웹훅을 배포된 애플리케이션의 URL로 설정합니다. 예: https://PROJECT_ID.appspot.com/callback/

도움말: 웹훅 설정 방법을 복습해야 할 경우 Business Messages 설정 가이드에서 웹훅 설정 섹션을 참고하세요.

그런 다음 에이전트 정보 페이지에서 기본 상호작용 유형과 보조 상호작용 유형을 각각 봇과 인간으로 구성합니다.

에코 봇과 대화하기

Play Console에서 에이전트를 엽니다. 에이전트 세부정보를 검토할 수 있는 개요 페이지가 표시됩니다. 모바일 테스트 기기와 일치하는 에이전트 테스트 URL을 복사합니다. 휴대기기에서 이 URL을 사용하여 에이전트의 대화 영역을 실행하세요.

메시지를 몇 개 보내 에이전트와 상호작용합니다. 대화형 표면은 사용자가 말하는 내용만 복사하며 그다지 유용한 사용자 환경은 아닙니다. 실제로 사람들과 대화할 수 있는 방법이 있다면요!

3. 대화 참여

이제 실제 에이전트의 관점에서 대화를 살펴보겠습니다. 실제 상담사는 대화에 참여하기 전에 대화 ID와 같은 몇 가지 사항을 알아야 합니다. 사용자가 실제 상담사와 통화를 요청했는지 확인하는 것도 도움이 됩니다. 이 단계에서는 기본 CRM (고객 관계 관리) 페이지를 사용하여 이 정보를 확인하고 실제 상담사로 대화에 참여합니다.

이 단계의 시작 코드는 에이전트에서 진행 중인 모든 대화 스레드를 나열하는 기본 CRM을 추가합니다. CRM을 살펴보면서 어떤 대화에 실제 상담사가 주의를 기울여야 하는지 알아보겠습니다.

step-2 디렉터리로 이동하고 이전 단계에서 한 것처럼 앱을 다시 배포합니다.

앱을 배포할 때 대상 URL이 표시됩니다. 브라우저에서 이 URL로 이동하여 이전 단계에서 시작한 대화 스레드가 포함된 목록을 확인합니다. 에코 봇이 이 대화에서 상담사의 담당자 역할을 하므로 대화 상태는 현재 '봇 관리'입니다.

채팅 참여 버튼이 표시되지만 아직 아무 작업도 수행하지 않습니다. 또한 이 인터페이스에서는 사용자가 실제 상담사와 대화하고 싶어 하는지도 알 수 없습니다.

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 디렉터리가 포함되어 있습니다. 이러한 디렉터리에는 특정 단계의 완전한 구현이 있는 전체 앱의 사본이 포함됩니다.

구현을 완료하고 앱을 재배포한 후 휴대기기의 대화에서 더보기 메뉴를 사용하여 실시간 에이전트를 요청하세요.

도움말: 더보기 메뉴에 '실시간 에이전트에 메시지 보내기'가 옵션으로 표시되지 않는 경우 에이전트에 Business Messages 콘솔에서 사용자 상호작용 유형이 구성되어 있는지 확인하세요.

이제 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 이벤트를 게시해야 합니다.

요청 페이로드를 만들려면 다음 표에 설명된 필드를 설정해야 합니다.

필드 이름	힌트
parent	'conversations/{conversationId}'로 설정합니다.
eventId	이벤트에 사용할 나만의 임의 ID를 생성합니다.
auth	제공된 initCredentials 메서드를 사용합니다.
resource	이벤트 본문 자체입니다. 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을 확인하세요.

• 온라인으로 매장에서 수령하기 1부
• 온라인으로 매장에서 수령하기 2부

추가 자료

• 봇에서 실시간 상담사로 핸드오프 가이드를 통해 실제 상담사 트랜스퍼의 기본사항을 검토하세요.
• Dialogflow 가이드를 사용하여 Echo 봇을 FAQ 봇으로 업그레이드하세요.

참조 문서

• 메서드: conversation.events.create
• 메서드: CONVERSATION.messages.create
• 리소스: Event
• 담당자