Canlı Müşteri Temsilcisi Aktarımı

1. Giriş

Son Güncelleme: 23.08.2021

Business Messages ile canlı müşteri temsilcisine aktarma

Business Messages'ın canlı müşteri temsilcisine aktarma özelliği, temsilcinizin bir sohbeti bot olarak başlatmasına ve sohbet sırasında canlı müşteri temsilcisine (insan temsilci) geçmesine olanak tanır. Botunuz, çalışma saatleri gibi sık sorulan soruları yanıtlayabilir. Canlı müşteri temsilciniz ise kullanıcının bağlamına daha fazla erişerek özelleştirilmiş bir deneyim sunabilir. Bu iki deneyim arasında sorunsuz bir geçiş olduğunda kullanıcıların soruları hızlı ve doğru bir şekilde yanıtlanır. Bu da geri dönüş etkileşim oranının artmasına ve müşteri memnuniyetinin yükselmesine neden olur.

Bu codelab'de, canlı müşteri temsilcisi aktarma özelliğinden nasıl en iyi şekilde yararlanacağınız açıklanmaktadır.

Oluşturacağınız uygulama

Bu codelab'de, canlı müşteri temsilcisi aktarma etkinliklerini gönderip alabilecek bir webhook oluşturacaksınız. Oluşturduğunuz uygulamayı test etmek için başlangıç kodu tarafından sağlanan temel bir kullanıcı arayüzü kullanırsınız.

Not: Bu kod laboratuvarının amacı, iş ortağı olarak kaydolduğunuzu ve destek ekibimizden onay aldığınızı varsayar. Henüz yapmadıysanız bu kod laboratuvarını başlatmadan önce Business Messages'a kaydolun ve onayı bekleyin.

Neler öğreneceksiniz?

• İleti dizisi durumunu depolama ve yönetme
• Canlı temsilci aktarma etkinliklerini göndermek için Business Messages'ı kullanma.
• Temsilci olarak sohbetlere katılmak için webhook ve temel kullanıcı arayüzü oluşturma.
• Business Messages API'yi kullanmayla ilgili en iyi uygulamalar.

Bu codelab, canlı temsilci aktarımını uygulamak için Business Messages API'yi kullanmaya odaklanmaktadır. Her aşamanın başlangıç kodunu okuyabilirsiniz ancak yalnızca Business Messages ile ilgili kodu uygulamanız gerekir.

Gerekenler

• Hizmet hesabı anahtarınız da dahil olmak üzere bir Business Messages temsilcisi. Temsilci oluşturma kılavuzundaki adımları uygulayarak temsilci oluşturabilirsiniz.
• Temsilcinizin GCP projesine bağlı çalışan bir Cloud Datastore yapılandırması. Bu ayarı yapmak için Cloud Datastore hızlı başlangıç kılavuzunu kullanabilirsiniz. Cloud Datastore'u nasıl kullanacağınızı bilmeniz gerekmez.
• Google Cloud SDK ve Node.js (10 veya üzeri sürüm) yüklü bir bilgisayar.
• Kullanıcı deneyimini test etmek için Android cihaz (5 veya sonraki bir sürüm) ya da iOS cihaz.
• Web uygulaması programlama konusunda deneyim Az miktarda JavaScript kodu yazacaksınız ve yazdığınız kodda hata ayıklama yapmanız gerekebilir.

2. Yankı botu oluşturma

Bu adımda, "Echo bot" adlı temel bir bot temsilcisi dağıtacaksınız. Bu bot, kullanıcı mesajlarını alır, Cloud Datastore'taki bir ileti dizisine kaydeder ve ardından aynı içeriği kullanarak kullanıcının mesajını"yansıtır". Temel bir bot ve günlük kaydı altyapınız olduğunda, sonraki adımlarda canlı müşteri temsilcisi aktarımı için tam bir uygulama oluşturmak üzere bu altyapıya ekleme yapabilirsiniz.

Başlangıç kodunu alma

Terminalde, aşağıdaki komutu kullanarak canlı müşteri temsilcisi aktarma başlangıç kodunu projenizin çalışma dizinine klonlayın:

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

Başlangıç kodunu anlama

Kod laboratuvarı boyunca kullanacağınız başlangıç kod yapısına göz atalım.

step-1 dizinine gidin ve içeriğini görüntüleyin. Dosyada aşağıdaki öğeler bulunur:

• bin: Bu dizin, sunucuyu ayarlayan ve yapılandıran www başlangıç komut dosyasını içerir.
• libs: Bu dizinde, Cloud Datastore'a okuma ve yazma için kolaylık yöntemleri içeren datastore_util.js bulunur. Bu dosyanın işleyiş şeklini anlamanız gerekmez. Kullanılabilir yöntemleri ve bunların ne işe yaradığını not edin.
• resources: Bu bölümde, hizmet hesabı anahtarınız credentials.json adlı bir dosya olarak bulunur.
• routes: index.js dosyası, webhook'ı ve tüm yardımcı yöntemlerini içerir. Bu, üzerinde çalışacağınız ve ekleme yapacağınız ana dosyadır.
• views: Bu dizin, kullanıcı arayüzü öğelerine ait EJS şablon dosyalarını içerir. Sonraki adımlarda daha fazla dosya eklenir.
• app.js, app.yaml, package.json: Bu dosyalar, uygulamayı ve bağımlılıkları yapılandırır.

Dağıtmadan önce GCP hizmet hesabı anahtarınızı indirin ve JSON kimlik bilgileri dosyasını örnek koddaki her bir kaynak dizinine kopyalayın. Bu işlemi kod laboratuvarının her adımı için yapın.

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

İpucu: Hizmet anahtarınızı ayarlama veya indirme konusunda yardıma ihtiyacınız varsa hizmet hesaplarını yönetmeyle ilgili Google Cloud kılavuzuna göz atın.

Başlangıç kodunu dağıtma

Terminalde, örneğin step-1 dizinine gidin. Ardından, API'lere kaydolmak için kullandığınız proje kimliğini ayarlayarak gcloud aracını Google Cloud projenizi kullanacak şekilde ayarlayın.

gcloud config set project <PROJECT_ID>

Uygulamayı dağıtmak için aşağıdaki komutu çalıştırın:

gcloud app deploy

Son komutun çıktısında dağıtılan uygulamanın URL'sini not edin:

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

Yeni dağıttığınız başlangıç kodu, Business Messages'dan mesaj almak için webhook içeren bir web uygulaması içerir. Uygulama, mesajları kullanıcıya geri yansıtır ve mesaj ileti dizilerini Cloud Datastore'a kaydeder.

Aracınızı yapılandırın

Business Communications Developer Console'daki Hesap ayarları sayfanıza gidin ve webhook'unuzu dağıtılan uygulamanızın URL'sine ayarlayın. Örneğin, https://PROJECT_ID.appspot.com/callback/.

İpucu: Webhook'ınızı ayarlamayla ilgili bilgi edinmek istiyorsanız Business Messages kurulum kılavuzundaki Webhook'ınızı ayarlama bölümüne bakın.

Ardından, müşteri temsilcisi bilgileri sayfanızda birincil ve ikincil etkileşim türlerinizi sırasıyla Bot ve Gerçek kişi olarak yapılandırın.

Echo bot ile sohbet etme

Geliştirici Konsolu'nda temsilcinizi açın. Temsilcinizi ayrıntılarıyla incelemenizi sağlayan Genel bakış sayfasını görürsünüz. Mobil test cihazınızla eşleşen temsilci test URL'sini kopyalayın. Temsilcinizin sohbet yüzeyini başlatmak için mobil cihazınızda bu URL'yi kullanın.

Birkaç mesaj göndererek temsilciyle etkileşime geçin. Sohbet yüzeyi yalnızca söylediklerinizi kopyalar. Bu da çok faydalı bir kullanıcı deneyimi değildir. Gerçek bir kişiyle konuşmanın bir yolu olsaydı!

3. Sohbete katılma

Şimdi de sohbete canlı müşteri temsilcinizin açısından bakalım. Canlı destek temsilcisi olarak sohbete katılmadan önce sohbet kimliği gibi bazı bilgileri bilmeniz gerekir. Kullanıcının canlı bir temsilciyle konuşma isteyip istemediğini de bilmek faydalıdır. Bu adımda, bu bilgileri görüntülemek ve sohbete canlı temsilci olarak katılmak için temel bir CRM (Müşteri İlişkileri Yönetimi) sayfası kullanırsınız.

Bu adımdaki başlangıç kodu, müşteri temsilcisi için devam eden tüm sohbet ileti dizilerini listeleyen temel bir CRM ekler. Hangi sohbetlerin canlı müşteri temsilcisi tarafından ele alınması gerektiğini görmek için CRM'ye göz atalım.

step-2 dizinine gidin ve önceki adımda yaptığınız gibi uygulamayı tekrar dağıtın.

Uygulamayı dağıttığınızda bir hedef URL görürsünüz. Önceki adımda başlattığınız ileti dizisini içeren bir listeyi görmek için tarayıcıda bu URL'ye gidin. Echo bot bu görüşmede temsilcimiz olarak hareket ettiği için görüşmenin durumu şu anda "Bot tarafından yönetiliyor"dur.

Sohbete katıl düğmesi görünür ancak henüz herhangi bir işlem yapmaz. Ayrıca bu arayüzden kullanıcının canlı müşteri temsilcisiyle konuşmak isteyip istemediğini de anlayamazsınız.

Business Messages, kullanıcının canlı temsilciyle ne zaman konuşmak istediğini belirten bir canlı temsilci istenen etkinliği sağlar. Kullanıcı arayüzünde listelemek için bu durumu takip etmeniz gerekir.

index.js adresindeki geri çağırma yöntemine göz atın. TODO yorumu, kullanıcının canlı müşteri temsilcisi isteğini yakalamanız ve ileti dizisi durumunu güncellemeniz gereken yeri gösterir.

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.
      }
    }
  });
...
});

Mevcut ileti dizisi mesajlarını yüklemek ve durumunu QUEUED_THREAD_STATE olarak güncellemek için libs/datastore_utils.js içindeki yöntemleri kullanmanız gerekir.

Ne yapmanız gerektiğinden emin değilseniz çözümlere göz atın. Başlangıç kodu, bazı kodları tamamlamanız gereken her adımın altında bir solutions dizini içerir. Bu dizinler, uygulamanın tamamının bir kopyasını ve belirli bir adımın tam olarak uygulanmasını içerir.

Uygulamanızı dağıtmayı tamamlayıp yeniden dağıttıktan sonra, mobil cihazınızdaki sohbetteki üç nokta menüsünü kullanarak canlı temsilci isteğinde bulunabilirsiniz.

İpucu: Aşırı dolgu menünüzde "Canlı temsilciye mesaj gönder" seçeneğini görmüyorsanız temsilcinizin Business Messages konsolunda bir gerçek kişi etkileşimi türü yapılandırıldığından emin olun.

Şimdi CRM'ye geri döndüğünüzde sohbet ileti dizisinde "Canlı temsilci istendi" yazan bir not görürsünüz. Bu kullanıcının bir uzmandan yardım alması gerekiyor. Düğmenin çalışması için joinConversation uç noktasını uygulamanız gerekir.

/joinConversation için oluşturulan yöntemde diğer TODO yorumunu bulun.

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',
  });
});

İleti dizisi durumunu bu kez LIVE_AGENT_THREAD_STATE olarak tekrar güncellemeniz gerekir. Ayrıca, REPRESENTATIVE_JOINED etkinliği yayınlamak için Business Messages API'nin conversations.events.create yöntemini kullanmanız gerekir.

İstek yükü oluşturmak için aşağıdaki tabloda belirtilen alanları ayarlamanız gerekir:

Alan adı	İpucu
parent	Bu değeri "conversations/{conversationId}" olarak ayarlayın.
eventId	Etkinlik için kendi rastgele kimliğinizi oluşturun.
auth	Sağlanan initCredentials yöntemini kullanın.
resource	Bu, etkinliğin kendisidir. eventType ve temsilciyi ayarlamanız gerekir.

Yardım için create yönteminin referans sayfasına veya etkinlikler referans sayfasına göz atın.

Uygulamayı dağıtmayı tamamladığınızda uygulamayı yeniden dağıtın ve Sohbete katıl düğmesini tıklayın. Görüşmeye katıldı iletişim kutusu görüntülenir ve sohbet durumu "Canlı sohbet" olarak değişir. Mobil cihazınızda görüşmeye bakarsanız canlı müşteri temsilcinizin sohbete katıldığını belirten bir not görürsünüz.

Tebrikler! Sonraki adımda, canlı temsilcinizin kullanıcınızla nasıl konuşacağını inceleyeceğiz.

4. Canlı müşteri temsilcisi olarak mesajlaşma

Sohbete katıldınız. Şimdi canlı müşteri temsilcisi olarak mesaj gönderme zamanı.

step-3 dizinine gidin ve uygulamayı yeniden dağıtın. CRM'de, önceki adımdaki ileti dizisinizi tıklayın. Temel bir sohbet arayüzü göreceksiniz. Buradan kullanıcının mesajlarını gerçek zamanlı olarak görebilirsiniz.

Ancak müşteri temsilcisi olarak mesaj gönderme özelliği henüz kullanıma sunulmamıştır. Bu adımı tamamlamanız gerekir.

routes/index.js dosyasını açıp yeni eklenen üç uç noktaya bakın:

• /messages: messages.ejs görüntüleme dosyasını alır ve tarayıcıda oluşturur. Dizinden bir ileti dizisi tıkladığınızda bu sayfalardan birine yönlendirilirsiniz.
• /retrieveMessages: Bir ileti dizisinin mesaj içeriklerini alır ve görüşmedeki tüm mesajların biçimlendirilmiş bir listesini döndürür. Mesajlar sayfası, en son mesajları görüntülemek için bu uç noktayı düzenli olarak çağırır.
• /sendMessage: Canlı müşteri temsilcisinden kullanıcıya mesaj gönderir. Mesajlar sayfası, Gönder'i tıkladığınızda bu işlevi çağırır. Şu anda uygulanmıyor.

Şimdi mevcut storeAndSendResponse yöntemine göz atın:

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, echo bot'tan yanıt göndermek için zaten bu yöntemi kullanır. Yöntem, gelen mesaj verilerini önce ileti dizisinin Cloud Datastore nesnesinde depolar. Ardından yanıt mesajını gönderir. Oluşturduğu ileti nesnesine, özellikle de temsilci türüne yakından bakın.

Şimdi /sendMessage uç noktasını kendiniz uygulayın. İşin çoğunu yapmak için buradaki mevcut storeAndSendResponse yöntemini kullanabilirsiniz. Önemli olan, doğru temsilciyi ayarlamayı unutmamaktır.

Bu işlemi tamamladıktan sonra uygulamayı yeniden dağıtın ve CRM'deki görüşmenize geri dönün. Artık mesajlarınızın sohbet geçmişinde göründüğünü görebilirsiniz. Temsilcinizin mesajlarını mobil test cihazınızda da görebilirsiniz.

Devam etmeden önce yeni uç noktaların işleyiş şeklini anladığınızdan emin olun. Sonraki adımda, görüşmeden çıkmak için kendi uç noktanızı ekleyeceksiniz.

5. Sohbetten ayrılma

Kullanıcının sorularına yardımcı olduktan sonra görüşmeden ayrılabilir ve kullanıcının botla tekrar konuşmasına izin verebilirsiniz. Business Messages'da bu değişiklik, REPRESENTATIVE_LEFT etkinliğiyle gösterilir.

step-4 dizinine gidin, uygulamayı yeniden dağıtın ve ileti dizisinize dönün. Artık ileti dizisinin en altında Görüşmeyi kapat ve ayrıl bağlantısı yer alıyor. leaveConversation uç noktası uygulanmadığı için bu bağlantı henüz çalışmıyor.

index.js dosyasını inceleyin. Yeni bir leaveConversation uç noktası oluşturmanızı isteyen bir TODO yorumu var.

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.
 */

Bunu uygulamak için codelab'de şimdiye kadar öğrendiğiniz her şeyi bir araya getirmeniz gerekir. Bu uç nokta şunları yapmalıdır:

• Mesaj dizisini BOT_THREAD_STATE olarak güncelleyin.
• REPRESENTATIVE_LEFT etkinliği gönderin.
• Görüşmede, kullanıcıya yankı botuyla konuştuklarını belirten bir mesaj gönderin. storeAndSendResponse yöntemini kullanın. Temsilcinin BOT olarak geri döndüğünü unutmayın.

Son adımda, kullanıcı için sohbetin durumu açıklanır. Temsilci sohbetten ayrıldığında kullanıcı bir etkinlik görür ancak tekrar yankı botuyla konuştuğunu her zaman anlamaz. Doğrudan bottan mesaj göndererek kullanıcıların kafasını karıştırmayı önler ve deneyimi iyileştirirsiniz.

İşlemleri bot üstlendiğine göre canlı temsilciniz başka bir sohbete katılabilir. Örnek kod ve CRM ile istediğiniz kadar oynamayı deneyin. İşletmenizin canlı müşteri temsilcisi aktarma deneyimi için aklınızdaki bazı farklı fikirleri test edin ve neyle karşılaştığınıza bakın.

6. Özet

Canlı müşteri temsilcisi aktarma kod laboratuvarını tamamladığınız için tebrikler.

Canlı müşteri temsilcisi aktarmalarını baştan sona yönetebilecek bir temsilci oluşturdunuz. Ayrıca, Cloud Datastore ile sohbetin durumunu izlemenin bir yolunu öğrendiniz.

Canlı müşteri temsilcisine aktarma özelliği sayesinde, canlı müşteri temsilcileriniz daha karmaşık sorguları ele alırken sık karşılaşılan istekleri bot'unuza bırakabilirsiniz. Kullanıcılarınız, özelleştirilmiş ve kullanışlı yeni deneyimden daha memnun kalacak ve işletmenize geri gelme ve işletmenizi arkadaşlarına tavsiye etme olasılıkları artacaktır.

Sırada ne var?

Aşağıdaki codelab'lerden bazılarına göz atın:

• İnternetten satın alıp mağazadan teslim alma 1. bölüm
• İnternetten satın alıp mağazadan teslim alma 2. bölüm

Daha fazla bilgi

• Bot'tan canlı temsilciye aktarma kılavuzundaki bilgilerle canlı temsilciye aktarma işleminin temellerini inceleyin.
• Dialogflow kılavuzunu kullanarak yankı bot'unuzu SSS bot'una yükseltin.

Referans dokümanları

• Yöntem: conversations.events.create
• Yöntem: conversations.messages.create
• Kaynak: Etkinlik
• Temsil edici