twilio contact center
1.0.0
Esensi dari pusat kontak modern adalah melayani pelanggan di berbagai saluran (suara, obrolan web, video, email, media sosial, dll.), Memungkinkan mereka untuk bergerak dengan mulus di seluruh saluran dan yang paling penting mempertahankan konteks percakapan.
Demo Twilio Contact Center adalah arsitektur referensi untuk membangun pusat kontak modern. Fokus demo ini adalah untuk menunjukkan cara membangun pusat kontak berbasis platform twilio dan berbagai komponen backend dan frontend yang diperlukan.
Catatan: Kami telah melakukan pekerjaan dasar dari perspektif UX dan banyak peluang tetap untuk memperbaikinya. Ini telah dirancang untuk keperluan demo dan belum diperiksa secara terpisah.
Aplikasi ini disediakan apa adanya. Twilio tidak secara resmi mendukungnya.
Pelanggan Mengisi Permintaan Panggilan Online -> Formulir Dikirim ke Server -> Tugas pada TaskRouter Dibuat -> Temukan Agen yang Tersedia dan Pencocokan -> Agen Menerima Reservasi dan Panggilan Pelanggan (PSTN) -> Hubungkan Pelanggan ke Agen (WEBRTC)
Panggilan Pelanggan Nomor Telepon Twilio -> Permintaan Twilio Webhook -> Server menghasilkan twiml untuk IVR -> Penelepon Memilih Opsi IVR -> Tugas pada TaskRouter Dibuat -> Temukan Agen yang Tersedia dan Pencocokan -> Agen Menerima Reservasi -> Hubungkan Pelanggan ke Agen (WEBRTC)
Pelanggan Mengisi Formulir Permintaan Obrolan Web Online -> Formulir Dikirim ke Server -> Tugas pada TaskRouter Dibuat -> Temukan Agen yang Tersedia dan Pencocokan -> Agen Menerima Reservasi -> Mulai Obrolan antara Pelanggan dan Agen
Pelanggan Mengisi Formulir Permintaan Panggilan Video -> Formulir Dikirim ke Server -> Tugas pada TaskRouter dan Ruang Video Dibuat -> Temukan Agen yang Tersedia dan Pencocokan -> Agen Menerima Reservasi -> Agen Bergabung dengan Ruang Video
Tampilan waktu nyata dari metrik pusat kontak operasional (misalnya: waktu penanganan panggilan rata-rata, produktivitas agen, metrik panggilan, statistik TaskRouter, dan banyak lagi dll.). Silakan periksa repo berikut: https://github.com/ameerbadri/twilio-TaskRouter-realtime-board
Jika Anda belum pernah menggunakan Twilio sebelumnya, selamat datang! Anda harus mendaftar untuk akun Twilio.
Kami menyarankan Anda membuat proyek terpisah dalam Twilio dan menginstal aplikasi ini menggunakan proyek itu.
Catatan: Disarankan agar Anda memiliki akun Twilio yang ditingkatkan untuk sepenuhnya mengalami demo ini.
Sebelum Anda memulai instalasi, Anda harus mengumpulkan variabel -variabel berikut dari portal akun Twilio.
TWILIO_ACCOUNT_SIDTWILIO_AUTH_TOKENTWILIO_WORKSPACE_SIDUntuk akun SID dan AUTH Token, silakan klik di sini: https://www.twilio.com/console
Beli nomor telepon atau gunakan yang sudah ada (aplikasi akan mengkonfigurasi nomor untuk Anda nanti)
Buat ruang kerja Twilio TaskRouter baru dan pilih Template Kustom.
Untuk Key API Twilio Sid dan Twilio API Key Secret, klik di sini: https://www.twilio.com/console/dev-tools/api-keys
TWILIO_API_KEY_SIDTWILIO_API_KEY_SECRETUntuk obrolan web, Anda perlu mengatur variabel lingkungan obrolan yang dapat diprogram Twilio:
TWILIO_CHAT_SERVICE_SIDAgen UI tidak mendukung penanganan beberapa tugas secara bersamaan, maka semua tugas dialihkan pada saluran tugas yang sama dengan kapasitas satu tugas simultan. Untuk detail lebih lanjut silakan periksa Multitasking TaskRouter
Anda dapat menggunakan proyek ini dengan semua depencendies di Heroku dengan Terraform, infrastruktur open-source sebagai alat perangkat lunak kode.
Buat tombol API untuk Heroku, periksa Panduan API Platform Heroku untuk bantuan.
Tambahkan Kunci API Heroku dan alamat email Anda ke terraform.tfvars .
Inisialisasi file konfigurasi terraform dan jalankan
terraform init
Jika Anda belum memasang Terraform, ikuti Terraform Memulai.
Tambahkan variabel twilio yang tercantum dalam variabel konfigurasi bagian ke file variabel terraform.tfvars .
Atur Nama Aplikasi Heroku Anda di Infrastruktur Deskripsi File terraform_heroku.tf
Buat Rencana Eksekusi
terraform plan
Instal proyek di Heroku dengan mengeksekusi
terraform apply
Setelah instalasi selesai, silakan buka https://<your-application-name>.herokuapp.com/setup dan konfigurasikan aplikasi. Tinjauan demo akan dapat diakses di https://<your-application-name>.herokuapp.com .
Ini akan menginstal aplikasi dan semua dependensi pada Heroku (Login diperlukan) untuk Anda. Sebagai bagian dari instalasi, aplikasi Heroku akan memandu Anda melalui konfigurasi variabel lingkungan. Silakan klik tombol berikut untuk menggunakan aplikasi.
Setelah instalasi selesai, silakan buka https://<your-application-name>.herokuapp.com/setup dan konfigurasikan aplikasi. Tinjauan demo akan dapat diakses di https://<your-application-name>.herokuapp.com .
Unduh dan instal Google Cloud SDK.
Buat proyek baru
gcloud projects create <your-project-id> --set-as-default
Inisialisasi aplikasi mesin aplikasi Anda dengan proyek Anda dan pilih wilayahnya:
gcloud app create --project=<your-project-id>
Tambahkan variabel twilio yang tercantum dalam variabel konfigurasi bagian ke file variabel app.yaml .
Menyebarkan aplikasi pada mesin aplikasi dengan menjalankan perintah berikut.
gcloud app deploy
Untuk melihat aplikasi Anda jalankan
gcloud app browse
Setelah instalasi selesai, silakan buka https://<your-project-id>.appspot.com/setup dan konfigurasikan aplikasi. Tinjauan demo akan dapat diakses di https://<your-project-id>.appspot.com .
Garpu dan klon repositori. Kemudian, instal dependensi dengan
npm install
Jika Anda ingin memuat variabel lingkungan dari file, instal paket dotenv untuk menangani variabel lingkungan lokal.
npm install dotenv
Di direktori root membuat file yang dipanggil '.env', lalu tambahkan yang berikut ke atas app.js
require('dotenv').config()
Untuk menjalankan demo, Anda perlu mengatur Liste Variabel Lingkungan dalam Variabel Konfigurasi] (#Configuration-Variables)
Mulai aplikasi
npm start
Sebelum Anda dapat menggunakan demo, silakan buka http://<your-application-name>/setup dan konfigurasikan aplikasi. Tinjauan demo akan dapat diakses di http://<your-application-name> . Harap dicatat, jika Process.env.port tidak mengatur aplikasi yang dijalankan pada port 5000.
Jika Anda menjalankan demo secara lokal, harap ingat bahwa Twilio membutuhkan alamat yang dapat diakses secara publik untuk webhooks, dan proses pengaturan mendaftarkan ini dengan Twilio. Karena itu, Anda harus menjalankan sesuatu seperti Ngrok alih -alih hanya memukul http: // localhost: 5000/. Saat Anda mendapatkan alamat baru dari Ngrok, Anda harus juga menjalankan kembali proses pengaturan untuk mendaftarkan alamat yang diperbarui dengan Twilio.
Pengaturan Ngrok
Instalasi Sistem Luas
Unduh dan Instal dari Ngrok
Instal dengan NPM npm install ngrok -g
Jalankan Ngrok (jika port didefinisikan dalam pembaruan .env Anda yang sesuai)
./ngrok http 5000
Proyek saja menginstal
Instal Paket Ngrok
npm install ngrok --dev
Tambahkan yang berikut ke bagian atas app.js
const ngrok = require('ngrok')
const ngrokUrl = async function () {
const url = await ngrok.connect((process.env.PORT || 5000))
console.log('ngrok url ->', url)
}
Di app.js hubungi Ngrokurl di app.listen untuk mencatat URL Ngrok di server spin up
ngrokUrl()
Catatan: Di Google Chrome, koneksi HTTPS yang aman diperlukan untuk melakukan panggilan telepon melalui WebRTC. Gunakan terowongan yang mendukung HTTPS seperti NGROK, yang dapat meneruskan lalu lintas ke server web Anda.
Kontribusi dipersilakan dan diterima secara umum. Untuk amandemen yang tidak sepele adalah ide yang baik untuk mengajukan masalah yang menjelaskan perubahan yang diusulkan sebelum PR. Ini memungkinkan pengelola untuk memberikan bimbingan dan menghindari Anda melakukan pekerjaan yang digandakan.
Perubahan Anda harus mematuhi gaya kode proyek umum.
# please run this before "git commit"
npm run lint
# try automatic fix
./node_modules/.bin/eslint controllers --fix
./node_modules/.bin/eslint public --fix
Untuk membuat hidup lebih mudah bagi kontributor dan pengulas lain, silakan rebase komit Anda di PR yang sama
git rebase -i HEAD^^^^^^
# then squash or fixup your shards
# and force push into your fork
git push origin [YOUR BRANCH] -f
Anda dapat mengikuti saya di twitter - @mdamm_de
Mit
