Transfer Agen Langsung

1. Pengantar

Terakhir Diperbarui: 23-08-2021

Transfer ke agen langsung dengan Business Messages

Fitur pengalihan ke agen langsung Business Messages memungkinkan agen Anda memulai percakapan sebagai bot dan beralih ke agen langsung (perwakilan manusia) di tengah percakapan. 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 kunjungan kembali yang lebih tinggi dan peningkatan kepuasan pelanggan.

Codelab ini mengajarkan cara memanfaatkan fitur transfer ke agen langsung secara maksimal.

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 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 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 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 telah 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 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 rangkaian pesan percakapan di Cloud Datastore, lalu "mengulangi" pesan pengguna dengan merespons dengan konten yang sama. Setelah memiliki infrastruktur logging dan bot dasar, Anda dapat menambahkannya untuk membuat implementasi transfer agen live lengkap di langkah-langkah berikutnya.

Mendapatkan kode awal

Di terminal, clone kode awal Live Agent Transfer 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 selama codelab.

Buka direktori step-1 dan lihat kontennya. Isinya adalah 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 ke dan menulis dari Cloud Datastore. Anda tidak perlu memahami cara kerja file ini. Cukup catat metode yang tersedia dan fungsinya.
• resources: Ini berisi kunci akun layanan Anda sebagai file yang disebut credentials.json.
• routes: File index.js berisi webhook dan semua metode helper-nya. Ini adalah file utama yang akan Anda gunakan dan tambahkan.
• views: Direktori ini berisi file template EJS untuk elemen UI. File ini akan berisi lebih banyak file di 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 akan merespons pesan kembali kepada pengguna dan mencatat rangkaian pesan ke Cloud Datastore.

Konfigurasi agen Anda

Buka halaman Setelan akun 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 mengulang materi tentang cara menyiapkan webhook. Lihat Menetapkan bagian 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 Developer Console. 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. 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 live, Anda perlu mengetahui beberapa hal tentang percakapan sebelum bergabung, seperti ID percakapan. Sebaiknya ketahui juga apakah pengguna telah meminta untuk berbicara dengan agen langsung. 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 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 untuk percakapan saat ini "Dikelola bot" karena bot echo bertindak sebagai perwakilan untuk agen kami 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 langsung yang menunjukkan kapan pengguna ingin berbicara dengan agen langsung. Anda perlu 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 pesan 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 setiap langkah tempat Anda perlu menyelesaikan beberapa kode. Direktori ini berisi salinan seluruh aplikasi dengan implementasi lengkap untuk langkah tertentu.

Setelah menyelesaikan penerapan 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 dikonfigurasi di konsol Business Messages.

Sekarang, jika Anda kembali ke CRM, Anda akan melihat catatan di rangkaian pesan yang bertuliskan "Agen live diminta". Pengguna ini memerlukan bantuan dari manusia. Anda harus 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 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 representative.

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

Setelah selesai menerapkan, deploy ulang aplikasi dan klik tombol Join chat. Dialog Gabung ke 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 live chat berbicara dengan pengguna.

4. Mengirim pesan sebagai agen langsung

Setelah bergabung ke percakapan, saatnya mengirim beberapa pesan sebagai agen live.

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

Namun, pengiriman pesan sebagai agen masih belum diterapkan. Anda harus menyelesaikannya di 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 pesan percakapan dari indeks, Anda akan diarahkan ke salah satu halaman ini.
• /retrieveMessages: Mendapatkan konten pesan 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 belum 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 di objek Cloud Datastore untuk percakapan. Kemudian, pesan respons akan dikirim. Perhatikan dengan cermat objek pesan yang dibuatnya, terutama pada jenis perwakilan.

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

Setelah berhasil, deploy ulang aplikasi, lalu kembali ke percakapan Anda di CRM. Sekarang Anda dapat melihat pesan Anda 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 menjawab pertanyaannya, Anda dapat keluar dari percakapan dan membiarkan pengguna berbicara dengan bot lagi. Di Business Messages, perubahan ini ditandai oleh peristiwa REPRESENTATIVE_LEFT.

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

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 menerapkannya, Anda perlu menggabungkan semua yang telah Anda pelajari dari codelab sejauh ini. Endpoint ini harus melakukan hal berikut:

• Perbarui rangkaian pesan 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 untuk pengguna. Pengguna akan 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 mengurangi kebingungan pengguna dan meningkatkan pengalaman mereka.

Setelah bot menangani masalah, agen live 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 pengalihan ke agen langsung bisnis Anda, dan lihat hasilnya.

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 satu cara untuk melacak status percakapan dengan Cloud Datastore.

Dengan pengalihan ke agen langsung, Anda dapat menyerahkan permintaan umum kepada bot, sementara agen langsung 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 ambil di toko bagian 1
• Beli online ambil di toko bagian 2

Bacaan lebih lanjut

• Tinjau dasar-dasar transfer ke 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
• Referensi: Peristiwa
• Representatif