전화 및 Twilio Flex와 통합

온라인에서 편집하기

AWS IBM Cloud

전화 통합을 사용하여 고객에게 전화를 걸어 Twilio Flex의 내부에 있는 라이브 에이전트로 전송할 수 있습니다. 어시스턴트와의 대화 과정에서 고객이 사용자에게 말하도록 요청하는 경우 대화를 Twilio Flex 에이전트에 직접 전송할 수 있습니다.

시작하기 전에

이 통합 패턴을 사용하려면 다음이 필요합니다:

  • AI 어시스턴트 빌더 (휴대폰 연동에 필수)

  • 다음 제품이 있는 Twilio 계정입니다.

    • Twilio Flex

    • 프로그래밍 가능 음성 API가 있는 Twilio Voice

    • Twilio Studio

AI 어시스턴트와의 휴대폰 연동 기능 추가

이미 어시스턴트에 전화 연동 기능을 추가한 경우에는 이 섹션을 건너뛸 수 있습니다.

휴대폰 연동 기능을 추가해야 하는 경우 다음 단계를 따르세요.

  1. 어시스턴트 메인 페이지의 통합 섹션의 필수 채널 아래에 전화용 타일이 표시됩니다.

  2. 전화 타일에서 추가를 클릭합니다.

  3. 팝업 창에서 추가를 다시 클릭합니다.

  4. 외부 제공업체의 기존 전화번호 사용를 선택합니다.

  5. 전화 통합 설정 프로세스를 완료하십시오. 자세한 내용은 휴대폰과 통합하기를 참조하세요.

현재 사용자는 이를 수행해야 합니다. 전화 통합 구성에 대한 자세한 정보는 전화와 통합의 내용을 참조하십시오.

Twilio Flex 프로젝트 추가

신규 또는 기존 Twilio Flex 프로젝트가 필요합니다.

트윌리오 플렉스 프로젝트가 필요한 경우 다음 단계에 따라 프로젝트를 만들 수 있습니다.

  1. 프로젝트 드롭 다운 메뉴에서 새 프로젝트 작성을 클릭하십시오. 프로젝트의 이름을 지정하고 계정 정보를 확인합니다.

  2. 시작 페이지에서 새 프로젝트에 사용할 Twilio 제품으로 Flex를 선택합니다. 설문지를 작성한 다음 트윌리오 시작하기를 클릭합니다.

Flex 프로젝트가 프로비저닝되면 Twilio 콘솔로 돌아가세요. 드롭다운 목록에서 올바른 프로젝트를 선택했는지 확인하세요.

  1. 탐색 메뉴에서 모든 제품 및 서비스 아이콘을 클릭하십시오.

  2. Twilio 프로그램 가능 음성 > 설정 > 일반을 클릭하십시오.

  3. 향상된 프로그램 가능 SIP 기능 아래에서 스위치를 사용 가능으로 전환하십시오.

호출 플로우 작성

전화 연동 및 Twilio Flex 프로젝트가 구성된 후에는 Twilio Studio로 통화 흐름을 만들고 어시스턴트가 작업할 전화 번호를 프로비저닝(또는 포팅)해야 합니다.

호출 플로우를 작성하려면 다음을 수행하십시오.

  1. 탐색 메뉴에서 모든 제품 및 서비스 아이콘을 클릭하십시오.

  2. Studio를 클릭하십시오.

  3. 새 플로우를 작성하려면 +를 클릭하십시오.

  4. 새 흐름의 이름을 지정한 다음 다음를 클릭합니다.

  5. 처음부터 시작하기를 선택한 다음 다음를 클릭합니다. 흐름 캔버스에 트리거 위젯이 나타납니다.

  6. 트리거 위젯을 클릭하십시오.

  7. 웹훅 URL 필드의 값을 기록해 두십시오. 이 값은 후속 단계에서 필요합니다.

전화번호 구성

  1. 탐색 메뉴에서 모든 제품 및 서비스 아이콘을 클릭하십시오.

  2. 전화번호를 클릭하십시오.

  3. 숫자 관리 아래에서 어시스턴트가 사용할 전화번호를 구성하십시오. 번호 구매를 선택하여 새 번호 또는 포트 및 호스트를 구매하여 기존 전화번호를 포트하십시오.

  4. 활성 번호 목록에서 새 전화번호를 클릭하십시오.

  5. 음성 및 팩스에서 다음 설정을 구성합니다.

    • 구성 필드의 경우 웹훅, TwiML Bins, 기능, Studio 또는 프록시를 선택하십시오.

    • 전화가 오면의 경우 스튜디오 플로우를 선택하십시오. 드롭 다운 목록에서 플로우를 선택하십시오.

    • 기본 핸들러 실패의 경우 스튜디오 플로우를 선택하십시오. 드롭 다운 목록에서 플로우를 선택하십시오.

  6. AI 어시스턴트 사용자 인터페이스로 이동한 다음, 해당 어시스턴트의 전화 연동 설정을 엽니다.

  7. 전화 번호 필드에 Flex Studio에서 구성한 전화번호를 입력합니다.

  8. 저장 후 종료를 클릭하십시오.

전화 번호 테스트

이제 Twilio Flex Flow 편집기에서 말하기/플레이 위젯을 트리거하여 전화번호가 플로우에 연결되어 있는지 테스트할 수 있습니다.

  1. 말하기/플레이 위젯을 플로우 캔버스에 끌어오십시오.

  2. I'm alive. 같은 단순한 구문을 사용하여 말하기/플레이 위젯을 구성하십시오.

  3. 트리거 위젯의 수신 호출 노드를 말하기/플레이 위젯에 연결하십시오.

  4. 전화번호를 호출하십시오. 테스트 문구와 함께 Twilio 흐름이 응답하는 소리가 들릴 것입니다.

  5. 말하기/플레이 위젯을 삭제하고 다음 단계로 계속 진행하십시오.

  6. 이 테스트가 예상대로 작동하지 않으면 전화번호 구성이 플로우에 연결되어 있는지 다시 확인하세요.

수신 호출을 처리하는 Twilio 기능 작성

이제 Twilio 함수를 사용하여 인바운드 통화를 어시스턴트에게 연결하도록 통화 흐름을 구성해야 합니다. 다음 단계를 수행하십시오.

  1. 탐색 메뉴에서 모든 제품 및 서비스 아이콘을 클릭하십시오.

  2. 서비스를 클릭하십시오.

  3. 서비스 만들기를 클릭합니다. 서비스 이름을 지정한 후 다음을 클릭하십시오.

  4. 서비스에 새 기능을 추가하려면 추가 > 기능 추가를 클릭하십시오. 새 기능 /receive-call 이름을 지정하십시오.

  5. /receive-call 함수의 템플릿을 이 코드로 바꿉니다:

    exports.handler = function(context, event, callback) {
      const VoiceResponse = require('twilio').twiml.VoiceResponse;  
      const response = new VoiceResponse();
      const dial = response.dial({
        answerOnBridge: "true",
        referUrl: "/refer-handler"
      });
      const calledPhoneNumber = event.Called;
      dial.sip(`sip:${calledPhoneNumber}@{sip_uri_hostname};secure=true`);  
      return callback(null, response);
    }

  • {sip_uri_hostname}을 어시스턴트의 전화 연동 SIP URI의 호스트 이름 부분(sips: 뒤에 오는 모든 부분)으로 바꿉니다. 참고: Twilio는 SIPS URI를 지원하지 않지만, SIP URI에 ;secure=true를 추가하여 보안 SIP 트렁킹을 지원합니다.

  1. 저장 을 클릭하십시오.

  2. 모두 배치를 클릭하십시오.

수신 호출 핸들러로 경로 재지정

스튜디오 플로우 편집기에서 TwiML Redirect 위젯을 사용하여 이전 섹션에서 만든 /receive-call 함수를 호출합니다.

  1. Studio Flow 캔버스에 TwiML 경로 재지정 위젯을 추가하십시오.

  2. 수신 호출 트리거를 TwiML 경로 재지정 위젯에 연결하십시오.

  3. 이전 섹션에서 생성한 /receive-call 함수의 URL TwiML 위젯을 구성합니다.

  4. 이제 수신 전화가 걸려오면 해당 흐름이 AI 어시스턴트로 자동 연결되어야 합니다.

  5. 경로 재지정에 실패하면 /receive-call 기능을 배치했는지 확인하십시오.

어시스턴트에서의 전송을 처리하기 위한 Twilio 함수 작성

또한 고객이 상담원에게 통화를 요청하는 경우, 어시스턴트에서 Twilio Flex로 다시 전송된 통화를 처리하도록 통화 흐름을 구성해야 합니다. ‘ TwiML ’ 리디렉션 위젯 뒤에 ‘Say/Play’를 사용하여, AI 어시스턴트로부터 해당 통화가 다시 해당 흐름으로 연결되었음을 표시합니다. 이 시점에서 실시간 상담원에게 통화를 대기시키는 등 여러 가지 옵션이 가능하며, 이 섹션에서 이에 대해 설명합니다.

  1. 캔버스에 말하기/재생 위젯을 추가하고 Transfer from Watsom complete와 같은 문구를 사용하여 위젯을 구성합니다.

  2. TwiML 경로 재지정 위젯에서 리턴 노드를 말하기/플레이 위젯에 연결하십시오.

  3. 트리거 위젯을 클릭하십시오.

  4. 웹훅 URL 필드에서 값을 복사하십시오. 이 값은 후속 단계에서 필요합니다.

  5. Twilio 기능 페이지에서 추가 > 기능 추가를 클릭하여 서비스에 다른 새 기능을 추가하십시오. 새 기능 /refer-handler 이름을 지정하십시오.

  6. /refer-handler 기능의 템플리트를 다음 코드로 대체하십시오.

    exports.handler = function(context, event, callback) {
      // This function handler will handle the SIP REFER back from the Phone Integration.
      // Before handing the call back to Twilio, it will extract the session history key from the
      // User-to-User header that's part of the SIP REFER Refer-To header. This session history key
      // is a string that is used to load the agent application in order to share the transcripts of the caller
      // with the agent.
      // See https://github.com/watson-developer-cloud/assistant-web-chat-service-desk-starter/blob/main/docs/AGENT_APP.md
      const VoiceResponse = require('twilio').twiml.VoiceResponse;
      
      const STUDIO_WEBHOOK_URL = '{webhook_url}';
      
      let studioWebhookReturnUrl = `${STUDIO_WEBHOOK_URL}?FlowEvent=return`;
      
      const response = new VoiceResponse();
      console.log("ReferTransferTarget: " + event.ReferTransferTarget);
      
      const referToSipUriHeaders = event.ReferTransferTarget.split("?")[1];
      console.log(referToSipUriHeaders);
      if (referToSipUriHeaders) {
        const sanitizedReferToSipUriHeaders = referToSipUriHeaders.replace(">", "");
        console.log("Custom Headers: " + sanitizedReferToSipUriHeaders);
        
        const sipHeadersList = sanitizedReferToSipUriHeaders.split("&");
        
        const sipHeaders = {};
        for (const sipHeaderSet of sipHeadersList) {
          const [name, value] = sipHeaderSet.split('=');
          sipHeaders[name] = value;
        }

        const USER_TO_USER_HEADER = 'User-to-User';
        
        // Extracts the User-to-User header value
        const uuiData = sipHeaders[USER_TO_USER_HEADER];
        
        if (uuiData) {
          const decodedUUIData = decodeURIComponent(uuiData);
          const sessionHistoryKey = decodedUUIData.split(';')[0];
          // Passes the session history key back to Twilio Studio through a query parameter.
          studioWebhookReturnUrl = `${studioWebhookReturnUrl}&SessionHistoryKey=${sessionHistoryKey}`;
        }    
      }

      response.redirect(
        { method: 'POST' },
        studioWebhookReturnUrl
      );

      // This callback is what is returned in response to this function being invoked.
      // It's really important! E.g. you might respond with TWiML here for a voice or SMS response.
      // Or you might return JSON data to a studio flow. Don't forget it!
      return callback(null, response);
    }

{webhook_url} 를 스튜디오 플로우의 트리거 위젯 에서 복사한 URL 으로 대체합니다.

  1. 저장 을 클릭하십시오.

  2. 모두 배치를 클릭하십시오.

  3. 이 참조 핸들러를 작성한 후 기능 URL을 다시 /receive-call 핸들러의 referUrl 필드에 복사하십시오.

Twilio Flex에 대한 호출을 전송하도록 어시스턴트 구성

이제 고객이 에이전트에 말하도록 요청하면 Twilio Flex에 대한 호출을 전송하기 위해 어시스턴트를 구성해야 합니다. 다음 단계를 수행하십시오.

  1. AI 어시스턴트 사용자 인터페이스에서 어시스턴트의 대화 스킬을 엽니다.

  2. 어시스턴트가 고객을 상담원에게 연결하도록 트리거하는 조건이 있는 노드를 추가합니다.

  3. 노드에 텍스트 응답을 추가하고 어시스턴트가 고객을 상담원에게 연결하기 전에 말할 텍스트를 지정하세요.

  4. 응답에 대해 JSON 편집기를 여십시오.

  5. JSON 편집기에서 전화번호를 sip.uri 항목으로 지정하는 connect_to_agent 응답을 추가하십시오({phone_number} 항목을 SIP 트렁크의 전화번호로 대체).

{
  "generic": [
    {
        "response_type": "connect_to_agent",
        "transfer_info": {
          "target": {
            "service_desk": {
              "sip": {
                "uri": "sip:+{phone_number}@flex.twilio.com",
                "transfer_headers_send_method": "refer_to_header"
              }
            }
          }
        },
        "agent_available": {
          "message": "Ok, I'm transferring you to an agent"
        },
        "agent_unavailable": {
          "message": ""
        }
    }
  ]
}

이 예제에서는 AI 어시스 턴트에서 Twilio Flex로 전달되는 컨텍스트를 사용하는 방법을 보여주지 않습니다. 트윌리오 플렉스 플로우 내에서 사용자 간 정보를 참조할 수 있습니다:

{
  "context": {
    "widgets": {
      "redirect_1": {
        "User-to-User": "value",
      }
    }
  }
}

여기서 redirect_1의 경우 경로 재지정 위젯의 이름입니다. 예를 들어, 다중 큐를 설정하는 경우 Twilio 분할 위젯을 사용하여 리턴된 컨텍스트를 기반으로 큐를 선택할 수 있습니다.

어시스턴트 테스트

이제 어시스턴트가 전화 번호로 걸려온 전화를 받고 Twilio Flex 플로우로 전화를 다시 전송할 수 있습니다. 어시스턴트를 테스트하려면 다음을 수행하십시오.

  1. 전화번호를 호출하십시오. 어시스턴트가 응답하면 에이전트를 요청하십시오.

  2. 말하기/재생 위젯에 구성된 문구(예: "Watson에서 전송 완료")가 들리는지 확인해야 합니다.

  3. 전송이 실패할 경우, 콘솔 로그를 통해 호출이 플로우에서 /receive-call 핸들러로, AI 어시스턴트로, 리퍼 핸들러로 이동한 후 다시 Twilio Flex 플로우로 돌아오는 과정을 추적해 보세요.

서비스 데스크 에이전트와 대화 히스토리 공유

서비스 데스크 상담원이 방문자와 AI 어시스턴트 간의 대화 내역을 한눈에 확인할 수 있도록 하려면, Twilio Flex 환경에 AI 어시스턴트 Agent App을 설정하세요. 자세한 내용은 Twilio Flex AI 어시스턴트 에이전트 앱의 문서를 참조하세요.