Integrasi suara Salesforce dengan Twilio Flex

Arsitektur untuk integrasi Agent Assist dan Twilio Flex dengan Salesforce

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 Salesforce Lightning Service Console.

Sebelum memulai

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

  • Node.js

    Ikuti petunjuk penginstalan yang direkomendasikan untuk sistem operasi Anda.

  • Salesforce CLI

    Ikuti petunjuk penginstalan yang direkomendasikan untuk sistem operasi Anda.

  • Google Cloud CLI

    Instal perintah gcloud seperti yang diinstruksikan dan lakukan autentikasi menggunakan gcloud auth login.

  • Salesforce

    Login di URL instance Anda atau halaman login Salesforce dan perhatikan hal-hal berikut:

    • URL My Domain Salesforce Anda. Ikuti langkah-langkah berikut untuk menemukan URL My Domain:
      1. Buka panel menu > menu Penyiapan.
      2. Klik Penyiapan.
      3. Di kotak Quick Find, masukkan My Domain. Nama domainnya berformat berikut: MY-DOMAIN-NAME.develop.my.salesforce.com.
    • ID organisasi Salesforce Anda. Ikuti langkah-langkah berikut untuk menemukan ID organisasi:
      1. Buka panel menu > menu Penyiapan.
      2. Klik Penyiapan.
      3. Di kotak Quick Find, masukkan Company Information. Catatan: Langkah-langkah integrasi ini telah diuji dengan Salesforce Developer Edition saja. Perbedaan lisensi fitur dan antarmuka Salesforce mungkin muncul jika Anda menggunakan edisi lain.

  • Backend integrasi Agent Assist

    1. Ikuti petunjuknya untuk menyiapkan integrasi.
    2. Sebelum menjalankan skrip deployment, konfigurasikan variabel lingkungan berikut dengan deploy.sh atau dalam file .env di root project:
      • AUTH_OPTION: Tetapkan ini ke SalesforceLWC.
      • SALESFORCE_DOMAIN: Nama domain yang mirip dengan YOUR_SUBDOMAIN.develop.lightning.force.com. Anda mencatat nilai ini dalam prasyarat Salesforce. Perhatikan bahwa Anda tidak boleh menyertakan https://.
      • SALESFORCE_ORGANIZATION_ID: Anda mencatat nilai ini dalam prasyarat Salesforce.
      • APP_AUTH_OPTION: Tetapkan ini ke Twilio.
      • TWILIO_ACCOUNT_SID: Tetapkan ini ke SID Akun Twilio Anda.

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. Di tab Configure, konfigurasikan plugin dengan detail berikut:
    • Nama Unik: SipRec1
    • Server Perekaman Sesi: 
      sip:+<GTP-provisioned-phone-number>@216.239.36.145:5672;transport=tls;secure=true;edge=umatilla
    • Lihat dokumentasi integrasi telepon untuk mengetahui detail selengkapnya tentang penyediaan nomor GTP. Anda dapat mengabaikan langkah-langkah konfigurasi dan validasi SBC karena langkah-langkah tersebut sudah selesai untuk konektor Twilio Siprec.
  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 Twilio Studio untuk membuat fork SIPREC dari streaming media ke Agent Assist. Selain itu, kode ini juga melakukan postingan HTTP 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 Incoming Call ke input widget Make HTTP Request.
  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 Berhasil dan Gagal widget register_twilio ke input widget Jalankan Fungsi.
  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 Berhasil dan Gagal widget Buat Permintaan HTTP ke input widget Fork Stream.
  13. Hubungkan node Berikutnya dari widget Fork Stream ke widget SendCallToAgent.

  14. Konfigurasi widget Fork Stream sebagai berikut:

    • Stream Action: Start
    • 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 Salesforce 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 Resource Statis. Salesforce memerlukan resource statis untuk memuat JavaScript 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 klien eksternal

LWC Salesforce menggunakan alur OAuth 2.0 kredensial klien untuk mengautentikasi Anda. Aplikasi klien eksternal mengaktifkan alur kredensial klien. Gunakan kunci konsumen dan rahasia konsumen aplikasi untuk mengonfigurasi LWC Salesforce guna mengautentikasi pengguna dengan Salesforce.

  1. Buka menu bar > menu Penyiapan, lalu klik Penyiapan. Di kotak Quick Find, masukkan External Client App Manager.
    1. Klik Pengelola Aplikasi Klien Eksternal > Aplikasi Klien Eksternal Baru > Buat, lalu masukkan informasi berikut.
      • Nama Aplikasi Klien Eksternal: lwc auth
      • Nama API: lwc_auth
      • Email Kontak: your_email@example.com
      • API (Aktifkan Setelan OAuth) > Aktifkan OAuth: Dipilih
      • API (Aktifkan Setelan OAuth) > URL Panggilan Balik: https://login.salesforce.com/services/oauth2/callback
      • API (Enable OAuth Settings) > Selected OAuth Scopes: Access the identity URL service
      • API (Aktifkan Setelan OAuth) > Aktifkan Alur Kredensial Klien: Dipilih
    2. Klik Create.
  2. Buka menu bar > menu Penyiapan, lalu klik Penyiapan. Di kotak Quick Find, masukkan External Client App Manager.
    1. Klik nama aplikasi klien eksternal Anda > Edit.
    2. Buka OAuth Policies > OAuth Flows and External Client App Enhancements.
    3. Pastikan Enable Client Credentials Flow dipilih.
    4. Untuk Run As, masukkan nama pengguna login Anda.
    5. Klik Simpan.
  3. Buka menu bar > menu Penyiapan, lalu klik Penyiapan. Di kotak Quick Find, masukkan External Client App Manager.
    1. Klik nama aplikasi klien eksternal Anda > Edit.
    2. Buka OAuth Settings > App Settings > Consumer Key and Secret.
    3. Masukkan kode verifikasi yang dikirim ke email Anda.
    4. Salin kunci konsumen dan rahasia konsumen 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. Di kotak Quick Find, masukkan CORS, lalu klik Edit.
    1. Pilih Aktifkan CORS untuk endpoint OAuth.
    2. Klik Simpan.
  3. Buka menu bar > menu Penyiapan, lalu klik Penyiapan.
  4. Di kotak Quick Find, masukkan Trusted URLs, lalu klik New Trusted URL.
  5. Masukkan informasi berikut:
    • Nama API: ui_connector
    • URL: 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.
    • Petunjuk CSP: Centang semua kotak.
    • Klik Simpan & Baru.
  6. Masukkan informasi berikut:
    • Nama API: ui_connector_wss
    • URL: Masukkan URL endpoint Layanan Cloud Run konektor UI 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.
    • Petunjuk CSP: Centang semua kotak.
    • Klik Simpan & Baru.
  7. Masukkan informasi berikut:
    • Nama API: salesforce_domain
    • URL: Masukkan URL Domain Salesforce Anda dengan format berikut: https://YOUR_SUBDOMAIN.my.salesforce.com.
    • Petunjuk CSP: Centang semua kotak.
    • Klik Simpan & Baru.
  8. Masukkan informasi berikut:
    • Nama API: twilio_flex
    • URL: https://flex.twilio.com
    • Petunjuk CSP: Centang semua kotak.
    • 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 secara 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.
    1. Pilih Header dan Dua Wilayah yang Sama.
    2. Klik Berikutnya.
    3. Petakan setiap wilayah ke wilayah baru.
    4. Klik Done.
  5. Dari sidebar Komponen, pindahkan agentAssistContainerModule ke sidebar. Catatan: Perintah npm deploy menyediakan komponen ini.
  6. Klik komponen yang Anda tempatkan di langkah sebelumnya dan isi kolom formulir sebagai berikut untuk menambahkan detail konfigurasi.
    • endpoint: URL konektor UI Backend Integrasi Agen Anda, seperti URL dari konsol Cloud Run, seperti: https://UI_CONNECTOR_ENDPOINT.GCP_REGION.run.app
    • fitur: Fitur Agent Assist diaktifkan di profil percakapan Anda, seperti CONVERSATION_SUMMARIZATION,KNOWLEDGE_ASSIST_V2, dan AGENT_COACHING. Perhatikan bahwa beberapa fitur, seperti SMART_REPLY, tidak tersedia untuk voice.
    • channel: Menunjukkan bahwa integrasi adalah untuk voice.
    • platform: Menunjukkan bahwa platformnya adalah twilio.
    • conversationProfile: Nama resource profil percakapan Agent Assist Anda (contoh: projects/GCP_PROJECT_ID/locations/GCP_REGION/conversationProfiles/CONVERSATION_PROFILE_ID)
    • consumerKey: Kunci pengguna aplikasi klien eksternal dari langkah sebelumnya.
    • consumerSecret: Rahasia pengguna aplikasi klien eksternal pada langkah sebelumnya.

Langkah 7: Uji integrasi

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

  1. Login ke Twilio Flex dari Service Console Anda.
  2. Hubungi nomor Twilio Flex Anda. Anda telah mencatat hal ini di Langkah 1.
  3. Di Konsol Layanan, 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.