twilio contact center
1.0.0
Сущность современного контактного центра заключается в том, чтобы обслуживать клиентов по нескольким каналам (голос, веб -чат, видео, электронная почта, социальные сети и т. Д.), Позвольте им плавно перемещаться по каналам и, что наиболее важно, поддерживать контекст разговоров.
Демонстрация контактного центра Twilio является эталонной архитектурой для строительства современного контактного центра. В центре внимания демонстрации - показать, как построить контактный центр на основе платформы Twilio и различные бэкэнд и фронтальные компоненты.
Примечание: мы проделали основную работу с точки зрения UX, и много возможностей остается для улучшения. Он был разработан для демонстрационных целей и не проверялся отдельно.
Это приложение предоставляется как есть. Twilio официально не поддерживает его.
Клиент заполняет онлайн -запрос вызова -> Форма, отправленная на сервер -> задача на создании TaskRouter -> Найти доступный и соответствующий агент -> Агент принимает бронирование и набрать клиента (PSTN) -> Подключить клиента к агенту (webrtc)
Номер телефона Twilio вызывает Twilio -> Twilio запрашивает WebHook -> Сервер генерирует TWIML для IVR -> Caller Selects Option -> Задача на создание TaskRouter -> Найти доступный и соответствующий агент -> Агент принимает резервирование -> Подключить клиент к агенту (webrtc)
Клиент заполняет онлайн -форму запроса веб -чата -> Форма, представленная на сервер -> задача на создании TaskRouter -> Найти доступный и соответствующий агент -> Агент принимает резервирование -> Start Chat между клиентом и агентом
Клиент заполняет форму запроса видеоопроводов -> Форма, отправленная на сервер -> Задача на задаче и создается видео -комната -> Найти доступные и сопоставляющие агент -> Агент принимает резервирование -> Агент присоединяется к видеомелете.
Отображение метрик контактного центра в реальном времени (например: среднее время руководителя вызовов, производительность агента, метрики вызова, статистика задач и многое другое и т. Д.). Пожалуйста, ознакомьтесь с следующим репо: https://github.com/ameerbadri/twilio-taskrouter-realtime-dashboard
Если вы раньше не использовали Twilio, добро пожаловать! Вам нужно будет подписаться на учетную запись Twilio.
Мы рекомендуем вам создать отдельный проект в Twilio и установить это приложение с помощью этого проекта.
Примечание. Рекомендуется, чтобы у вас была обновленная учетная запись Twilio, чтобы полностью испытать эту демонстрацию.
Прежде чем начать установку, вам нужно будет собрать следующие переменные с портала учетной записи Twilio.
TWILIO_ACCOUNT_SIDTWILIO_AUTH_TOKENTWILIO_WORKSPACE_SIDДля учетной записи SID и Token Auth, пожалуйста, нажмите здесь: https://www.twilio.com/console
Купите номер телефона или используйте существующий (приложение будет настроить номер для вас позже)
Создайте новое рабочее пространство Twilio TaskRouter и выберите пользовательский шаблон.
Для ключа API Twilio Sid и Twilio API-секрета, нажмите здесь: https://www.twilio.com/console/dev-tools/api-keys
TWILIO_API_KEY_SIDTWILIO_API_KEY_SECRETДля веб -чата вам нужно установить переменные программируемой среды чата Twilio:
TWILIO_CHAT_SERVICE_SIDПользовательский интерфейс агента не поддерживает обработку нескольких задач одновременно, следовательно, все задачи направляются на одном и том же канале задачи с емкостью одной одновременной задачи. Для получения более подробной информации, пожалуйста, проверьте многозадачность TaskRouter
Вы можете развернуть этот проект со всеми Depencendies на Heroku с Terraform, инфраструктурой с открытым исходным кодом в качестве инструмента программного обеспечения для кода.
Создайте ключ API для Heroku, проверьте Руководство API платформы Heroku, чтобы получить помощь.
Добавьте ключ API Heroku и ваш адрес электронной почты на 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
Инициализируйте приложение приложения Engine с вашим проектом и выберите его регион:
gcloud app create --project=<your-project-id>
Добавьте переменные Twilio, указанные в переменных конфигурации раздела в файл переменных app.yaml .
Разверните приложение в App Engine, выполнив следующую команду.
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.port не устанавливается, приложения запускают на порту 5000.
Если вы запускаете демонстрацию локально, помните, что Twilio нуждается в общедоступном адресу для веб-хуков, и процесс настройки регистрирует их с помощью Twilio. Таким образом, вам нужно будет запустить что -то вроде NGROK вместо того, чтобы просто нажать http: // localhost: 5000/. Когда вы получаете новые адреса от NGROK, вам также необходимо переехать процесс настройки, чтобы зарегистрировать обновленный адрес с помощью Twilio.
Ngrok Setup
Система широкая установка
Загрузите и установите из Ngrok
Установите с NPM npm install ngrok -g
Запустите Ngrok (если порт определен в вашем обновлении .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 Call ngrokurl в app.listen для регистрации URL Ngrok на сервере Spin Up
ngrokUrl()
Примечание. В Google Chrome безопасное HTTPS -соединение требуется для выполнения телефонных звонков через WEBRTC. Используйте туннель, который поддерживает HTTP, такой как NGROK, который может перенаправить трафик в ваш веб -сервер.
Взносы приветствуются и общеприняты. Для не тривиальных поправок это хорошая идея, чтобы представить вопрос, объясняющий предлагаемые изменения перед 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
Чтобы облегчить жизнь другим участникам и рецензентам, пожалуйста
git rebase -i HEAD^^^^^^
# then squash or fixup your shards
# and force push into your fork
git push origin [YOUR BRANCH] -f
Вы можете подписаться на меня в Twitter - @mdamm_de
Грань
