Transfer Agen Langsung

1. Pengantar

Terakhir Diperbarui: 23-08-2021

Transfer agen langsung dengan Business Messages

Fitur pengalihan agen langsung Business Messages memungkinkan agen Anda memulai percakapan sebagai bot dan beralih di tengah percakapan ke agen langsung (perwakilan manusia). Bot Anda dapat menangani pertanyaan umum, seperti jam buka, sementara agen live Anda dapat memberikan pengalaman yang disesuaikan dengan lebih banyak akses ke konteks pengguna. Jika transisi antara kedua pengalaman ini lancar, pengguna akan mendapatkan jawaban atas pertanyaan mereka dengan cepat dan akurat, sehingga menghasilkan rasio engagement kembali yang lebih tinggi dan peningkatan kepuasan pelanggan.

Codelab ini mengajarkan cara memanfaatkan fitur pengalihan agen live sepenuhnya.

Yang akan Anda bangun

Dalam codelab ini, Anda akan membuat webhook untuk agen yang dapat mengirim dan menerima peristiwa pengalihan agen langsung. Anda akan menggunakan UI dasar yang disediakan oleh kode awal untuk menguji apa yang telah Anda buat.

Catatan: Codelab ini mengasumsikan bahwa Anda telah terdaftar sebagai partner dan telah menerima persetujuan dari tim dukungan kami. Jika belum, mendaftarlah ke Business Messages dan tunggu persetujuan sebelum memulai codelab ini.

Yang akan Anda pelajari

• Cara menyimpan dan mengelola status percakapan.
• Cara menggunakan Business Messages untuk mengirim peristiwa pengalihan agen aktif.
• Cara menyiapkan webhook dan UI dasar untuk bergabung dalam percakapan sebagai agen.
• Praktik terbaik untuk menggunakan Business Messages API.

Codelab ini berfokus pada penggunaan Business Message API untuk menerapkan pengalihan agen live. Anda dapat membaca kode awal untuk setiap tahap, tetapi Anda hanya perlu menerapkan kode yang terkait dengan Business Messages.

Yang Anda butuhkan

• Agen Business Messages, termasuk kunci akun layanan Anda. Anda dapat membuat agen dengan mengikuti panduan Membuat agen.
• Konfigurasi Cloud Datastore yang berfungsi dan ditautkan ke project GCP agen Anda. Anda dapat menggunakan panduan memulai Cloud Datastore untuk menyiapkan hal ini. Anda tidak perlu mengetahui cara menggunakan Cloud Datastore.
• Komputer yang telah menginstal Google Cloud SDK dan Node.js (versi 10 atau yang lebih baru).
• Perangkat Android (dengan versi 5 atau yang lebih tinggi) atau perangkat iOS untuk menguji pengalaman pengguna.
• Pengalaman dengan pemrograman aplikasi web. Anda akan menulis sedikit kode Javascript dan mungkin perlu men-debug kode yang Anda tulis.

2. Membuat bot echo

Pada langkah ini, Anda akan men-deploy perwakilan bot dasar yang disebut "Echo bot". Bot ini mengambil pesan pengguna, mencatatnya ke dalam rangkaian percakapan di Cloud Datastore, lalu "mengulangi" pesan pengguna dengan merespons menggunakan konten yang sama. Setelah memiliki bot dasar dan infrastruktur logging, Anda dapat menambahkan bot tersebut untuk membuat implementasi transfer agen live lengkap pada langkah-langkah berikutnya.

Mendapatkan kode awal

Di terminal, clone kode awal Live Agent Transfer ke direktori kerja project Anda dengan perintah berikut:

git clone https://github.com/google-business-communications/bm-nodejs-live-agent-transfer

Memahami kode awal

Mari kita lihat struktur kode awal yang akan Anda gunakan selama codelab ini.

Buka direktori step-1 dan lihat isinya. Isinya adalah elemen berikut:

• bin: Direktori ini berisi skrip starter www yang menyiapkan dan mengonfigurasi server.
• libs: Direktori ini berisi datastore_util.js, yang berisi metode praktis untuk membaca dan menulis dari Cloud Datastore. Anda tidak perlu memahami cara kerja file ini. Cukup catat metode yang tersedia dan fungsinya.
• resources: Berisi kunci akun layanan Anda sebagai file bernama credentials.json.
• routes: File index.js berisi webhook dan semua metode pembantunya. Ini adalah file utama yang akan Anda gunakan dan tambahkan.
• views: Direktori ini berisi file template EJS untuk elemen UI. Folder ini akan berisi lebih banyak file pada langkah selanjutnya.
• app.js, app.yaml, package.json: File ini mengonfigurasi aplikasi dan dependensinya.

Sebelum men-deploy, download kunci akun layanan GCP Anda dan salin file kredensial JSON ke setiap direktori resource dalam kode contoh. Lakukan ini untuk setiap langkah codelab.

cp credentials.json bm-nodejs-live-agent-transfer/step-<step number>/resources/credentials.json

Tips: Jika Anda memerlukan bantuan untuk menyiapkan atau mendownload kunci layanan, lihat panduan Google Cloud untuk mengelola akun layanan.

Men-deploy kode awal

Di terminal, buka direktori step-1 sampel. Kemudian, tetapkan alat gcloud untuk menggunakan project Google Cloud Anda, dengan menetapkan project ID yang Anda gunakan untuk mendaftar ke API.

gcloud config set project <PROJECT_ID>

Untuk men-deploy aplikasi, jalankan perintah berikut:

gcloud app deploy

Perhatikan URL aplikasi yang di-deploy dalam output perintah terakhir:

Deployed service [default] to [https://PROJECT_ID.appspot.com]

Kode awal yang baru saja Anda deploy berisi aplikasi web dengan webhook untuk menerima pesan dari Business Messages. Aplikasi mengulang pesan kembali kepada pengguna dan mencatat rangkaian pesan ke Cloud Datastore.

Konfigurasi agen Anda

Buka halaman setelan Akun Anda di Konsol Developer Business Communications dan tetapkan webhook ke URL aplikasi yang di-deploy. Misalnya, https://PROJECT_ID.appspot.com/callback/.

Tips: Jika Anda perlu mengingat kembali cara menyetel webhook. Lihat bagian Menetapkan webhook di panduan penyiapan Business Messages.

Kemudian, di halaman Informasi agen, konfigurasikan jenis interaksi utama dan sekunder Anda menjadi Bot dan Manusia.

Melakukan percakapan dengan bot gema

Buka agen Anda di Konsol Developer. Anda akan melihat halaman Ringkasan yang memungkinkan Anda meninjau detail agen. Salin URL pengujian agen yang cocok dengan perangkat pengujian seluler Anda. Gunakan URL ini di perangkat seluler Anda untuk meluncurkan platform percakapan agen Anda.

Berinteraksilah dengan agen dengan mengirim beberapa pesan. Platform percakapan hanya menyalin apa yang Anda katakan—bukan pengalaman pengguna yang sangat berguna. Andai saja ada cara untuk berbicara dengan orang sungguhan.

3. Bergabung dalam percakapan

Sekarang, mari kita lihat percakapan dari perspektif agen live Anda. Sebagai agen aktif, Anda perlu mengetahui beberapa hal tentang percakapan sebelum bergabung, seperti ID percakapan. Anda juga perlu mengetahui apakah pengguna telah meminta untuk berbicara dengan agen langsung. Pada langkah ini, Anda akan menggunakan halaman CRM (Customer Relationship Management) dasar untuk melihat informasi ini dan bergabung dalam percakapan sebagai agen aktif.

Kode awal untuk langkah ini menambahkan CRM dasar yang mencantumkan semua rangkaian percakapan yang sedang berlangsung untuk agen. Mari kita lihat CRM tersebut untuk melihat percakapan yang mungkin memerlukan perhatian agen langsung.

Buka direktori step-2 dan deploy aplikasi lagi seperti yang Anda lakukan di langkah sebelumnya.

Saat men-deploy aplikasi, Anda akan melihat URL target. Buka URL ini di browser untuk melihat listingan dengan rangkaian pesan percakapan yang Anda mulai di langkah sebelumnya. Status percakapan saat ini adalah "Dikelola bot" karena bot echo bertindak sebagai perwakilan agen kita dalam percakapan ini.

Tombol Gabung ke chat muncul, tetapi belum melakukan apa pun. Anda juga tidak dapat mengetahui dari antarmuka ini apakah pengguna ingin berbicara dengan agen langsung.

Business Messages menyediakan peristiwa permintaan agen aktif yang menunjukkan kapan pengguna ingin berbicara dengan agen aktif. Anda perlu melacak status tersebut untuk mencantumkannya di UI.

Lihat metode callback di index.js. Komentar TODO menunjukkan tempat Anda perlu mengambil permintaan pengguna untuk menghubungi agen langsung dan memperbarui status thread.

step-2/routes/index.js

/**
 * The webhook callback method.
 */
router.post('/callback', async function(req, res, next) {
  ...
    } else if (requestBody.userStatus !== undefined) {
      if (requestBody.userStatus.requestedLiveAgent !== undefined) {
  ...
        // TODO: Update the thread state to QUEUED_THREAD_STATE.
      }
    }
  });
...
});

Anda harus menggunakan metode di libs/datastore_utils.js untuk memuat rangkaian pesan saat ini dan memperbarui statusnya menjadi QUEUED_THREAD_STATE.

Jika Anda tidak yakin apa yang harus dilakukan, lihat solusinya. Kode awal mencakup direktori solutions di setiap langkah yang memerlukan penyelesaian beberapa kode. Direktori ini berisi salinan seluruh aplikasi dengan penerapan lengkap untuk langkah yang diberikan.

Setelah Anda menyelesaikan penerapan dan men-deploy ulang aplikasi, gunakan menu tambahan dalam percakapan di perangkat seluler Anda untuk meminta agen live.

Tips: Jika Anda tidak melihat "Kirim pesan ke agen live" sebagai opsi di menu tambahan, pastikan agen Anda telah mengonfigurasi jenis interaksi manusia di konsol Business Messages.

Sekarang, jika Anda kembali ke CRM, Anda akan melihat catatan di rangkaian percakapan yang bertuliskan "Agen live diminta". Pengguna ini memerlukan bantuan dari manusia. Anda perlu menerapkan endpoint joinConversation agar tombol berfungsi.

Temukan komentar TODO lainnya dalam metode stub untuk /joinConversation.

step-2/routes/index.js

/**
 * Updates the thread state and sends a representative join signal to the user.
 */
router.post('/joinConversation', async function(req, res, next) {
  let conversationId = req.body.conversationId;

  // TODO: Update the thread state to LIVE_AGENT_THREAD_STATE and post a REPRESENTATIVE_JOINED event.

  res.json({
    'result': 'ok',
  });
});

Anda perlu memperbarui status thread lagi, kali ini ke LIVE_AGENT_THREAD_STATE. Selain itu, Anda harus menggunakan metode conversations.events.create Business Messages API untuk memposting peristiwa REPRESENTATIVE_JOINED.

Untuk membuat payload permintaan, Anda harus menetapkan kolom yang diuraikan dalam tabel berikut:

Nama kolom	Petunjuk
parent	Tetapkan ini ke 'conversations/{conversationId}'.
eventId	Buat ID acak Anda sendiri untuk acara.
auth	Gunakan metode initCredentials yang disediakan.
resource	Ini adalah isi acara itu sendiri. Anda harus menetapkan eventType dan representative.

Lihat halaman referensi untuk metode create atau halaman referensi peristiwa untuk mendapatkan bantuan.

Setelah selesai menerapkan, deploy ulang aplikasi dan klik tombol Join chat. Dialog Bergabung dalam percakapan akan muncul, dan status chat akan berubah menjadi "Live chat". Jika melihat percakapan di perangkat seluler, Anda akan melihat catatan di chat bahwa agen live telah bergabung.

Selamat! Pada langkah berikutnya, kita akan melihat cara membuat agen aktif Anda berbicara dengan pengguna Anda.

4. Mengirim pesan sebagai agen langsung

Setelah bergabung dalam percakapan, saatnya mengirim beberapa pesan sebagai agen langsung.

Buka direktori step-3 dan deploy ulang aplikasi. Di CRM, klik rangkaian percakapan Anda dari langkah sebelumnya. Sekarang Anda akan melihat antarmuka chat dasar. Dari sini, Anda dapat melihat pesan pengguna secara real-time.

Namun, mengirim pesan sebagai agen masih belum diterapkan. Anda harus menyelesaikannya pada langkah ini.

Buka file routes/index.js dan lihat tiga endpoint yang baru ditambahkan:

• /messages: Mendapatkan file tampilan messages.ejs dan merendernya di browser. Saat Anda mengklik rangkaian pesan dari indeks, Anda akan diarahkan ke salah satu halaman ini.
• /retrieveMessages: Mendapatkan konten pesan dalam rangkaian pesan dan menampilkan daftar semua pesan dalam percakapan yang diformat. Halaman pesan memanggil endpoint ini secara berkala untuk menampilkan pesan terbaru.
• /sendMessage: Mengirim pesan dari perwakilan agen langsung kepada pengguna. Halaman pesan memanggil fungsi ini saat Anda mengklik Kirim. Saat ini tidak diterapkan.

Sekarang, lihat metode storeAndSendResponse yang ada:

step-3/routes/index.js

/**
 * Updates the thread, adds a new message and sends a response to the user.
 *
 * @param {string} message The message content that was received.
 * @param {string} conversationId The unique id for this user and agent.
 * @param {string} threadState Represents who is managing the conversation for the CRM.
 * @param {string} representativeType The representative sending the message, BOT or HUMAN.
 */
async function storeAndSendResponse(message, conversationId, threadState, representativeType) {
...
}

Webhook sudah menggunakan metode ini untuk mengirim respons dari bot echo. Metode ini pertama-tama menyimpan data pesan masuk dalam objek Cloud Datastore untuk percakapan. Kemudian, mengirimkan pesan respons. Perhatikan baik-baik objek pesan yang dibuatnya, terutama jenis representatifnya.

Sekarang, terapkan endpoint /sendMessage sendiri. Anda dapat menggunakan metode storeAndSendResponse yang ada di sini untuk melakukan sebagian besar pekerjaan. Yang penting adalah mengingat untuk menetapkan perwakilan yang benar.

Setelah Anda berhasil melakukannya, deploy ulang aplikasi, dan kembali ke percakapan Anda di CRM. Anda kini dapat melihat pesan Anda muncul di histori chat. Anda juga dapat melihat pesan agen muncul di perangkat pengujian seluler Anda.

Sebelum melanjutkan, pastikan Anda memahami cara kerja endpoint baru. Pada langkah berikutnya, Anda akan menambahkan endpoint Anda sendiri untuk keluar dari percakapan.

5. Keluar dari percakapan

Setelah membantu pengguna menjawab pertanyaannya, Anda dapat keluar dari percakapan dan membiarkan pengguna berbicara dengan bot lagi. Di Business Messages, perubahan ini ditandai dengan peristiwa REPRESENTATIVE_LEFT.

Buka direktori step-4, deploy ulang aplikasi, dan kembali ke rangkaian percakapan Anda. Sekarang ada link Tutup dan keluar dari percakapan di bagian bawah rangkaian pesan. Link ini belum berfungsi karena endpoint leaveConversation belum diterapkan.

Lihat file index.js. Ada komentar TODO yang menginstruksikan Anda untuk membuat endpoint leaveConversation baru.

step-4/routes/index.js

/* 
 * TODO: Create a '/leaveConversation' endpoint that does the following:
 * - Updates the thread to BOT_THREAD_STATE.
 * - Sends a REPRESENTATIVE_LEFT event.
 * - Sends a message to the thread informing the user that they are speaking to the echo bot again.
 * 
 * Hint: You can use the same methods that '/joinConversation' uses.
 */

Untuk menerapkannya, Anda harus menggabungkan semua yang telah Anda pelajari dari codelab ini. Endpoint ini harus melakukan hal berikut:

• Perbarui thread ke BOT_THREAD_STATE.
• Kirim peristiwa REPRESENTATIVE_LEFT.
• Kirim pesan dalam percakapan untuk memberi tahu pengguna bahwa mereka sedang berbicara dengan bot echo. Gunakan metode storeAndSendResponse. Ingat bahwa perwakilan telah berubah kembali menjadi BOT.

Langkah terakhir menjelaskan status percakapan kepada pengguna. Pengguna melihat peristiwa saat perwakilan keluar dari chat, tetapi mereka tidak akan tahu bahwa mereka sedang berbicara dengan bot echo lagi. Dengan mengirim pesan langsung dari bot, Anda dapat mengurangi kebingungan pengguna dan meningkatkan pengalaman.

Sekarang setelah bot menangani semuanya, agen live Anda dapat bergabung ke percakapan lain. Coba mainkan kode contoh dan CRM sesering yang Anda inginkan. Uji beberapa ide berbeda yang Anda miliki untuk pengalaman pengalihan agen live bisnis Anda, dan lihat hasilnya.

6. Menyelesaikan

Selamat, Anda telah menyelesaikan codelab transfer agen aktif.

Anda telah membuat agen yang dapat menangani transfer agen langsung dari awal hingga akhir. Anda juga telah mempelajari salah satu cara untuk melacak status percakapan dengan Cloud Datastore.

Dengan pengalihan agen langsung, Anda dapat menyerahkan permintaan umum kepada bot, sementara agen langsung menangani pertanyaan yang lebih rumit. Pengguna Anda akan lebih puas dengan pengalaman baru yang disesuaikan dan bermanfaat, sehingga meningkatkan kemungkinan mereka kembali dan merekomendasikan bisnis Anda kepada teman-teman.

Apa selanjutnya?

Lihat beberapa codelab ini:

• Beli online ambil di toko bagian 1
• Beli online ambil di toko bagian 2

Bacaan lebih lanjut

• Tinjau dasar-dasar pengalihan agen langsung dengan Panduan pengalihan dari bot ke agen langsung.
• Upgrade bot echo Anda menjadi bot FAQ dengan panduan Dialogflow.

Dokumen referensi

• Metode: conversations.events.create
• Metode: conversations.messages.create
• Resource: Event
• Perwakilan