หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>โค้ดแหล่งที่มา AI
ดาวน์โหลด

การสาธิตศูนย์ติดต่อ Twilio

สาระสำคัญของศูนย์ติดต่อที่ทันสมัยคือการให้บริการลูกค้าในหลายช่องทาง (เสียง, แชทเว็บ, วิดีโอ, อีเมล, โซเชียลมีเดีย, ฯลฯ ) อนุญาตให้พวกเขาย้ายไปทั่วช่องทางและที่สำคัญที่สุดคือรักษาบริบทของการสนทนา

การสาธิตศูนย์ติดต่อ Twilio เป็นสถาปัตยกรรมอ้างอิงสำหรับการสร้างศูนย์ติดต่อที่ทันสมัย จุดสนใจของการสาธิตคือการแสดงวิธีการสร้างศูนย์ติดต่อที่ใช้แพลตฟอร์ม Twilio และส่วนประกอบแบ็กเอนด์และส่วนประกอบต่าง ๆ ที่จำเป็น

ศูนย์ติดต่อ Twilio

หมายเหตุ: เราได้ทำงานพื้นฐานจากมุมมอง UX และโอกาสมากมายยังคงปรับปรุงให้ดีขึ้น มันได้รับการออกแบบมาเพื่อวัตถุประสงค์ในการสาธิตและยังไม่ได้รับการตรวจสอบความปลอดภัยแยกต่างหาก

แอปพลิเคชันนี้มีให้ตาม Twilio ไม่สนับสนุนอย่างเป็นทางการ

คุณสมบัติ

  • หมายเลขโทรศัพท์ Twilio
  • Twilio Programmable Voice (PSTN, Twilio WebRTC ไคลเอ็นต์)
  • แชทที่ตั้งโปรแกรมได้ Twilio
  • SMS ที่ตั้งโปรแกรมได้ Twilio และ Facebook Messenger
  • วิดีโอที่ตั้งโปรแกรมได้ Twilio
  • Twilio taskrouter
  • Twilio REST APIS

กระแสการเดินทางของลูกค้า:

การโทรกลับด้วยเสียง (PSTN):

ลูกค้ากรอกคำขอการโทรออนไลน์ -> แบบฟอร์มที่ส่งไปยังเซิร์ฟเวอร์ -> งานในงานที่สร้างขึ้น -> ค้นหาตัวแทนที่มีอยู่และจับคู่ -> ตัวแทนรับการจองและโทรออกลูกค้า (PSTN) -> เชื่อมต่อลูกค้ากับตัวแทน (WEBRTC)

การเดินทางของลูกค้าโทรกลับ PSTN

การโทรด้วยเสียงขาเข้า (PSTN):

การโทรของลูกค้าหมายเลขโทรศัพท์ Twilio -> คำขอ Twilio WebHook -> เซิร์ฟเวอร์สร้าง twiml สำหรับ IVR -> ผู้โทรเลือกตัวเลือก IVR -> งานใน TaskRouter ที่สร้างขึ้น -> ค้นหาตัวแทนที่มีอยู่

การเดินทางของลูกค้า

เว็บแชท:

ลูกค้ากรอกแบบฟอร์มคำขอเว็บแชทออนไลน์ -> แบบฟอร์มที่ส่งไปยังเซิร์ฟเวอร์ -> งานใน TaskRouter ที่สร้างขึ้น -> ค้นหาตัวแทนที่มีอยู่และการจับคู่ -> ตัวแทนรับการจอง -> เริ่มแชทระหว่างลูกค้าและตัวแทน

แชทการเดินทางของลูกค้า

โทรวิดีโอ:

ลูกค้ากรอกแบบฟอร์มคำขอโทรวิดีโอ -> แบบฟอร์มที่ส่งไปยังเซิร์ฟเวอร์ -> งานใน TaskRouter และห้องวิดีโอที่สร้างขึ้น -> ค้นหาตัวแทนที่มีอยู่และการจับคู่ -> ตัวแทนยอมรับการจอง -> ตัวแทนเข้าร่วมห้องวิดีโอ

วิดีโอการเดินทางของลูกค้า

Dashboard Events TaskRouter แบบเรียลไทม์:

การแสดงแบบเรียลไทม์ของตัวชี้วัดศูนย์ติดต่อการดำเนินงาน (ตัวอย่างเช่น: เวลาที่จับการโทรเฉลี่ย, การเพิ่มประสิทธิภาพของตัวแทน, ตัวชี้วัดการโทร, สถิติของ TaskRouter และอื่น ๆ อีกมากมาย) โปรดตรวจสอบ repo ต่อไปนี้: https://github.com/ameerbadri/twilio-taskrouter-realtime-dashboard

สิ่งที่ต้องทำล่วงหน้า:

  • ความรู้พื้นฐานเกี่ยวกับแพลตฟอร์ม Twilio - TwilioQuest, เกมแบบโต้ตอบและผ่านตัวเองที่คุณเรียนรู้วิธีการ Twilio
  • Twilio taskrouter
  • ไคลเอนต์ Twilio
  • แชทที่ตั้งโปรแกรมได้ Twilio
  • วิดีโอที่ตั้งโปรแกรมได้ Twilio
  • ความรู้ในการทำงานของ Angular.js, bootstrap และ node.js

การติดตั้ง

หากคุณไม่เคยใช้ Twilio มาก่อนยินดีต้อนรับ! คุณจะต้องลงทะเบียนบัญชี Twilio

เราขอแนะนำให้คุณสร้างโครงการแยกต่างหากภายใน Twilio และติดตั้งแอพนี้โดยใช้โครงการนั้น

หมายเหตุ: ขอแนะนำให้คุณมีบัญชี Twilio ที่ได้รับการอัพเกรดเพื่อสัมผัสการสาธิตนี้อย่างเต็มที่

ตัวแปรการกำหนดค่า

ก่อนที่คุณจะเริ่มการติดตั้งคุณจะต้องรวบรวมตัวแปรต่อไปนี้จากพอร์ทัลบัญชี Twilio

  • TWILIO_ACCOUNT_SID
  • TWILIO_AUTH_TOKEN
  • TWILIO_WORKSPACE_SID

  • สำหรับบัญชี SID และ Auth Token โปรดคลิกที่นี่: https://www.twilio.com/console

  • ซื้อหมายเลขโทรศัพท์หรือใช้หมายเลขที่มีอยู่ (แอปพลิเคชันจะกำหนดค่าหมายเลขให้คุณในภายหลัง)

  • สร้างพื้นที่ทำงาน Twilio TaskRouter ใหม่และเลือกเทมเพลตที่กำหนดเอง

  • สำหรับคีย์ Twilio API SID และ TWILIO API SECRET

  • TWILIO_API_KEY_SID
  • TWILIO_API_KEY_SECRET

สำหรับเว็บแชทคุณต้องตั้งค่าตัวแปรสภาพแวดล้อมการแชทที่ตั้งโปรแกรมได้ Twilio:

  • TWILIO_CHAT_SERVICE_SID
  • สำหรับการสร้างบริการแชทใหม่หรือใช้ใหม่ที่มีอยู่คลิกที่นี่: https://www.twilio.com/console/chat/services

Agent UI ไม่สนับสนุนการจัดการงานหลายอย่างพร้อมกันดังนั้นงานทั้งหมดจะถูกกำหนดเส้นทางในช่องงานเดียวกันที่มีความจุของงานพร้อมกัน สำหรับรายละเอียดเพิ่มเติมโปรดตรวจสอบ TaskRouter MultitaSking

  • สำหรับการโทรออกการเปิดใช้งานการตั้งค่าการประชุมตัวแทนคลิกที่นี่: https://www.twilio.com/console/voice/conferences/settings

Terraform Install - Heroku

คุณสามารถปรับใช้โครงการนี้กับ Depencendies ทั้งหมดใน Heroku ด้วย Terraform โครงสร้างพื้นฐานโอเพนซอร์ซเป็นเครื่องมือซอฟต์แวร์รหัส

สร้างคีย์ API สำหรับ Heroku ตรวจสอบคู่มือ API แพลตฟอร์ม Heroku เพื่อขอความช่วยเหลือ

เพิ่มคีย์ Heroku API และที่อยู่อีเมลของคุณไปที่ terraform.tfvars

เริ่มต้นไฟล์การกำหนดค่า Terraform และเรียกใช้

terraform init

หากคุณยังไม่ได้ติดตั้ง Terraform ให้ติดตาม Terraform เริ่มต้น

เพิ่มตัวแปร Twilio ที่แสดงในส่วนตัวแปรการกำหนดค่าส่วนไปยังไฟล์ terraform.tfvars Variables

ตั้งชื่อแอปพลิเคชัน Heroku ของคุณในโครงสร้างพื้นฐานคำอธิบายไฟล์ terraform_heroku.tf

สร้างแผนการดำเนินการ

terraform plan

ติดตั้งโครงการบน Heroku โดยดำเนินการ

terraform apply

หลังจากการติดตั้งเสร็จสมบูรณ์โปรดเปิด https://<your-application-name>.herokuapp.com/setup และกำหนดค่าแอปพลิเคชัน ภาพรวมการสาธิตจะสามารถเข้าถึงได้ที่ https://<your-application-name>.herokuapp.com

คลิกเดียวติดตั้ง - Heroku

สิ่งนี้จะติดตั้งแอปพลิเคชันและการอ้างอิงทั้งหมดใน Heroku (จำเป็นต้องเข้าสู่ระบบ) สำหรับคุณ เป็นส่วนหนึ่งของการติดตั้งแอพ Heroku จะนำคุณผ่านการกำหนดค่าตัวแปรสภาพแวดล้อม โปรดคลิกที่ปุ่มต่อไปนี้เพื่อปรับใช้แอปพลิเคชัน

หลังจากการติดตั้งเสร็จสมบูรณ์โปรดเปิด https://<your-application-name>.herokuapp.com/setup และกำหนดค่าแอปพลิเคชัน ภาพรวมการสาธิตจะสามารถเข้าถึงได้ที่ https://<your-application-name>.herokuapp.com

การติดตั้งเครื่องยนต์ Google App

ดาวน์โหลดและติดตั้ง Google Cloud SDK

สร้างโครงการใหม่

gcloud projects create <your-project-id> --set-as-default

เริ่มต้นแอพแอพพลิเคชั่นแอปของคุณด้วยโครงการของคุณและเลือกภูมิภาค:

gcloud app create --project=<your-project-id>

เพิ่มตัวแปร Twilio ที่แสดงในส่วนตัวแปรการกำหนดค่าส่วนไปยังไฟล์ app.yaml Variables

ปรับใช้แอพบนเอ็นจิ้นแอพโดยเรียกใช้คำสั่งต่อไปนี้

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 ต้องการที่อยู่ที่สามารถเข้าถึงได้ในที่สาธารณะสำหรับ webhooks และกระบวนการตั้งค่าจะลงทะเบียนสิ่งเหล่านี้ด้วย Twilio ดังนั้นคุณจะต้องเรียกใช้บางอย่างเช่น Ngrok แทนที่จะกดปุ่ม http: // localhost: 5000/ เมื่อคุณได้รับที่อยู่ใหม่จาก NGROK คุณจะต้องเรียกใช้กระบวนการตั้งค่าอีกครั้งเพื่อลงทะเบียนที่อยู่ที่อัปเดตด้วย Twilio

การตั้งค่า Ngrok

  • การติดตั้งระบบกว้าง

    • ดาวน์โหลดและติดตั้งจาก 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 โทร ngrokurl ใน app.listen เพื่อเข้าสู่ระบบ url ngrok บนเซิร์ฟเวอร์หมุนขึ้น

      ngrokUrl()

หมายเหตุ: ใน Google Chrome จำเป็นต้องมีการเชื่อมต่อ HTTPS ที่ปลอดภัยในการโทรผ่าน WEBRTC ใช้อุโมงค์ที่รองรับ HTTPS เช่น NGROK ซึ่งสามารถส่งต่อปริมาณการใช้งานไปยังเว็บเซิร์ฟเวอร์ของคุณ

ผลงาน

ยินดีต้อนรับการมีส่วนร่วมและได้รับการยอมรับโดยทั่วไป สำหรับการแก้ไขที่ไม่สำคัญเป็นความคิดที่ดีที่จะส่งปัญหาที่อธิบายการเปลี่ยนแปลงที่เสนอก่อนการประชาสัมพันธ์ สิ่งนี้ช่วยให้ผู้ดูแลสามารถให้คำแนะนำและหลีกเลี่ยงการทำงานซ้ำ ๆ

การเปลี่ยนแปลงของคุณจะต้องปฏิบัติตามรูปแบบรหัสโครงการทั่วไป 

 # 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

ใบอนุญาต

มิกซ์

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด