Bu sayfa, Cloud Translation API ile çevrilmiştir.

Canlı Müşteri Temsilcisi Aktarımı

1. Giriş

Son Güncelleme Tarihi: 23.08.2021

Business Messages ile canlı temsilci aktarımı

Business Messages'ın canlı temsilci aktarma özelliği, temsilcinizin bot olarak görüşme başlatmasına ve görüşme ortasında canlı temsilciye (gerçek kişi olan temsilci) geçmesine olanak tanır. Bot'unuz çalışma saatleri gibi sık sorulan soruları ele alırken canlı temsilciniz kullanıcının bağlamına daha fazla erişimle özelleştirilmiş bir deneyim sunabilir. Bu iki deneyim arasındaki geçiş sorunsuz olduğunda kullanıcılar sorularına hızlı ve doğru bir şekilde yanıt alır, bu da etkileşim oranını ve müşteri memnuniyetini artırır.

Bu codelab'de, canlı temsilci aktarımı özelliğinden nasıl en iyi şekilde yararlanabileceğiniz açıklanmaktadır.

Oluşturacaklarınız

Bu codelab'de temsilciniz için canlı temsilci aktarım etkinlikleri gönderip alabilecek bir webhook oluşturacaksınız. Derlediğiniz şeyi test etmek için başlangıç kodu tarafından sağlanan temel bir kullanıcı arayüzünü kullanacaksınız.

Neler öğreneceksiniz?

İleti dizisi durumunu depolama ve yönetme.
Canlı temsilci aktarım etkinliklerini göndermek için Business Messages'ı kullanma.
Aracı olarak görüşmeleri birleştirmek için webhook ve temel kullanıcı arayüzü ayarlama.
Business Messages API'yi kullanmayla ilgili en iyi uygulamalar.

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

Gerekenler

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

2. Yankı botu oluşturma

Bu adımda, "Echo bot" adı verilen temel bir bot temsilcisi dağıtacaksınız. Bu bot, kullanıcı mesajlarını alır, Cloud Datastore'daki bir sohbet ileti dizisine kaydeder ve ardından "yankılar" aynı içerikle yanıt vererek mesajını alabilirsiniz. Temel bir bot ve günlük kaydı altyapınız olduğunda, buna ekleme yaparak sonraki adımlarda eksiksiz bir canlı temsilci aktarımı uygulaması oluşturabilirsiniz.

Başlangıç kodunu alın

Bir terminalde, aşağıdaki komutu kullanarak Live Agent Transfer 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

Codelab 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. Aşağıdaki öğeleri içerir:

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

Dağıtımdan önce GCP hizmet hesabı anahtarınızı indirin ve JSON kimlik bilgileri dosyasını örnek koddaki her kaynak dizinine kopyalayın. Codelab'in her adımı için bu işlemi yapın.

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

Başlangıç kodunu dağıtma

Bir 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

Dağıtılan uygulamanın URL'sini son komutun çıkışında not edin:

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

Az önce dağıttığınız başlangıç kodu, Business Messages'dan mesaj almanızı sağlayan bir webhook'a sahip web uygulaması içeriyor. Uygulama, mesajları kullanıcıya geri gönderir ve mesaj iş parçacıklarını Cloud Datastore'a kaydeder.

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

Business Communications Developer Console'da 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/.

Ardından, Temsilci bilgileri sayfanızda birincil ve ikincil etkileşim türlerinizi sırasıyla Bot ve İnsan olarak yapılandırın.

Yankı botu ile sohbet etme

Geliştirici Konsolu'nda temsilcinizi açın. Temsilcinizin ayrıntılarını incelemenize olanak tanıyan Genel bakış sayfası açılır. 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şim kurun. Konuşma yüzeyi yalnızca söylediklerinizi kopyalar; pek kullanışlı bir kullanıcı deneyimi sunmaz. Keşke gerçek bir insanla konuşmanın bir yolu olsaydı.

3. Sohbete katılıyorsunuz

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

Bu adımın başlangıç kodu, temsilci için devam eden tüm konuşma dizilerini listeleyen temel bir CRM ekler. Hangi görüşmelerde canlı temsilcinin ilgilenmesi 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. Bir önceki adımda başlattığınız sohbet dizisine sahip girişi görmek için bir tarayıcıda bu URL'ye gidin. Görüşmenin durumu şu anda "Bot tarafından yönetiliyor" echo bot, görüşmemizde temsilcimizin temsilcisi olarak hareket ediyor.

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

Business Messages, kullanıcının canlı müşteri temsilcisiyle konuşmak istediğini gösteren bir canlı müşteri temsilcisi tarafından istenen etkinlik sağlar. Kullanıcı arayüzünde listelemek için durumu takip etmeniz gerekir.

index.js içindeki geri çağırma yöntemine göz atın. TODO yorumu, kullanıcının canlı temsilci 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 görüşme ileti dizisini 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, belirtilen adımdaki uygulamanın tamamını içeren uygulamanın tamamının bir kopyasını içerir.

Uygulamanızı tamamlayıp uygulamayı yeniden dağıttıktan sonra canlı aracı isteğinde bulunmak için mobil cihazınızdaki görüşmede bulunan taşma menüsünü kullanın.

CRM'ye geri dönerseniz görüşme dizinizde "Canlı müşteri temsilcisi istendi" yazan bir not görürsünüz. Bu kullanıcının bir insandan yardım alması gerekiyor. Düğmenin çalışması için joinConversation uç noktasını uygulamanız gerekir.

/joinConversation için dublaj yönteminde diğer TODO yorumu 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 gerekiyor. 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ünü oluşturmak için aşağıdaki tabloda açıklanan alanları ayarlamanız gerekir:

Alan adı	İpucu
`parent`	Bunu "dönş.lar/{iletisimId}" olarak ayarlayın.
`eventId`	Etkinlik için kendi rastgele kimliğinizi oluşturun.
`auth`	Sağlanan `initCredentials` yöntemini kullanın.
`resource`	Bu, etkinlik gövdesinin kendisidir. eventType ve temsilciyi ayarlamanız gerekir.

Yardım için oluşturma yöntemiyle ilgili referans sayfasına veya etkinlikler referans sayfasına göz atın.

İşlemi tamamladığınızda uygulamayı yeniden dağıtın ve Sohbete katıl düğmesini tıklayın. Görüşmeye katıldınız iletişim kutusu görünür ve sohbet durumu "Canlı sohbet" olarak değişir. Görüşmeye mobil cihazınızda bakarsanız sohbette canlı temsilcinizin katıldığını belirten bir not görürsünüz.

Tebrikler! Sonraki adımda, canlı temsilcinizin kullanıcınızla konuşmasını nasıl sağlayacağınıza bakacağız.

4. Canlı temsilci olarak mesajlaşma

Görüşmeye katıldığınıza göre, artık canlı müşteri temsilcisi olarak mesaj gönderebilirsiniz.

step-3 dizinine gidip uygulamayı yeniden dağıtın. CRM'de önceki adımda yer alan görüşme ileti dizisini tıklayın. Temel sohbet arayüzünü göreceksiniz. Buradan, kullanıcıların mesajlarını gerçek zamanlı olarak görebilirsiniz.

Ancak, aracı olarak mesaj gönderme işlemi hâlâ uygulanmamıştır. Bu adımda bunu tamamlamanız gerekir.

routes/index.js dosyasını açın ve 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 dizisini tıkladığınızda bu sayfalardan birine gidersiniz.
/retrieveMessages: Bir ileti dizisinin ileti içeriğini alır ve ileti dizisindeki tüm iletilerin 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ı temsilci temsilcisinden kullanıcıya bir mesaj gönderir. Gönder'i tıkladığınızda iletiler sayfasında bu çağrı yapılır. Şu anda uygulanmamaktadır.

Ş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, yankı bot'undan yanıt göndermek için zaten bu yöntemi kullanmaktadır. Yöntem, ilk olarak gelen mesaj verilerini görüşme için Cloud Datastore nesnesinde depolar. Ardından, yanıt mesajını gönderir. Özellikle temsil türünde olmak üzere oluşturduğu mesaj nesnesine yakından bakın.

Şimdi /sendMessage uç noktasını kendiniz uygulayın. İşin büyük bir kısmını yapmak için buradaki mevcut storeAndSendResponse yöntemini kullanabilirsiniz. Önemli olan, doğru temsilciyi ayarlamayı unutmayın.

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ı sohbet geçmişinde görebilirsiniz. Ayrıca, 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ılınıyor

Kullanıcıya soruları konusunda yardımcı olduktan sonra, görüşmeden ayrılıp kullanıcının bot'la tekrar konuşmasına izin vermek isteyebilirsiniz. Business Messages'ta bu değişiklik, bir REPRESENTATIVE_LEFT etkinliği tarafından bildirilir.

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

index.js dosyasına bakın. Yeni bir leaveConversation uç noktası oluşturmanızı isteyen bir YAPILACAKLAR 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 şu ana kadar öğrendiğiniz tüm bilgileri bir araya getirmeniz gerekir. Bu uç nokta aşağıdakileri yapmalıdır:

İleti dizisini BOT_THREAD_STATE olarak güncelleyin.
Bir REPRESENTATIVE_LEFT etkinliği gönderin.
Kullanıcıya yankı botu ile konuştuğunu bildirmek için görüşmede bir mesaj gönderin. storeAndSendResponse yöntemini kullanın. Temsilcinin tekrar BOT olduğunu unutmayın.

Son adımda, kullanıcı için görüşmenin durumunu netleştirir. Kullanıcı, bir temsilci sohbetten ayrıldığında bir etkinlik görür ancak kullanıcı, yankı botu ile tekrar konuştuğunu anlamayabilir. Doğrudan bot'tan mesaj göndererek kullanıcıların kafasını karıştırabilir ve deneyimi iyileştirebilirsiniz.

Bot artık gerekli işlemleri yaptığına göre canlı temsilciniz başka bir görüşmeye katılabilir. Örnek kod ve CRM ile istediğiniz kadar oynamayı deneyin. İşletmenizin canlı müşteri temsilcisi aktarma deneyimiyle ilgili farklı fikirlerinizi test edin ve neler düşündüğünüzü görün.

6. Özet

Canlı temsilci aktarımı codelab'ini tamamladığınız için tebrikler.

Canlı temsilci aktarımlarını baştan sona tamamlayabilecek bir temsilci oluşturdunuz. Ayrıca, Cloud Datastore ile görüşmenin durumunu izlemenin bir yolunu da öğrendiniz.

Canlı temsilci aktarımı sayesinde, sık yapılan istekleri botunuza bırakırken canlı temsilcileriniz daha karmaşık sorguları ele alır. Kullanıcılarınız, özelleştirilmiş ve kullanışlı yeni deneyimden daha çok memnun kalırlar. Böylece, işletmenizi arkadaşlarına önerme ve geri gelme olasılıkları artar.

Sırada ne var?

Şu codelab'lerden bazılarına göz atın:

Daha fazla bilgi

Bot'tan canlı temsilciye geçiş kılavuzu ile canlı temsilci aktarımıyla ilgili temel bilgileri inceleyin.
Dialogflow rehberini kullanarak yankı botunuzu SSS bot'una yükseltin.

Canlı Müşteri Temsilcisi Aktarımı

1. Giriş

Business Messages ile canlı temsilci aktarımı

Oluşturacaklarınız

Neler öğreneceksiniz?

Gerekenler

2. Yankı botu oluşturma

Başlangıç kodunu alın

Başlangıç kodunu anlama

Başlangıç kodunu dağıtma

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

Yankı botu ile sohbet etme

3. Sohbete katılıyorsunuz

step-2/routes/index.js

step-2/routes/index.js

4. Canlı temsilci olarak mesajlaşma

step-3/routes/index.js

5. Sohbetten ayrılınıyor

step-4/routes/index.js

6. Özet

Sırada ne var?

Daha fazla bilgi

Referans belgeler