Transfer Agen Langsung

1. Pengantar

Terakhir Diperbarui: 23-08-2021

Transfer agen langsung dengan Business Messages

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

Codelab ini mengajarkan cara memanfaatkan fitur transfer agen langsung sepenuhnya.

Yang akan Anda bangun

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

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 transfer agen langsung.
• Cara menyiapkan webhook dan UI dasar untuk bergabung ke percakapan sebagai agen.
• Praktik terbaik untuk menggunakan Business Messages API.

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

Yang akan 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 menyiapkannya. Anda tidak perlu mengetahui cara menggunakan Cloud Datastore.
• Komputer yang menginstal Google Cloud SDK dan Node.js (versi 10 atau yang lebih baru).
• Perangkat Android (dengan versi 5 atau yang lebih baru) atau perangkat iOS untuk menguji pengalaman pengguna.
• Pengalaman dengan pemrograman aplikasi web. Anda akan menulis sedikit kode JavaScript dan mungkin perlu men-debug 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 thread percakapan di Cloud Datastore, lalu "menggemakan" pesan pengguna dengan merespons menggunakan konten yang sama. Setelah memiliki bot dasar dan infrastruktur logging, Anda dapat menambahkannya untuk membuat implementasi transfer agen langsung secara lengkap di langkah selanjutnya.

Mendapatkan kode awal

Di terminal, clone kode awal Transfer Agen Live ke direktori kerja project 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 di seluruh codelab.

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

• bin: Direktori ini berisi skrip awal 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: File ini berisi kunci akun layanan Anda sebagai file yang disebut credentials.json.
• routes: File index.js berisi webhook dan semua metode helpernya. Ini adalah file utama yang akan Anda kerjakan dan tambahkan.
• views: Direktori ini berisi file template EJS untuk elemen UI. Folder tersebut akan berisi lebih banyak file di langkah berikutnya.
• app.js, app.yaml, package.json: File ini mengonfigurasi aplikasi dan dependensinya.

Sebelum melakukan deployment, download kunci akun layanan GCP Anda dan salin file kredensial JSON ke setiap direktori resource dalam kode contoh. Lakukan hal ini di 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 digunakan 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 melakukan echo pesan kembali ke pengguna dan mencatat thread pesan ke Cloud Datastore.

Konfigurasi agen Anda

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

Tips: Jika Anda butuh pengingat tentang cara menyiapkan webhook. Lihat bagian Menetapkan webhook di panduan penyiapan Business Messages.

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

Melakukan percakapan dengan bot echo

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

Berinteraksilah dengan agen dengan mengirim beberapa pesan. Platform percakapan hanya menyalin ucapan Anda, dan ini bukan pengalaman pengguna yang sangat berguna. Seandainya ada cara untuk berbicara dengan orang sungguhan!

3. Bergabung dalam percakapan

Sekarang mari lihat percakapan dari sudut pandang agen langsung Anda. Sebagai agen langsung, Anda perlu mengetahui beberapa hal tentang percakapan sebelum bergabung, seperti ID percakapan. Mengetahui apakah pengguna telah meminta untuk berbicara dengan agen langsung juga dapat membantu. Pada langkah ini, Anda akan menggunakan halaman CRM (Pengelolaan Hubungan Pelanggan) dasar untuk melihat informasi ini dan bergabung ke percakapan sebagai agen langsung.

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

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

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

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

Business Messages menyediakan peristiwa yang diminta oleh agen langsung yang menunjukkan kapan pengguna ingin berbicara dengan agen langsung. Anda harus melacak status tersebut untuk mencantumkannya di UI.

Lihat metode callback di index.js. Komentar TODO menunjukkan tempat Anda perlu menangkap permintaan pengguna untuk agen langsung dan memperbarui status rangkaian pesan.

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 perlu menggunakan metode di libs/datastore_utils.js untuk memuat rangkaian percakapan saat ini dan memperbarui statusnya menjadi QUEUED_THREAD_STATE.

Jika Anda tidak yakin apa yang harus dilakukan, lihatlah solusinya. Kode awal menyertakan direktori solutions di setiap langkah saat Anda perlu menyelesaikan beberapa kode. Direktori ini berisi salinan seluruh aplikasi dengan implementasi lengkap untuk langkah yang ditentukan.

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

Tips: Jika Anda tidak melihat opsi "Kirim pesan ke agen langsung" sebagai opsi di menu tambahan, pastikan agen Anda memiliki jenis interaksi manusia yang dikonfigurasi di konsol Business Messages.

Sekarang, jika kembali ke CRM, Anda akan melihat catatan di rangkaian percakapan yang bertuliskan "Live agent diminta". Pengguna ini membutuhkan bantuan dari manusia! Anda harus mengimplementasikan endpoint joinConversation agar tombol berfungsi.

Temukan komentar TODO lainnya dalam metode yang diberi 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 menjadi LIVE_AGENT_THREAD_STATE. Selain itu, Anda perlu menggunakan metode conversations.events.create Business Messages API untuk memposting peristiwa REPRESENTATIVE_JOINED.

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

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

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

Setelah selesai dengan penerapan, deploy ulang aplikasi, lalu klik tombol Gabung ke chat. Dialog Percakapan yang bergabung akan muncul, dan status chat akan berubah menjadi "Live chat". Jika Anda melihat percakapan di perangkat seluler, Anda akan melihat catatan di chat bahwa agen langsung Anda telah bergabung.

Selamat! Pada langkah berikutnya, kita akan mempelajari cara agar agen langsung berbicara dengan pengguna.

4. Berkirim pesan sebagai agen langsung

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

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

Namun, mengirim pesan karena 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 mengklik rangkaian percakapan dari indeks, Anda akan membuka salah satu halaman ini.
• /retrieveMessages: Mendapatkan konten pesan dari rangkaian pesan dan menampilkan daftar berformat dari semua pesan dalam percakapan. Halaman pesan secara berkala memanggil endpoint ini untuk menampilkan pesan terbaru.
• /sendMessage: Mengirim pesan dari perwakilan agen langsung kepada pengguna. Halaman pesan memanggilnya saat Anda mengklik Kirim. Saat ini, tindakan tersebut 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 terlebih dahulu menyimpan data pesan masuk di objek Cloud Datastore untuk percakapan. Kemudian, server akan mengirimkan pesan respons. Amati lebih dekat objek pesan yang dibuatnya, terutama pada jenis representatif.

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

Setelah ini berfungsi, deploy ulang aplikasi, lalu kembali ke percakapan Anda di CRM. Sekarang Anda dapat melihat pesan muncul di histori chat. Anda juga dapat melihat pesan agen muncul di perangkat pengujian seluler.

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

5. Keluar dari percakapan

Setelah membantu pengguna dengan pertanyaannya, Anda mungkin ingin meninggalkan percakapan dan membiarkan pengguna berbicara lagi dengan bot. Di Business Messages, perubahan ini ditandai oleh peristiwa REPRESENTATIVE_LEFT.

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

Lihat file index.js. Ada komentar TODO yang meminta Anda 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 menerapkan ini, Anda harus menggabungkan semua yang telah Anda pelajari dari codelab sejauh ini. Endpoint ini akan melakukan hal berikut:

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

Langkah terakhir menjelaskan status percakapan untuk pengguna. Pengguna melihat peristiwa saat perwakilan keluar dari chat, tetapi mereka belum tentu mengetahui bahwa mereka berbicara dengan bot echo lagi. Dengan mengirim pesan langsung dari bot, Anda dapat mengurangi kebingungan pengguna dan meningkatkan kualitas pengalaman pengguna.

Setelah bot menangani berbagai hal, agen langsung Anda dapat bergabung ke percakapan lain. Cobalah bermain dengan kode contoh dan CRM sebanyak yang Anda inginkan. Uji beberapa ide berbeda yang Anda miliki untuk pengalaman transfer agen langsung bisnis Anda, dan lihat apa yang Anda dapatkan.

6. Menyelesaikan

Selamat, Anda telah menyelesaikan codelab transfer agen langsung.

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

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

Apa selanjutnya?

Lihat beberapa codelab ini:

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

Bacaan lebih lanjut

• Tinjau dasar-dasar transfer agen langsung dengan panduan Handoff dari bot ke agen langsung.
• Upgrade bot echo Anda ke bot FAQ dengan panduan Dialogflow.

Dokumen referensi

• Metode: conversations.events.create
• Metode: conversation.messages.create
• Referensi: Acara
• Representasi