twilio contact center
1.0.0
최신 컨택 센터의 본질은 여러 채널 (음성, 웹 채팅, 비디오, 이메일, 소셜 미디어 등)에서 고객에게 서비스를 제공하고, 채널을 통해 매끄럽게 이동하고 가장 중요한 대화의 맥락을 유지하는 것입니다.
Twilio Contact Center 데모는 현대적인 컨택 센터를 구축하기위한 참조 아키텍처입니다. 데모의 초점은 Twilio 플랫폼 기반 컨택 센터를 구축하는 방법과 필요한 다양한 백엔드 및 프론트 엔드 구성 요소를 보여주는 것입니다.
참고 : 우리는 UX 관점에서 기본 작업을 수행했으며이를 향상시킬 수있는 많은 기회가 남아 있습니다. 데모 목적으로 설계되었으며 별도로 보안 확인되지 않았습니다.
이 응용 프로그램은대로 제공됩니다. Twilio는 공식적으로 그것을 지원하지 않습니다.
고객이 온라인 통화 요청 -> 서버에 제출 된 양식 -> 작업 러터에서 제출 된 형식 -> 사용 가능한 및 매칭 에이전트 찾기 -> 에이전트는 예약을 수락하고 고객을 다이얼링하고 고객을 대리인 (WEBRTC)에 연결합니다.
고객 통화 Twilio 전화 번호 -> Twilio 요청 WebHook-> 서버 IVR-> 발신자를 선택합니다.> 호출자 선택 -> 작업 드루터에서 작업 -> 사용 가능한 및 일치하는 에이전트 찾기 -> 고객을 대리인 (WEBRTC)에 연결합니다.
고객이 온라인 웹 채팅 요청 양식 -> 서버에 제출 된 양식 작성 -> 작업으로 작성된 작업 -> 사용 가능한 및 매칭 에이전트 찾기 -> 에이전트 예약 -> 고객과 에이전트 간의 채팅 시작.
고객이 화상 통화 요청 양식 -> 서버에 제출 된 양식 -> 태스크 로터 및 비디오 룸에 제출 된 양식 -> 사용 가능한 및 일치하는 에이전트 찾기 -> 에이전트 예약 -> 에이전트가 비디오 룸에 가입합니다.
운영 컨택 센터 메트릭의 실시간 표시 (예 : 평균 통화 핸들 시간, 에이전트 생산성, 통화 메트릭, 태스크 루터 통계 등). 다음 리포를 확인하십시오 : https://github.com/ameerbadri/twilio-taskrouter-realtime-dashboard
Twilio를 사용하지 않았다면 환영합니다! Twilio 계정에 가입해야합니다.
Twilio 내에서 별도의 프로젝트를 만들고 해당 프로젝트를 사용 하여이 앱을 설치하는 것이 좋습니다.
참고 : 이 데모를 완전히 경험하기 위해 업그레이드 된 Twilio 계정이있는 것이 좋습니다.
설치를 시작하기 전에 Twilio 계정 포털에서 다음 변수를 수집해야합니다.
TWILIO_ACCOUNT_SIDTWILIO_AUTH_TOKENTWILIO_WORKSPACE_SID계정 SID 및 Auth Token은 여기를 클릭하십시오 : https://www.twilio.com/console
전화 번호를 구매하거나 기존 전화 번호를 사용하십시오 (응용 프로그램은 나중에 번호를 구성합니다).
새로운 Twilio Taskrouter Workspace를 만들고 사용자 정의 템플릿을 선택하십시오.
Twilio API 키 SID 및 Twilio API 키 비밀은 여기를 클릭하십시오 : https://www.twilio.com/console/dev-tools/api-keys
TWILIO_API_KEY_SIDTWILIO_API_KEY_SECRET웹 채팅의 경우 Twilio 프로그래밍 가능한 채팅 환경 변수를 설정해야합니다.
TWILIO_CHAT_SERVICE_SID에이전트 UI는 여러 작업의 처리를 동시에 지원하지 않으므로 모든 작업이 동일한 작업 채널에서 하나의 동시 작업의 용량으로 라우팅됩니다. 자세한 내용은 작업 브루터 멀티 태스킹을 확인하십시오
코드 소프트웨어 도구로서 오픈 소스 인프라 인 Terraform을 사용하여 Heroku의 모든 Depencendies와 함께이 프로젝트를 배포 할 수 있습니다.
Heroku의 API 키를 만들고 Heroku 플랫폼 API 안내서를 확인하십시오.
Heroku API 키와 이메일 주소를 terraform.tfvars 에 추가하십시오.
TerraForm 구성 파일을 초기화하고 실행하십시오
terraform init
TerraForm을 설치하지 않은 경우 TerraForm을 시작하십시오.
섹션 구성 변수에 나열된 Twilio 변수를 terraform.tfvars 변수 파일에 추가하십시오.
인프라에서 Heroku 애플리케이션 이름 설정 설명 파일 terraform_heroku.tf
실행 계획을 작성하십시오
terraform plan
실행하여 Heroku에 프로젝트를 설치하십시오
terraform apply
설치가 완료된 후 https://<your-application-name>.herokuapp.com/setup 열고 응용 프로그램을 구성하십시오. 데모 개요는 https://<your-application-name>.herokuapp.com 에서 액세스 할 수 있습니다.
이렇게하면 응용 프로그램 및 Heroku (로그인이 필요)에 대한 모든 종속성이 설치됩니다. 설치의 일환으로 Heroku 앱은 환경 변수 구성을 안내합니다. 다음 버튼을 클릭하여 응용 프로그램을 배포하십시오.
설치가 완료된 후 https://<your-application-name>.herokuapp.com/setup 열고 응용 프로그램을 구성하십시오. 데모 개요는 https://<your-application-name>.herokuapp.com 에서 액세스 할 수 있습니다.
Google Cloud SDK를 다운로드하여 설치하십시오.
새 프로젝트를 만듭니다
gcloud projects create <your-project-id> --set-as-default
프로젝트로 앱 엔진 앱을 초기화하고 해당 지역을 선택하십시오.
gcloud app create --project=<your-project-id>
섹션 구성 변수에 나열된 Twilio 변수를 app.yaml 변수 파일에 추가하십시오.
다음 명령을 실행하여 앱 엔진에 앱을 배포하십시오.
gcloud app deploy
응용 프로그램 실행을 볼 수 있습니다
gcloud app browse
설치가 완료된 후 https://<your-project-id>.appspot.com/setup 열고 응용 프로그램을 구성하십시오. 데모 개요는 https://<your-project-id>.appspot.com 에서 액세스 할 수 있습니다.
포크와 저장소를 복제하십시오. 그런 다음 종속성을 설치하십시오
npm install
파일에서 환경 변수를로드하려면 Dotenv 패키지를 설치하여 로컬 환경 변수를 처리하십시오.
npm install dotenv
루트 디렉토리에서 '.env'라는 파일을 만듭니다. 그런 다음 App.js 상단에 다음을 추가하십시오.
require('dotenv').config()
데모를 실행하려면 구성 변수에서 환경 변수 목록을 설정해야합니다] (#configuration-variables)
응용 프로그램을 시작하십시오
npm start
데모를 사용하기 전에 http://<your-application-name>/setup 열고 응용 프로그램을 구성하십시오. 데모 개요는 http://<your-application-name> 에서 액세스 할 수 있습니다. Process.env. 포트가 설정되지 않은 경우 포트 5000에서 응용 프로그램이 실행됩니다.
로컬로 데모를 실행하는 경우 Twilio는 WebHooks에 대한 공개적으로 액세스 할 수있는 주소가 필요하며 설정 프로세스는 Twilio와 함께 등록합니다. 따라서 http : // localhost : 5000/을 치는 대신 ngrok과 같은 것을 실행해야합니다. NGROK에서 새 주소를 얻으려면 Twilio에 업데이트 된 주소를 등록하려면 설정 프로세스를 다시 실행해야합니다.
ngrok 설정
시스템 넓은 설치
Ngrok에서 다운로드 및 설치하십시오
NPM npm install ngrok -g
ngrok run (포트가 .env 업데이트에 정의 된 경우)
./ngrok http 5000
프로젝트 만 설치하십시오
Ngrok 패키지를 설치하십시오
npm install ngrok --dev
App.js 상단에 다음을 추가하십시오
const ngrok = require('ngrok')
const ngrokUrl = async function () {
const url = await ngrok.connect((process.env.PORT || 5000))
console.log('ngrok url ->', url)
}
app.js에서 app.listen에서 ngrokurl을 호출하여 서버 스핀에 ngrok URL을 기록합니다.
ngrokUrl()
참고 : Google Chrome에서는 WebRTC를 통해 전화를 걸려면 안전한 HTTPS 연결이 필요합니다. NGROK와 같은 HTTP를 지원하는 터널을 사용하여 트래픽을 웹 서버로 전달할 수 있습니다.
기부금은 환영하며 일반적으로 받아 들여집니다. 사소한 개정이 아닌 경우 PR 전에 제안 된 변경 사항을 설명하는 문제를 제출하는 것이 좋습니다. 이를 통해 관리자는 지침을 제공하고 복제 된 작업을 피할 수 있습니다.
변경 사항은 일반적인 프로젝트 코드 스타일을 준수해야합니다.
# please run this before "git commit"
npm run lint
# try automatic fix
./node_modules/.bin/eslint controllers --fix
./node_modules/.bin/eslint public --fix
다른 기고자와 검토자가 더 쉽게 생명을 얻으려면 동일한 PR에서 커밋을 다시 제출하십시오.
git rebase -i HEAD^^^^^^
# then squash or fixup your shards
# and force push into your fork
git push origin [YOUR BRANCH] -f
트위터에서 나를 팔로우 할 수 있습니다 - @mdamm_de
MIT
