Integrasi suara Salesforce dengan Twilio Flex

Integrasi suara ini menggunakan integrasi Twilio Open CTI untuk menghadirkan pusat panggilan Twilio Flex ke instance Salesforce Anda.

Agent Assist menggunakan aliran media dari panggilan Twilio Flex untuk memberikan saran kepada agen Anda di konsol layanan Salesforce Lightning.

Sebelum memulai

Untuk mengintegrasikan modul UI Agent Assist dengan Salesforce, Anda memerlukan akses ke resource berikut:

  • Node.js Google telah menguji dan merekomendasikan Node.js 18.20.4 dengan integrasi ini. Ada masalah kompatibilitas yang diketahui dengan Node.js 20.18.0. Untuk mengetahui petunjuk cara menginstal versi Node.js tertentu, lihat nvm.
  • Salesforce CLI. Instal menggunakan perintah terminal berikut: (sudo) npm install -g @salesforce/cli
  • Gcloud CLI Instal perintah gcloud seperti yang diinstruksikan dan lakukan autentikasi menggunakan kode berikut: gcloud auth login
  • UI Salesforce
    1. Login di URL instance Anda atau login.salesforce.com dan perhatikan hal berikut:
      • "URL Domain Saya" Salesforce Anda. Temukan opsi ini dengan membuka panel menu > menu Penyiapan, lalu klik Penyiapan. Masukkan penelusuran Quick Find untuk "My Domain". Nama domain menggunakan format berikut: MY-DOMAIN-NAME.develop.my.salesforce.com.
      • ID organisasi Salesforce Anda. Temukan ini dengan membuka menu bar > Menu Penyiapan, lalu klik Penyiapan. Masukkan penelusuran Quick Find untuk "Informasi Perusahaan".
  • Backend integrasi Agent Assist
    1. Ikuti petunjuk untuk menyiapkan integrasi.
    2. Sebelum menjalankan skrip deployment, konfigurasi variabel lingkungan berikut dengan deploy.sh, atau dalam file .env di root project:
      • AUTH_OPTION: Tetapkan ini keSalesforceLWC
      • SALESFORCE_DOMAIN: Nama domain seperti: YOUR_SUBDOMAIN.develop.lightning.force.com. Anda mencatat nilai ini dalam prasyarat UI Salesforce. Perhatikan bahwa Anda tidak boleh menyertakan https://.
      • SALESFORCE_ORGANIZATION_ID: Anda mencatat nilai ini dalam prasyarat UI Salesforce.

Langkah 1: Siapkan Twilio Flex

Twilio Flex berfungsi sebagai softphone dalam integrasi ini. Anda dapat login ke konsol Twilio untuk menyiapkan akun Flex. Buka halaman penyiapan Twilio untuk mendapatkan petunjuk mendetail tentang cara membuat akun Flex.

Menginstal add-on konektor SIPREC

Add-on konektor SIPREC memungkinkan akun Twilio Flex Anda membuat fork SIPREC dari aliran media panggilan suara ke Agent Assist. Ikuti langkah-langkah berikut untuk menginstal add-on konektor SIPREC.

  1. Buka Twilio Home > Marketplace > Catalog > Twilio > Siprec Connector.
  2. Klik Instal > kotak centang persetujuan persyaratan dan ketentuan > Instal.
  3. Pada tab Configure, konfigurasikan plugin sebagai berikut:
    • Nama Unik: SipRec1
    • Server Perekaman Sesi: 
      sip:+<GTP-provisioned-phone-number>@216.239.36.145:5672;transport=tls;secure=true;edge=umatilla
    • Bekerjasamalah dengan perwakilan Google Anda untuk menyediakan nomor GTP menggunakan dokumentasi ringkasan integrasi telepon yang memiliki detail selengkapnya tentang prosesnya. Anda dapat mengabaikan langkah-langkah konfigurasi dan validasi SBC karena langkah-langkah tersebut telah diselesaikan untuk Twilio Siprec Connector.
  4. Buka Twilio Home > Functions and Assets.
    • Jika Functions and Assets tidak terlihat di sidebar, sematkan dari Explore Products.
  5. Klik Create Service.
  6. Beri nama layanan baru ui-connector-auth.
  7. Di editor yang muncul, klik Tambahkan + > Tambahkan Fungsi.
  8. Beri nama fungsi conversation-name.
  9. Klik , lalu ubah visibilitas fungsi menjadi Publik.
  10. Salin dan tempel seluruh konten ui-connector-auth.js dari repositori GitHub ke editor.
  11. Klik Simpan.
  12. Klik Deploy All.

Mengonfigurasi IVR dengan Flex Studio

IVR terdiri dari mengonfigurasi alur panggilan terprogram dengan Studio Twilio untuk membuat fork SIPREC dari streaming media ke Agent Assist. Selain itu, HTTP post juga dilakukan untuk membagikan nomor telepon dan ID percakapan ke Agent Assist. Ikuti langkah-langkah berikut untuk mengonfigurasi IVR dengan Flex Studio.

  1. Buka Konsol Twilio
  2. Klik Develop > Phone Numbers > Manage > Active Numbers. Akan ada satu baris dalam tabel dengan nomor Twilio default yang disediakan untuk Akun Flex Anda.
  3. Di bagian Voice - Studio Workflow, klik Voice IVR.
  4. Tarik widget Buat Permintaan HTTP ke dalam alur.
  5. Putuskan koneksi Incoming Call dari input widget SendCallToAgent.
  6. Hubungkan Panggilan Masuk ke input widget Buat Permintaan HTTP.
  7. Konfigurasi widget Make HTTP Request dengan detail berikut:
    • Nama Widget: register_twilio
    • Metode Permintaan: POST
    • URL Permintaan: <your-ui-connector-cloud-run-url>.run.app/register-app
    • Jenis konten: Application/JSON
    • Isi permintaan: 
      {
"accountSid": "<yourTwilioAccountSid>",
"authToken": "<yourTwilioAccountAuthToken>"
}
  8. Tarik widget Run Function ke dalam alur.
  9. Hubungkan output Success dan Fail widget register_twilio ke input widget Run Function.
  10. Buat widget dengan detail berikut:
    • Nama Widget: conversation_name
    • Layanan: ui-connector-auth
    • Lingkungan: ui
    • Fungsi: conversation-name
    • Parameter Fungsi:
      • 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. Tarik widget Fork Stream dari sidebar ke dalam alur.
  12. Hubungkan output Success and Fail widget Make HTTP Request ke input widget Fork Stream.
  13. Hubungkan node Berikutnya dari widget Fork Stream ke widget SendCallToAgent.

  14. Konfigurasikan widget Fork Stream sebagai berikut:

    • Tindakan Streaming: Mulai
    • Stream Type: Siprec
    • Nama Konektor: Siprec1
    • Jalur: Kedua Jalur

    • Parameter Streaming:

      • Kunci: conversation

      • Nilai:

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

  15. Klik Simpan > Publikasikan.

Detail akun

Ikuti langkah ini untuk mengumpulkan detail akun Twilio Flex Anda. Anda memerlukan informasi ini untuk mengonfigurasi Flex CTI di Salesforce nanti.

  1. Buka Twilio Home > Account Dashboard, dan catat informasi berikut:
    • SID Akun
    • Nomor telepon Twilio saya

Langkah 2: Siapkan project pengembangan Anda

Untuk mulai mengintegrasikan modul UI Agent Assist, ikuti langkah-langkah berikut.

  1. Jalankan kode berikut untuk meng-clone repositori integrasi Agent Assist dan membuka project Anda: 
    git clone https://github.com/GoogleCloudPlatform/agent-assist-integrations
cd salesforce/aa-lwc
  2. Jalankan perintah berikut untuk mendownload file JavaScript modul UI yang akan Anda deploy nanti sebagai Sumber Daya Statis. Salesforce mengharuskan resource statis memuat JS pihak ketiga. 
    npm run generate-static-resources
npm install

Langkah 3: Siapkan lingkungan Salesforce Anda

Anda dapat mengintegrasikan modul UI Agent Assist di lingkungan tertentu, seperti produksi atau pengembangan. Salesforce menyebut lingkungan ini sebagai Organisasi (org.).

Mengonfigurasi org Anda dengan Salesforce CLI

Ikuti langkah-langkah berikut untuk menggunakan Salesforce CLI guna mengonfigurasi org Anda untuk integrasi Agent Assist.

  1. Jalankan kode berikut dan autentikasi CLI menggunakan detail login Salesforce yang biasa Anda gunakan. 
    npm run login
  2. Jalankan kode berikut untuk men-deploy LWC ke org. 
    npm run deploy

Langkah 4: Buat aplikasi yang terhubung

Komponen Web Lightning Salesforce menggunakan alur OAuth 2.0 kredensial klien untuk mengautentikasi Anda. Aplikasi (app) yang terhubung memungkinkan alur kredensial klien. Gunakan kunci konsumen dan rahasia konsumen aplikasi untuk mengonfigurasi LWC guna mengautentikasi pengguna dengan Salesforce.

Mengonfigurasi setelan dasar

  1. Buka menu bar > Menu Penyiapan, lalu klik Penyiapan. Masukkan penelusuran Quick Find untuk "Pengelola Aplikasi".
  2. Klik New Connected App > Create a Connected App > Continue, lalu masukkan informasi berikut.
    • Nama Aplikasi yang Terhubung: lwc auth
    • Nama API: lwc_auth
    • Email Kontak: your_email@example.com
    • Aktifkan Setelan OAuth: checked
    • URL Panggilan Balik: https://login.salesforce.com/services/oauth2/callback
    • Cakupan OAuth yang Dipilih: Mengakses layanan URL identitas
    • Aktifkan Alur Kredensial Klien: checked
  3. Klik Simpan.

Untuk informasi tambahan tentang aplikasi yang terhubung, lihat referensi Salesforce berikut.

Menetapkan otorisasi dan kredensial untuk menjalankan

  1. Buka menu bar > Menu Penyiapan, lalu klik Penyiapan.
  2. Masukkan penelusuran Pencarian Cepat untuk "Kelola Aplikasi yang Terhubung".
  3. Klik nama aplikasi terhubung Anda > Edit.
    • Buka Client Credentials Flow.
    • Untuk Run As, klik kaca pembesar, lalu pilih nama pengguna Anda.
    • Klik Simpan.
  4. Buka menu bar > Menu Penyiapan, lalu klik Penyiapan.
  5. Masukkan penelusuran Quick Find untuk "Pengelola Aplikasi".
  6. Cari lwc auth, lalu klik .
    • Klik Lihat > Kelola Detail Konsumen.
    • Masukkan kode verifikasi yang dikirim ke email Anda.
    • Salin Consumer Key dan Consumer Secret ke tempat yang aman. Anda akan memerlukannya untuk langkah selanjutnya.

Menetapkan kebijakan keamanan konten dan CORS

  1. Buka menu bar > Menu Penyiapan, lalu klik Penyiapan.
  2. Masukkan penelusuran Quick Find untuk "CORS", lalu klik Edit.
    • Centang Aktifkan CORS untuk endpoint OAuth.
    • Klik Simpan.
  3. Buka menu bar > Menu Penyiapan, lalu klik Penyiapan.
  4. Masukkan penelusuran Quick Find untuk "URL Tepercaya", lalu klik URL Tepercaya Baru.
  5. Masukkan Nama API: ui_connector
    • Masukkan URL endpoint Layanan Cloud Run UI Connector yang Anda deploy dengan Backend Integrasi Agent Assist. Anda dapat menemukan URL ini di konsol Cloud Run. Misalnya: https://UI_CONNECTOR_SUBDOMAIN.GCP-REGION.run.app
    • Centang semua kotak di CSP Directives.
    • Klik Simpan & Baru.
  6. Masukkan Nama API: ui_connector_wss
    • Masukkan URL endpoint Layanan Cloud Run UI Connector yang Anda deploy dengan Backend Integrasi Agent Assist. Anda dapat menemukan URL ini di konsol Cloud Run. Ubah protokol menjadi wss, untuk traffic WebSockets. Misalnya: wss://UI_CONNECTOR_SUBDOMAIN.GCP-REGION.run.app
    • Centang semua kotak di CSP Directives.
    • Klik Simpan & Baru.
  7. Masukkan Nama API: salesforce_domain
    • Masukkan URL Domain Salesforce Anda dengan format berikut: https://YOUR_SUBDOMAIN.my.salesforce.com.
    • Centang semua kotak di CSP Directives.
    • Klik Simpan.

Langkah 5: Instal plugin CTI Twilio Flex

Salesforce menyediakan Salesforce Open CTI untuk memungkinkan integrasi softphone pihak ketiga dengan instance Salesforce Anda.

Twilio Flex CTI menggunakan Salesforce Open CTI untuk memungkinkan Anda menggunakan Flex langsung dalam instance Salesforce. Ikuti petunjuk Twilio untuk menyiapkan Twilio Flex CTI di instance Salesforce Anda.

Langkah 6: Instal Komponen Web Lightning Salesforce

Ikuti langkah-langkah berikut untuk menggunakan Lightning Experience Editor guna menambahkan Komponen Web Lightning Salesforce ke halaman kontak tempat CTI Twilio Flex Anda terbuka saat ada panggilan baru masuk.

  1. Buka Service Console, lalu pilih Contacts.
  2. Pilih Catatan kontak.
  3. Klik Menu Penyiapan > Edit Halaman.
  4. Klik Template > Ubah.
    • Pilih Header dan Dua Wilayah yang Sama.
    • Klik Berikutnya.
    • Petakan setiap wilayah ke wilayah baru.
    • Klik Selesai.
  5. Dari sidebar Komponen, pindahkan agentAssistContainerModule ke sidebar. Catatan: Perintah npm deploy menyediakan komponen ini.
  6. Klik komponen yang Anda tempatkan pada langkah sebelumnya dan isi kolom formulir sebagai berikut untuk menambahkan detail konfigurasi.
    • endpoint: URL konektor UI backend integrasi Anda. Misalnya, URL dari konsol Cloud Run, seperti: https://UI-CONNECTOR-ENDPOINT.GCP-REGION.run.app.
    • fitur: Fitur Agent Assist yang akan disertakan. Fitur ini harus diaktifkan di profil percakapan Anda. Beberapa fitur yang tersedia meliputi CONVERSATION_SUMMARIZATION,KNOWLEDGE_ASSIST_V2, dan AGENT_COACHING. Perhatikan bahwa beberapa fitur, seperti SMART_REPLY, tidak tersedia untuk voice-twilio.
    • channel: Menunjukkan bahwa integrasi adalah untuk suara.
    • channelType: Menunjukkan bahwa jenis integrasi suara adalah twilio.
    • conversationProfile: Nama resource profil percakapan Agent Assist Anda. Misalnya, projects/GCP-PROJECT-ID/locations/GCP-REGION/conversationProfiles/CONVERSATION-PROFILE-ID
    • consumerKey: Kunci konsumen aplikasi terhubung dari Langkah 3.
    • consumerSecret: Rahasia konsumen aplikasi terhubung dari Langkah 3.

Langkah 7: Uji integrasi

Anda dapat menguji integrasi suara dengan melakukan panggilan uji ke pusat panggilan Salesforce.

  1. Login ke Twilio Flex dari konsol layanan Salesforce Anda.
  2. Hubungi nomor Twilio Flex Anda. Anda telah mencatat hal ini di Langkah 1.
  3. Di konsol layanan Salesforce, terima panggilan. Layar akan membuka halaman kontak baru atau yang sudah ada untuk nomor yang menelepon.
  4. Jika ini adalah halaman kontak baru, simpan kontak. Saat halaman Kontak dimuat, Komponen Web Lightning Salesforce akan dimuat di sidebar.
  5. Uji kedua sisi percakapan, pastikan fitur Bantuan Agen berfungsi seperti yang telah Anda konfigurasi.