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üşmenin ortasında canlı temsilciye (gerçek kişi) 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şim sunan ö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 daha yüksek getiri etkileşimi oranı ve daha yüksek müşteri memnuniyeti sağlar.

Bu codelab'de, canlı temsilci aktarma özelliğinden tam olarak nasıl yararlanacağınızı öğrenebilirsiniz.

Oluşturacağınız araç

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

Not: Bu codelab'de, iş ortağı olarak kaydolduğunuz ve destek ekibimizden onay aldığınız varsayılmaktadır. Henüz yapmadıysanız Business Messages'a kaydolun ve bu codelab'e başlamadan önce onay bekleyin.

Neler öğreneceksiniz?

• Görüşme durumunu depolama ve yönetme
• Canlı müşteri temsilcisi aktarma etkinlikleri göndermek için Business Messages'ı kullanma.
• Görüşmelere temsilci olarak katılmak için webhook ve temel kullanıcı arayüzü ayarlama.
• Business Messages API'yi kullanmayla ilgili en iyi uygulamalar.

Bu codelab'de, canlı temsilci aktarımını uygulamak için Business Message API'nin kullanılmasına odaklanılmıştır. Her aşamanın başlangıç kodunu baştan sona okuyabilirsiniz ancak yalnızca Business Messages ile ilgili kodu uygulamanız gerekir.

Gerekenler

• Hizmet hesabı anahtarınızı içeren bir Business Messages temsilcisi. Temsilci oluşturma kılavuzu makalesindeki talimatları uygulayarak temsilci oluşturabilirsiniz.
• Aracınızın GCP projesine bağlı, çalışan bir Cloud Datastore yapılandırması. Bunu kurmak 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 üstü) yüklü bir bilgisayar.
• Kullanıcı deneyimini test etmek için bir Android cihaz (5 veya sonraki bir sürüme sahip) ya da iOS cihaz.
• Web uygulaması programlama konusunda deneyim. Az miktarda JavaScript kodu yazacaksınız ve yazdıklarınızda hata ayıklaması gerekecek.

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 görüşme dizisine kaydeder, ardından aynı içerikle yanıt vererek kullanıcının mesajını"yankılar". Temel bir bot ve günlük kaydı altyapınız olduğunda, sonraki adımlarda eksiksiz bir canlı aracı aktarımı uygulaması oluşturmak için bunu ekleyebilirsiniz.

Başlangıç kodunu alın

Bir terminalde, aşağıdaki komutla 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 süresince çalışacağı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 kuran ve yapılandıran www başlangıç komut dosyasını içerir.
• libs: Bu dizin, Cloud Datastore'dan okuma ve yazma için kolay yöntemler içeren datastore_util.js içerir. Bu dosyanın nasıl çalıştığını anlamanız gerekmez. Sunulan yöntemleri ve ne işe yaradıklarını not edin.
• resources: Bu dosya, 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 ekleme yapacağınız ana dosyadır.
• views: Bu dizin, kullanıcı arayüzü öğeleri için EJS şablon dosyaları içerir. Sonraki adımlarda dosya 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ğıtmadan önce GCP hizmet hesabı anahtarınızı indirin ve JSON kimlik bilgileri dosyasını örnek koddaki 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

İpucu: Hizmet anahtarınızı oluşturma veya indirme konusunda yardıma ihtiyacınız varsa hizmet hesaplarını yönetmeyle ilgili Google Cloud rehberini inceleyin.

Başlangıç kodunu dağıtma

Terminalde örneğin step-1 dizinine gidin. Ardından, API'lere kaydolurken 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]

Az önce dağıttığınız başlangıç kodu, Business Messages'tan mesaj almak için webhook içeren bir web uygulaması içerir. Uygulama, mesajları kullanıcıya yeniden yansıtır ve mesaj ileti 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/.

İpucu: Webhook'unuzu ayarlamayla ilgili bilgilerinizi tazelemeye ihtiyacınız varsa Business Messages kurulum kılavuzundaki Webhook'unuzu ayarlama bölümünü inceleyin.

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

Echo bot 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 müşteri temsilcisiyle iletişime geçin. Konuşma yüzeyi yalnızca söylediklerinizi kopyalar ve çok faydalı bir kullanıcı deneyimi sunmaz. Keşke gerçek bir insanla konuşmanın bir yolu olsaydı!

3. Görüşmeye katılınıyor

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

Bu adımın başlangıç kodu, temsilci için devam eden tüm görüşme ileti dizilerini listeleyen temel bir CRM ekler. Canlı müşteri temsilcisinin hangi görüşmelere ilgi gösterebileceğ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 ileti dizisini içeren bir giriş görmek için bir tarayıcıda bu URL'ye gidin. Yankı botu, bu görüşmede temsilcimizin temsilcisi olarak davrandığından görüşmenin durumu şu anda "Bot tarafından yönetiliyor".

Sohbete katıl düğmesi görünür ancak henüz bir şey yapmaz. Kullanıcının canlı bir temsilciyle konuşmak isteyip istemediğini de bu arayüzden öğrenemezsiniz.

Business Messages, kullanıcının canlı bir temsilciyle ne zaman konuşmak istediğini gösteren, canlı temsilcinin istediği bir etkinlik sağlar. Söz konusu durumu kullanıcı arayüzünde listelemek için takip etmeniz gerekir.

index.js öğesindeki geri çağırma yöntemine göz atın. TODO yorumu, kullanıcının canlı temsilciye yönelik isteğini yakalamanız ve ileti dizisi durumunu güncellemeniz gereken yeri belirtir.

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 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, kod tamamlamanız gereken her adımın altında bir solutions dizini içerir. Bu dizinler, belirtilen adımın eksiksiz uygulamasını içeren tüm uygulamanın bir kopyasını içerir.

Uygulama işleminizi tamamlayıp uygulamayı yeniden dağıttıktan sonra, canlı bir temsilci istemek için mobil cihazınızdaki görüşmede yer alan taşma menüsünü kullanın.

İpucu: Taşma menünüzde "Canlı temsilciye mesaj gönder" seçeneğini görmüyorsanız temsilcinizin Business Messages konsolunda yapılandırılmış bir insan etkileşim türü bulunduğundan emin olun.

Şimdi, CRM'ye geri dönerseniz görüşme ileti dizinizde "Canlı temsilci istendi" ifadesini içeren bir not görürsünüz. Bu kullanıcının gerçek bir kişiden yardım alması gerekiyor. Düğmenin çalışması için joinConversation uç noktasını uygulamanız gerekir.

/joinConversation için stub dosyalı yöntemde 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 özetlenen alanları ayarlamanız gerekir:

Alan adı	İpucu
parent	Bunu 'conversation/{conversationId}' 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övdesidir. eventType'ı ve temsili ayarlamanız gerekir.

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

Uygulama işlemini tamamladığınızda uygulamayı yeniden dağıtın ve Sohbete katıl düğmesini tıklayın. Görüşmeye katılındı 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ığı 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ı müşteri temsilcisi olarak mesajlaşma

Artık görüşmeye katıldığınıza göre, canlı müşteri temsilcisi olarak bazı mesajlar gönderebilirsiniz.

step-3 dizinine gidin ve uygulamayı yeniden dağıtın. CRM'de, önceki adımda bulunan görüşme dizinizi tıklayın. Şimdi temel sohbet arayüzünü görüyor olmanız gerekir. Buradan, kullanıcının mesajlarını gerçek zamanlı olarak görebilirsiniz.

Ancak aracı olarak mesaj gönderme seçeneği hâlâ uygulanmıyor. 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ünüm dosyasını alır ve tarayıcıda oluşturur. Dizindeki bir ileti dizisini tıkladığınızda bu sayfalardan birine gidersiniz.
• /retrieveMessages: Bir mesaj dizisinin mesaj içeriğini alır ve mesaj dizisindeki tüm mesajların biçimlendirilmiş bir listesini döndürür. Mesajlar sayfası, en son mesajları göstermek için düzenli aralıklarla bu uç noktayı çağırır.
• /sendMessage: Canlı temsilci temsilcisinden kullanıcıya mesaj gönderir. Gönder'i tıkladığınızda mesajlar sayfasında bu çağrı yer alır. Şu anda uygulanmamıştı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, echo bot'tan yanıt göndermek için zaten bu yöntemi kullanır. Yöntem ilk olarak gelen mesaj verilerini, ileti dizisi için Cloud Datastore nesnesinde depolar. Ardından yanıt mesajını gönderir. Oluşturduğu mesaj nesnesini, özellikle de temsili türünü yakından inceleyin.

Ş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.

Bunu yaptı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. 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. Bir sonraki adımda, sohbetten ayrılmak için kendi uç noktanızı ekleyeceksiniz.

5. Sohbetten ayrılıyorsunuz

Kullanıcıya sorularıyla ilgili yardımcı olduktan sonra, sohbetten ayrılmak ve kullanıcının bot'la tekrar konuşmasına izin vermek isteyebilirsiniz. Business Messages'ta bu değişiklik bir REPRESENTATIVE_LEFT etkinliğiyle belirtilir.

step-4 dizinine gidin, uygulamayı yeniden dağıtın ve görüşme dizinize dönün. Artık ileti dizisinin en altında Görüşmeyi kapatın ve görüşmeden ayrıl bağlantısı bulunur. 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ı söyleyen 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 şu ana kadar öğrendiğiniz her şeyi bir araya getirmeniz gerekir. Bu uç nokta şunları yapmalıdır:

• İleti dizisini BOT_THREAD_STATE olarak güncelleyin.
• REPRESENTATIVE_LEFT etkinliği gönder.
• Kullanıcıya echo bot ile konuştuğunu bildirmek için görüşmede bir mesaj gönderin. storeAndSendResponse yöntemini kullanın. Temsilcinin tekrar BOT olarak değiştiğini unutmayın.

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

Bot artık işleri hallettiğine göre, canlı müşteri temsilciniz başka bir görüşmeye katılabilir. İstediğiniz kadar örnek kod ve CRM ile oynamayı deneyin. İşletmenizin canlı müşteri temsilcisi aktarma deneyimiyle ilgili farklı fikirlerinizi test edin ve neler düşündüğünüze bakın.

6. Özet

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

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ı müşteri temsilcisi aktarımı sayesinde, sık yapılan istekleri bot'unuza bırakırsınız. Canlı müşteri temsilcileriniz ise daha karmaşık sorgularla ilgilenir. Kullanıcılarınız, özelleştirilmiş ve kullanışlı yeni deneyimden daha fazla memnun kalacaklar. Böylece, geri dönme ve işletmenizi arkadaşlarına önerme olasılıkları artacaktır.

Sırada ne var?

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

• İnternetten teslim alma, mağazadan teslim alma 1. bölüm
• Satın alma mağazadan teslim alma, 2. bölüm

Daha fazla bilgi

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

Referans belgeler

• Yöntem: speech.events.create
• Yöntem: speech.messages.create
• Kaynak: Etkinlik
• Temsilci