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 beralih di tengah percakapan ke agen langsung (perwakilan manusia). Bot Anda dapat menangani pertanyaan umum, seperti jam buka, sementara agen langsung Anda 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 yang lebih tinggi dan kepuasan pelanggan.

Codelab ini mengajarkan cara memanfaatkan fitur transfer agen langsung.

Yang akan Anda bangun

Dalam codelab ini, Anda akan membangun 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 bangun.

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 acara 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 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 menyiapkannya. Anda tidak perlu mengetahui cara menggunakan Cloud Datastore.
• Komputer yang dilengkapi 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 dalam pemrograman aplikasi web. Anda akan menulis sejumlah kecil kode JavaScript dan mungkin perlu men-debug apa 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 rangkaian pesan percakapan di Cloud Datastore, lalu melakukan "echo" pesan pengguna dengan membalas dengan isi yang sama. Setelah memiliki infrastruktur logging dan bot dasar, Anda dapat menambahkannya untuk membuat implementasi transfer agen langsung secara lengkap di langkah berikutnya.

Mendapatkan kode awal

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

Buka direktori step-1 dan lihat kontennya. 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. Catat saja metode yang tersedia dan fungsinya.
• resources: File ini berisi kunci akun layanan Anda sebagai file bernama credentials.json.
• routes: File index.js berisi webhook dan semua metode bantuannya. Ini adalah file utama yang akan Anda gunakan dan tambahkan.
• views: Direktori ini berisi file template EJS untuk elemen UI. Tindakan ini akan berisi lebih banyak file pada langkah-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 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 contoh. Kemudian, setel 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 melakukan echo pesan kembali ke pengguna dan mencatat thread pesan ke Cloud Datastore.

Konfigurasi agen Anda

Buka halaman Setelan akun di Konsol Developer Komunikasi Bisnis dan setel webhook Anda ke URL aplikasi yang diterapkan. Misalnya, https://PROJECT_ID.appspot.com/callback/.

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

Kemudian, di halaman informasi Agen Anda, konfigurasikan jenis interaksi utama dan sekunder menjadi Bot dan Manusia.

Melakukan percakapan dengan bot echo

Buka agen Anda di Konsol Play. 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 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. Seandainya ada cara untuk berbicara dengan orang sungguhan!

3. Bergabung dalam percakapan

Sekarang, mari kita 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 akan sangat membantu. Pada langkah ini, Anda akan menggunakan halaman CRM (Pengelolaan Hubungan Pelanggan) dasar untuk melihat informasi ini dan bergabung dalam percakapan sebagai agen langsung.

Kode awal untuk langkah ini menambahkan CRM dasar yang mencantumkan semua thread 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 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 pada langkah sebelumnya. Status untuk percakapan saat ini "Dikelola bot" karena {i>echo bot<i} bertindak sebagai perwakilan untuk 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 yang diminta 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 harus 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, lihat solusinya. Kode awal menyertakan direktori solutions di bawah setiap langkah yang Anda gunakan untuk menyelesaikan beberapa kode. Direktori ini berisi salinan seluruh aplikasi dengan implementasi lengkap untuk langkah yang diberikan.

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

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

Sekarang, jika kembali ke CRM, Anda akan melihat catatan di rangkaian percakapan yang bertuliskan "Permintaan agen langsung". Pengguna ini butuh bantuan manusia! Anda harus mengimplementasikan endpoint joinConversation agar tombol berfungsi.

Temukan komentar TODO lainnya dalam metode yang dipotong 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 perlu menggunakan metode conversations.events.create Business Messages API untuk memposting peristiwa REPRESENTATIVE_JOINED.

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

Nama kolom	Petunjuk
parent	Tetapkan string 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 representatif.

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

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

Selamat! Pada langkah berikutnya, kita akan melihat cara membuat agen langsung dapat menghubungi pengguna.

4. Mengirim pesan sebagai agen langsung

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

Buka direktori step-3 dan deploy ulang aplikasi. Di CRM, klik rangkaian percakapan 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 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 memanggil endpoint ini secara berkala untuk menampilkan pesan terbaru.
• /sendMessage: Mengirim pesan dari perwakilan agen langsung kepada pengguna. Halaman pesan memanggilnya saat Anda mengklik Kirim. Saat ini, implementasi 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. Pertama-tama, metode ini menyimpan data pesan masuk di objek Cloud Datastore untuk percakapan. Kemudian, ia mengirimkan pesan respons. Perhatikan dengan cermat objek pesan yang dibuatnya, terutama pada jenis representatif.

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

Setelah cara 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 baru. Pada langkah berikutnya, Anda akan menambahkan endpoint Anda sendiri untuk keluar dari percakapan.

5. Keluar dari percakapan

Setelah membantu pengguna dengan pertanyaan mereka, Anda dapat meninggalkan percakapan dan membiarkan pengguna berbicara dengan bot lagi. Pada 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 tinggalkan 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 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 mengumpulkan semua yang telah Anda pelajari dari codelab sejauh ini. Endpoint ini harus melakukan hal berikut:

• Perbarui thread ke BOT_THREAD_STATE.
• Mengirim 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 suatu peristiwa saat perwakilan keluar dari chat, tetapi mereka tidak tahu bahwa mereka berbicara dengan bot echo lagi. Dengan mengirim pesan langsung dari bot, Anda akan mengurangi kebingungan pengguna dan meningkatkan kualitas penggunaannya.

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

6. Menyelesaikan

Selamat, Anda telah menyelesaikan codelab transfer agen langsung.

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 transfer agen langsung, Anda dapat menyerahkan permintaan umum kepada bot, sementara agen langsung Anda menangani pertanyaan yang lebih kompleks. Pengguna Anda 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 ambil di toko bagian 1
• Beli online ambil 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: conversation.events.create
• Metode: conversation.messages.create
• Referensi: Peristiwa
• Representatif