Twilio Flex와의 Salesforce 음성 통합

이 음성 통합은 Twilio Open CTI 통합을 사용하여 Twilio Flex 콜센터를 Salesforce 인스턴스로 가져옵니다.

Agent Assist는 Twilio Flex 통화의 미디어 스트림을 사용하여 Salesforce Lightning 서비스 콘솔에서 상담사에게 추천을 제공합니다.

시작하기 전에

상담사 지원 UI 모듈을 Salesforce와 통합하려면 다음 리소스에 액세스할 수 있어야 합니다.

  • Node.js

    운영체제에 권장되는 설치 안내를 따릅니다.

  • Salesforce CLI

    운영체제에 권장되는 설치 안내를 따릅니다.

  • Google Cloud CLI

    안내에 따라 gcloud 명령어를 설치하고 gcloud auth login을 사용하여 인증합니다.

  • Salesforce

    1. 인스턴스 URL 또는 Salesforce 로그인 페이지에서 로그인하고 다음 사항을 확인합니다.
    2. Salesforce 내 도메인 URL입니다. 다음 단계에 따라 내 도메인 URL을 찾으세요.
      1. 메뉴 바 > 설정 메뉴로 이동합니다.
      2. 설정을 클릭합니다.
      3. 빠른 찾기 상자에 내 도메인을 입력합니다. 도메인 이름은 MY-DOMAIN-NAME.develop.my.salesforce.com 형식입니다.
    3. Salesforce 조직 ID입니다. 조직 ID를 찾으려면 다음 단계를 따르세요.
      1. 메뉴 바 > 설정 메뉴로 이동합니다.
      2. 설정을 클릭합니다.
      3. 빠른 찾기 상자에 회사 정보를 입력합니다. 참고: 이러한 통합 단계는 Salesforce Developer Edition에서만 테스트되었습니다. 다른 버전을 사용하는 경우 기능 라이선스와 Salesforce 인터페이스에 차이가 있을 수 있습니다.

  • Agent Assist 통합 백엔드

    1. 안내에 따라 통합을 설정합니다.
    2. 배포 스크립트를 실행하기 전에 deploy.sh 또는 프로젝트 루트의 .env 파일로 다음 환경 변수를 구성합니다.
    3. AUTH_OPTION: SalesforceLWC로 설정합니다.
    4. SALESFORCE_DOMAIN: YOUR_SUBDOMAIN.develop.lightning.force.com과 유사한 도메인 이름입니다. Salesforce 필수 요건에서 이 값을 기록했습니다. https://는 포함하지 않습니다.
    5. SALESFORCE_ORGANIZATION_ID: Salesforce 필수 구성요소에서 이 값을 기록했습니다.
    6. APP_AUTH_OPTION: Twilio로 설정합니다.
    7. TWILIO_ACCOUNT_SID: Twilio 계정 SID로 설정합니다.

1단계: Twilio Flex 설정

Twilio Flex는 이 통합에서 소프트폰 역할을 합니다. Twilio 콘솔에 로그인하여 Flex 계정을 설정할 수 있습니다. Twilio 설정 페이지에서 Flex 계정을 만드는 방법에 관한 자세한 안내를 확인하세요.

SIPREC 커넥터 부가기능 설치

SIPREC 커넥터 부가기능을 사용하면 Twilio Flex 계정에서 음성 통화 미디어 스트림의 SIPREC 포크를 Agent Assist로 만들 수 있습니다. SIPREC 커넥터 부가기능을 설치하려면 다음 단계를 따르세요.

  1. Twilio Home > Marketplace > Catalog > Twilio > Siprec Connector로 이동합니다.
  2. 설치 > 이용약관 확인 체크박스 > 설치를 클릭합니다.
  3. 구성 탭에서 다음과 같이 플러그인을 구성합니다.
    1. 고유 이름: SipRec1
    2. 세션 녹화 서버: 
      sip:+<GTP-provisioned-phone-number>@216.239.36.145:5672;transport=tls;secure=true;edge=umatilla
    3. GTP 번호 프로비저닝에 관한 자세한 내용은 전화 통신 통합 문서를 참고하세요. SBC 구성 및 검증 단계는 Twilio Siprec 커넥터에서 완료되므로 무시해도 됩니다.
  4. Twilio Home > Functions and Assets로 이동합니다.
    • 사이드바에 Functions and Assets가 표시되지 않으면 Explore Products에서 고정합니다.
  5. 서비스 만들기를 클릭합니다.
  6. 새 서비스 이름을 ui-connector-auth로 지정합니다.
  7. 표시되는 편집기에서 추가 + > 함수 추가를 클릭합니다.
  8. 함수 이름을 conversation-name로 지정합니다.
  9. 를 클릭하고 함수 공개 상태를 Public로 변경합니다.
  10. GitHub 저장소에서 ui-connector-auth.js의 전체 콘텐츠를 복사하여 편집기에 붙여넣습니다.
  11. 저장을 클릭합니다.
  12. 모두 배포를 클릭합니다.

Flex Studio로 IVR 구성

IVR은 Twilio Studio를 사용하여 프로그래매틱 호출 흐름을 구성하여 미디어 스트림의 SIPREC 포크를 Agent Assist로 만드는 것으로 구성됩니다. 또한 Agent Assist와 전화번호 및 대화 ID를 공유하기 위해 HTTP 게시를 실행합니다. 다음 단계에 따라 Flex Studio로 IVR을 구성하세요.

  1. Twilio Console로 이동합니다.
  2. 개발 > 전화번호 > 관리 > 활성 번호를 클릭합니다. 표에는 Flex 계정에 프로비저닝된 기본 Twilio 번호가 포함된 행이 하나 있어야 합니다.
  3. Voice - Studio Workflow 섹션에서 Voice IVR을 클릭합니다.
  4. HTTP 요청 만들기 위젯을 흐름으로 드래그합니다.
  5. SendCallToAgent 위젯의 입력에서 Incoming Call을 연결 해제합니다.
  6. 수신 전화를 HTTP 요청 만들기 위젯의 입력에 연결합니다.
  7. 다음 세부정보를 사용하여 HTTP 요청 만들기 위젯을 구성합니다.
    • 위젯 이름: register_twilio
    • 요청 메서드: POST
    • 요청 URL: <your-ui-connector-cloud-run-url>.run.app/register-app
    • 콘텐츠 유형: Application/JSON
    • 요청 본문: 
      {
"accountSid": "<yourTwilioAccountSid>",
"authToken": "<yourTwilioAccountAuthToken>"
}
  8. 함수 실행 위젯을 흐름으로 드래그합니다.
  9. register_twilio 위젯의 Success 및 Fail 출력을 Run Function 위젯의 입력에 연결합니다.
  10. 다음 세부정보를 사용하여 위젯을 만듭니다.
    • 위젯 이름: conversation_name
    • 서비스: ui-connector-auth
    • 환경: ui
    • 함수: conversation-name
    • 함수 매개변수:
      • token: 
        {{ widgets.register_twilio.parsed.token }}
      • endpoint: <your-ui-connector-cloud-run-url>.run.app/conversation-name
      • phone: 
        {{ trigger.call.From | replace_first:'+','' }}
      • conversationName: 
        projects/<project>/locations/<location>/conversations/TW-{{ trigger.call.From | replace_first:'+','' }}-{{ trigger.call.CallSid }}
  11. 사이드바에서 스트림 포크 위젯을 흐름으로 드래그합니다.
  12. HTTP 요청 만들기 위젯의 성공 및 실패 출력을 스트림 포크 위젯의 입력에 연결합니다.
  13. 포크 스트림 위젯의 다음 노드를 SendCallToAgent 위젯에 연결합니다.

  14. 다음과 같이 스트림 포크 위젯을 구성합니다.

    • 스트림 작업: 시작
    • 스트림 유형: Siprec
    • 커넥터 이름: Siprec1
    • 트랙: 두 트랙 모두

    • 스트림 매개변수:

      • 키: conversation

      • 값:

        projects/<gcp-project-id>/conversations/TW-{{trigger.call.From | replace_first:'+','' }}-{{trigger.call.CallSid}}

  15. 저장 > 게시를 클릭합니다.

계정 세부정보

이 단계에 따라 Twilio Flex 계정 세부정보를 수집하세요. 이 정보는 나중에 Salesforce에서 Flex CTI를 구성하는 데 필요합니다.

  1. Twilio Home > Account Dashboard로 이동하여 다음 정보를 적어 둡니다.
    • 계정 SID
    • 내 Twilio 전화번호

2단계: 개발 프로젝트 설정

Agent Assist UI 모듈 통합을 시작하려면 다음 단계를 따르세요.

  1. 다음 코드를 실행하여 Agent Assist 통합 저장소를 클론하고 프로젝트를 엽니다. 
    git clone https://github.com/GoogleCloudPlatform/agent-assist-integrations
cd salesforce/aa-lwc
  2. 다음 명령어를 실행하여 나중에 정적 리소스로 배포할 UI 모듈 JavaScript 파일을 다운로드합니다. Salesforce에서는 서드 파티 JavaScript를 로드하기 위해 정적 리소스가 필요합니다. 
    npm run generate-static-resources
npm install

3단계: Salesforce 환경 설정

프로덕션 또는 개발과 같은 특정 환경에 상담 도우미 UI 모듈을 통합할 수 있습니다. Salesforce에서는 이러한 환경을 조직이라고 합니다.

Salesforce CLI로 조직 구성

Salesforce CLI를 사용하여 상담사 지원 통합을 위해 조직을 구성하려면 다음 단계를 따르세요.

  1. 다음 코드를 실행하고 평소에 사용하는 Salesforce 로그인 세부정보를 사용하여 CLI를 인증합니다. 
    npm run login
  2. 다음 코드를 실행하여 LWC를 조직에 배포합니다. 
    npm run deploy

4단계: 외부 클라이언트 앱 만들기

Salesforce LWC는 클라이언트 사용자 인증 정보 OAuth 2.0 흐름을 사용하여 사용자를 인증합니다. 외부 클라이언트 앱은 클라이언트 사용자 인증 정보 흐름을 사용 설정합니다. 앱의 고객 키와 고객 비밀번호를 사용하여 Salesforce LWC를 구성하여 Salesforce로 사용자를 인증합니다.

  1. 메뉴 바 > 설정 메뉴로 이동한 다음 설정을 클릭합니다. 빠른 찾기 상자에 External Client App Manager를 입력합니다.
    1. 외부 클라이언트 앱 관리자 > 새 외부 클라이언트 앱 > 만들기를 클릭한 후 다음 정보를 입력합니다.
    2. 외부 클라이언트 앱 이름: lwc auth
    3. API 이름: lwc_auth
    4. Contact Email(연락처 이메일): your_email@example.com
    5. API (OAuth 설정 사용 설정) > OAuth 사용 설정: 선택됨
    6. API (OAuth 설정 사용 설정) > 콜백 URL: https://login.salesforce.com/services/oauth2/callback
    7. API (OAuth 설정 사용 설정) > 선택한 OAuth 범위: ID URL 서비스에 액세스
    8. API (OAuth 설정 사용 설정) > 클라이언트 사용자 인증 정보 흐름 사용 설정: 선택됨
    9. 만들기를 클릭합니다.
  2. 메뉴 바 > 설정 메뉴로 이동한 다음 설정을 클릭합니다. 빠른 찾기 상자에 External Client App Manager를 입력합니다.
    1. 외부 클라이언트 앱의 이름 > 수정을 클릭합니다.
    2. OAuth 정책 > OAuth 흐름 및 외부 클라이언트 앱 개선사항으로 이동합니다.
    3. 클라이언트 사용자 인증 정보 흐름 사용 설정이 선택되어 있는지 확인합니다.
    4. Run As에 로그인 사용자 이름을 입력합니다.
    5. 저장을 클릭합니다.
  3. 메뉴 바 > 설정 메뉴로 이동한 다음 설정을 클릭합니다. 빠른 찾기 상자에 External Client App Manager를 입력합니다.
    1. 외부 클라이언트 앱의 이름 > 수정을 클릭합니다.
    2. OAuth 설정 > 앱 설정 > 컨슈머 키 및 비밀번호로 이동합니다.
    3. 이메일로 전송된 인증 코드를 입력합니다.
    4. 고객 키와 고객 보안 비밀을 안전한 곳에 복사합니다. 이 값은 나중에 필요합니다.

CORS 및 콘텐츠 보안 정책 설정

  1. 메뉴 바 > 설정 메뉴로 이동한 다음 설정을 클릭합니다.
  2. 빠른 찾기 상자에 CORS를 입력한 다음 수정을 클릭합니다.
    1. OAuth 엔드포인트에 CORS 사용 설정을 선택합니다.
    2. 저장을 클릭합니다.
  3. 메뉴 바 > 설정 메뉴로 이동한 다음 설정을 클릭합니다.
  4. 빠른 찾기 상자에 신뢰할 수 있는 URL을 입력한 다음 새 신뢰할 수 있는 URL을 클릭합니다.
  5. API 이름(ui_connector)을 입력합니다.
    1. Agent Assist 통합 백엔드로 배포한 UI 커넥터 Cloud Run 서비스 엔드포인트의 URL을 입력합니다. 이 URL은 Cloud Run 콘솔에서 확인할 수 있습니다. 예를 들면 https://<var>UI_CONNECTOR_SUBDOMAIN</var>.<var>GCP_REGION</var>.run.app입니다.
    2. CSP 지시어에서 모든 체크박스를 선택합니다.
    3. Save & New(저장 및 새로 만들기)을 클릭합니다.
  6. API 이름(ui_connector_wss)을 입력합니다.
    1. Agent Assist 통합 백엔드로 배포한 UI 커넥터 Cloud Run 서비스 엔드포인트의 URL을 입력합니다. 이 URL은 Cloud Run 콘솔에서 확인할 수 있습니다. 프로토콜을 wss로 변경합니다(WebSocket 트래픽의 경우). 예를 들면 wss://<var>UI_CONNECTOR_SUBDOMAIN</var>.<var>GCP_REGION</var>.run.app입니다.
    2. CSP 지시어에서 모든 체크박스를 선택합니다.
    3. Save & New(저장 및 새로 만들기)을 클릭합니다.
  7. API 이름을 입력합니다. salesforce_domain
    1. Salesforce 도메인의 URL을 https://<var>YOUR_SUBDOMAIN</var>.my.salesforce.com 형식으로 입력합니다.
    2. CSP 지시어에서 모든 체크박스를 선택합니다.
    3. 저장을 클릭합니다.

5단계: Twilio Flex CTI 플러그인 설치

Salesforce는 서드 파티 소프트폰을 Salesforce 인스턴스와 통합할 수 있도록 Salesforce Open CTI를 제공합니다.

Twilio Flex CTI는 Salesforce Open CTI를 사용하여 Salesforce 인스턴스 내에서 직접 Flex를 사용할 수 있도록 합니다. Twilio 안내에 따라 Salesforce 인스턴스에서 Twilio Flex CTI를 설정합니다.

6단계: Salesforce Lightning 웹 구성요소 설치

다음 단계에 따라 Lightning Experience 편집기를 사용하여 새 전화가 수신될 때 Twilio Flex CTI가 열리는 연락처 페이지에 Salesforce Lightning 웹 구성요소를 추가합니다.

  1. 서비스 콘솔로 이동하여 연락처를 선택합니다.
  2. 연락처 레코드를 선택합니다.
  3. 설정 메뉴 > 페이지 수정을 클릭합니다.
  4. 템플릿 > 변경을 클릭합니다.
    1. 헤더 및 두 개의 동일한 영역을 선택합니다.
    2. 다음을 클릭합니다.
    3. 각 지역을 새 지역에 매핑합니다.
    4. 완료를 클릭합니다.
  5. 구성요소 사이드바에서 agentAssistContainerModule를 사이드바로 이동합니다. 참고: 이 구성요소는 npm deploy 명령어로 제공되었습니다.
  6. 이전 단계에서 배치한 구성요소를 클릭하고 다음과 같이 양식 필드를 작성하여 구성 세부정보를 추가합니다.
    • endpoint: 통합 백엔드 UI 커넥터의 URL입니다. 예를 들어 Cloud Run 콘솔의 URL(예: https://<var>UI_CONNECTOR_ENDPOINT</var>.<var>GCP_REGION</var>.run.app)이 있습니다.
    • 기능: 포함할 Agent Assist 기능입니다. 이러한 기능은 대화 프로필에서 사용 설정해야 합니다. 사용 가능한 기능에는 CONVERSATION_SUMMARIZATION,KNOWLEDGE_ASSIST_V2, AGENT_COACHING가 있습니다. SMART_REPLY와 같은 일부 기능은 voice에서 사용할 수 없습니다.
    • channel: 통합이 voice용임을 나타냅니다.
    • platform: 플랫폼이 twilio임을 나타냅니다.
    • conversationProfile: Agent Assist 대화 프로필 리소스 이름입니다. 예를 들면 projects/<var>GCP_PROJECT_ID</var>/locations/<var>GCP_REGION</var>/conversationProfiles/<var>CONVERSATION_PROFILE_ID</var>입니다.
    • consumerKey: 3단계의 외부 클라이언트 소비자 키입니다.
    • consumerSecret: 3단계의 외부 클라이언트 앱 고객 보안 비밀번호입니다.

7단계: 통합 테스트

Salesforce 콜센터에 테스트 전화를 걸어 음성 통합을 테스트할 수 있습니다.

  1. 서비스 콘솔에서 Twilio Flex에 로그인합니다.
  2. Twilio Flex 번호로 전화를 겁니다. 1단계에서 이를 기록해 두었습니다.
  3. 서비스 콘솔에서 전화를 수락합니다. 전화를 건 번호의 새 연락처 페이지 또는 기존 연락처 페이지가 열립니다.
  4. 새 연락처 페이지인 경우 연락처를 저장합니다. 연락처 페이지가 로드되면 Salesforce Lightning 웹 구성요소가 사이드바에 로드되어야 합니다.
  5. 대화의 양쪽을 모두 테스트하여 Agent Assist 기능이 구성한 대로 작동하는지 확인합니다.