Canlı Müşteri Temsilcisi Aktarımı

1. Giriş

Son Güncelleme: 2021-08-23

Business Messages ile canlı müşteri temsilcisine aktarma

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

Bu codelab'de, canlı temsilciye aktarma özelliğinden nasıl tam olarak yararlanacağınız açıklanmaktadır.

Ne oluşturacaksınız?

Bu codelab'de, canlı temsilci aktarma etkinlikleri gönderip alabilen bir webhook oluşturacaksınız. Oluşturduklarınızı test etmek için başlangıç kodu tarafından sağlanan temel bir kullanıcı arayüzü kullanacaksınız.

Neler öğreneceksiniz?

Görüşme durumunu saklama ve yönetme
Canlı temsilci aktarma etkinlikleri göndermek için Business Messages'ı kullanma
Webhook ve temel kullanıcı arayüzü ayarlayarak görüşmelere temsilci olarak katılma
Business Messages API'yi kullanmayla ilgili en iyi uygulamalar.

Bu codelab, canlı temsilci aktarımını uygulamak için Business Message API'yi kullanmaya odaklanmaktadır. Her aşama için başlangıç kodunu inceleyebilirsiniz 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.
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 ve Node.js (sürüm 10 veya üzeri) 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 deneyimi. Az miktarda JavaScript kodu yazarsınız ve yazdığınız kodda 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, bunları Cloud Datastore'daki bir ileti dizisine kaydeder ve ardından aynı içerikle yanıt vererek 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 tam bir canlı temsilci aktarımı uygulaması oluşturmak için bu altyapıyı kullanabilirsiniz.

Başlangıç kodunu alma

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

Kod laboratuvarı boyunca kullanacağınız başlangıç kodu 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 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 sağlayan yöntemleri içeren datastore_util.js bulunur. Bu dosyanın nasıl çalıştığını anlamanız gerekmez. Yalnızca kullanılabilir yöntemleri ve işlevlerini not edin.
resources: Bu, 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 içerik ekleyeceğiniz ana dosyadır.
views: Bu dizinde, kullanıcı arayüzü öğeleri için EJS şablon dosyaları bulunur. Sonraki adımlarda daha fazla dosya içerecektir.
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 kodda her kaynak dizinine kopyalayın. Bu işlemi, codelab'in her adımı için 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

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'u olan bir web uygulaması içeriyor. Uygulama, mesajları kullanıcıya geri gönderir ve mesaj dizilerini 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, aracı bilgileriniz sayfasında birincil ve ikincil etkileşim türlerinizi sırasıyla Bot ve İnsan olarak yapılandırın.

Yankı botuyla sohbet etme

Aracınızı Developer Console'da açın. Aracınızın ayrıntılarını incelemenize olanak tanıyan Genel bakış sayfasını görürsünüz. Mobil test cihazınızla eşleşen aracı testi 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. Etkileşimli yüzey yalnızca söylediklerinizi kopyalar. Bu da pek kullanışlı bir kullanıcı deneyimi değildir. Keşke gerçek bir kişiyle konuşabilseydim!

3. Sohbete katılma

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

Bu adımın başlangıç kodu, temsilcinin devam eden tüm yazışma dizilerini listeleyen temel bir CRM ekler. Hangi görüşmelerin canlı temsilcinin ilgisini gerektirebileceğini görmek için bu 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 sohbet dizisini içeren bir listelemeyi görmek için tarayıcıda bu URL'ye gidin. Bu görüşmede yankı botu, temsilcimizin temsilcisi olarak hareket ettiğinden 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. 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ı müşteri temsilcisiyle konuşmak istediği zamanı belirten bir canlı temsilci isteği etkinliği sağlar. Kullanıcı arayüzünde listelemek için bu 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 nerede yakalamanız ve ileti dizisi durumunu nerede güncellemeniz gerektiğini 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 iş parçacığını yüklemek ve durumunu QUEUED_THREAD_STATE olarak güncellemek için libs/datastore_utils.js bölümündeki 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 ilgili adımın eksiksiz uygulamasını içerir.

Uygulamanızı tamamlayıp yeniden dağıttıktan sonra, mobil cihazınızdaki sohbette yer alan taşma menüsünü kullanarak canlı temsilci isteğinde bulunun.

Şimdi CRM'ye geri döndüğünüzde, yazışma dizinizde "Canlı temsilci istendi" yazan bir not görmeniz gerekir. Bu kullanıcının yardıma ihtiyacı var. Düğmenin çalışması için joinConversation uç noktasını uygulamanız gerekir.

TODO için saplama yöntemindeki diğer /joinConversation 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',
  });
});

İş parçacığı 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`	Bunu "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 gövdesidir. eventType ve representative değerlerini ayarlamanız gerekir.

Yardım için create yöntemiyle ilgili referans sayfasına veya etkinliklerle ilgili referans sayfasına göz atın.

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

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

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

Sohbete katıldığınıza göre artık canlı temsilci olarak mesaj gönderebilirsiniz.

step-3 dizinine gidin ve uygulamayı yeniden dağıtın. CRM'de, önceki adımdaki yazışma dizinizi tıklayın. Artık temel bir sohbet arayüzü görmeniz gerekir. Buradan kullanıcının mesajlarını anlık olarak görebilirsiniz.

Ancak mesajı temsilci olarak gönderme özelliği henüz uygulanmamıştır. Bu adımı tamamlamanız gerekir.

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

/messages: messages.ejs görünüm dosyasını alır ve tarayıcıda oluşturur. Dizinden bir ileti dizisini tıkladığınızda bu sayfalardan birine yönlendirilirsiniz.
/retrieveMessages: Bir ileti dizisinin ileti içeriklerini alır ve görüşmedeki tüm iletilerin biçimlendirilmiş bir listesini döndürür. Mesajlar sayfası, en son mesajları göstermek için bu uç noktayı düzenli olarak çağırır.
/sendMessage: Canlı temsilci tarafından kullanıcıya mesaj gönderilir. İleti sayfasında Gönder'i tıkladığınızda bu işlev çağrılır. Şu anda uygulanmamaktadır.

Şimdi de 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 gelen yanıtları göndermek için bu yöntemi zaten kullanıyor. Yöntem, gelen mesaj verilerini önce görüşme için Cloud Datastore nesnesinde depolar. Ardından yanıt mesajını gönderir. Oluşturduğu ileti nesnesine, özellikle de temsili türe yakından bakın.

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

Bu işlem tamamlandı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. Ayrıca, temsilcinizin mesajlarının mobil test cihazınızda göründüğünü de görebilirsiniz.

Devam etmeden önce yeni uç noktaların nasıl çalıştığını anladığınızdan emin olun. Sonraki adımda, görüşmeden ayrılmak 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 bildirilir.

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

index.js dosyasına bakın. 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:

İş parçacığını BOT_THREAD_STATE olarak güncelleyin.
REPRESENTATIVE_LEFT etkinliği gönderin.
Kullanıcıya, Echo bot ile konuştuğunu bildirmek için görüşmeye bir mesaj gönderin. storeAndSendResponse yöntemini kullanın. Temsilcinin tekrar BOT olarak değiştirildiğini unutmayın.

Son adım, kullanıcının görüşmenin durumunu anlamasına yardımcı olur. Temsilci sohbetten ayrıldığında kullanıcı bir etkinlik görür ancak tekrar Echo Bot ile konuştuğunu anlamayabilir. Doğrudan bottan mesaj göndererek kullanıcıların kafasını karıştırmayı önler ve deneyimi iyileştirirsiniz.

Artık bot işleri hallettiği için canlı temsilciniz başka bir sohbete katılabilir. Örnek kod ve CRM ile istediğiniz kadar oynayabilirsiniz. İşletmenizin canlı temsilciye aktarım deneyimiyle ilgili farklı fikirlerinizi test edin ve neler bulduğunuza bakın.

6. Özet

Tebrikler! Canlı müşteri temsilcisine aktarma codelab'ini tamamladınız.

Canlı müşteri temsilcisi aktarımlarını baştan sona yönetebilen bir temsilci oluşturmuş olmanız gerekir. Ayrıca Cloud Datastore ile görüşmenin durumunu izlemenin bir yolunu da öğrendiniz.

Canlı müşteri temsilcisine aktarma özelliği sayesinde yaygın istekleri botunuza bırakabilir, canlı müşteri temsilcilerinizin ise daha karmaşık sorgularla ilgilenmesini sağlayabilirsiniz. Kullanıcılarınız, yeni özelleştirilmiş ve faydalı deneyimden daha memnun kalacak. Bu sayede, geri dönme ve işletmenizi arkadaşlarına önerme olasılıkları artacak.

Yapabilecekleriniz

Aşağıdaki codelab'lere göz atın:

Daha fazla bilgi

Handoff from bot to live agent guide (Botlardan canlı temsilcilere aktarma rehberi) ile canlı temsilciye aktarmanın temel bilgilerini inceleyin.
Dialogflow kılavuzunu kullanarak yankı botunuzu SSS botuna yükseltin.

Canlı Müşteri Temsilcisi Aktarımı Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

1. Giriş

Business Messages ile canlı müşteri temsilcisine aktarma

Ne oluşturacaksınız?

Neler öğreneceksiniz?

Gerekenler

2. Yankı botu oluşturma

Başlangıç kodunu alma

Başlangıç kodunu anlama

Başlangıç kodunu dağıtma

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

Yankı botuyla sohbet etme

3. Sohbete katılma

step-2/routes/index.js

step-2/routes/index.js

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

step-3/routes/index.js

5. Sohbetten ayrılma

step-4/routes/index.js

6. Özet

Yapabilecekleriniz

Daha fazla bilgi

Referans belgeler

Canlı Müşteri Temsilcisi Aktarımı