लाइव एजेंट ट्रांसफ़र की सुविधा

1. परिचय

53003251caaf2be5.png 6717b85f57d859d3.png

पिछली बार अपडेट किया गया: 23-08-2021

Business Messages की मदद से, लाइव एजेंट को ट्रांसफ़र करना

Business Messages की लाइव एजेंट ट्रांसफ़र सुविधा की मदद से, आपका एजेंट बॉट के तौर पर बातचीत शुरू कर सकता है. साथ ही, बातचीत के बीच में, लाइव एजेंट (मैन्युअल प्रतिनिधि) पर स्विच कर सकता है. आपका बॉट, सामान्य सवालों के जवाब दे सकता है. जैसे, कारोबार के खुले होने का समय. वहीं, आपका लाइव एजेंट, उपयोगकर्ता के संदर्भ को ज़्यादा ऐक्सेस करके, उसे पसंद के मुताबिक अनुभव दे सकता है. जब इन दोनों अनुभवों के बीच ट्रांज़िशन आसानी से होता है, तो उपयोगकर्ताओं को उनके सवालों के जवाब तुरंत और सटीक तरीके से मिल जाते हैं. इससे, ग्राहकों की दिलचस्पी फिर से बढ़ती है और उनकी संतुष्टि भी बढ़ती है.

इस कोडलैब में, लाइव एजेंट ट्रांसफ़र की सुविधा का पूरा फ़ायदा पाने का तरीका बताया गया है.

आपको क्या बनाना है

इस कोडलैब में, आपको अपने एजेंट के लिए एक वेबहुक बनाना है. यह वेबहुक, लाइव एजेंट ट्रांसफ़र इवेंट भेज और पा सकता है. आपने जो बनाया है उसकी जांच करने के लिए, आपको स्टार्टर कोड से मिले बुनियादी यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल करना होगा.

49aca3df6b196c50.png

आपको इनके बारे में जानकारी मिलेगी

  • बातचीत की स्थिति को सेव और मैनेज करने का तरीका.
  • लाइव एजेंट ट्रांसफ़र इवेंट भेजने के लिए, Business Messages का इस्तेमाल करने का तरीका.
  • एजेंट के तौर पर बातचीत में शामिल होने के लिए, वेबहुक और बुनियादी यूज़र इंटरफ़ेस (यूआई) सेट अप करने का तरीका.
  • Business Messages API का इस्तेमाल करने के सबसे सही तरीके.

इस कोडलैब में, लाइव एजेंट ट्रांसफ़र लागू करने के लिए, Business Messages API का इस्तेमाल करने के बारे में बताया गया है. हर चरण के लिए, शुरुआती कोड को पढ़ा जा सकता है. हालांकि, आपको सिर्फ़ Business Messages से जुड़ा कोड लागू करना होगा.

आपको इन चीज़ों की ज़रूरत होगी

  • Business Messages का एजेंट, जिसमें आपके सेवा खाते की कुंजी शामिल हो. एजेंट बनाने से जुड़ी गाइड में दिया गया तरीका अपनाकर, एजेंट बनाया जा सकता है.
  • आपके एजेंट के GCP प्रोजेक्ट से जुड़ा, काम करने वाला Cloud Datastore कॉन्फ़िगरेशन. इसे सेट अप करने के लिए, Cloud Datastore के लिए क्विकस्टार्ट का इस्तेमाल किया जा सकता है. इसके लिए, आपको Cloud Datastore का इस्तेमाल करने का तरीका जानने की ज़रूरत नहीं है.
  • ऐसा कंप्यूटर जिसमें Google Cloud SDK और Node.js (10 या इसके बाद का वर्शन) इंस्टॉल हो.
  • उपयोगकर्ता अनुभव की जांच करने के लिए, Android डिवाइस (5 या उसके बाद के वर्शन वाला) या iOS डिवाइस.
  • वेब ऐप्लिकेशन प्रोग्रामिंग का अनुभव. आपको थोड़ा सा JavaScript कोड लिखना होगा और हो सकता है कि आपको लिखे गए कोड को डीबग करना पड़े.

2. एक इको बॉट बनाना

इस चरण में, आपको "Echo बॉट" नाम का एक बुनियादी बॉट प्रतिनिधि डिप्लॉय करना होगा. यह बॉट, उपयोगकर्ता के मैसेज को Cloud Datastore में बातचीत की थ्रेड में लॉग करता है. इसके बाद, उसी कॉन्टेंट का इस्तेमाल करके उपयोगकर्ता के मैसेज को "इको" करता है. बुनियादी बॉट और लॉगिंग इन्फ़्रास्ट्रक्चर बनाने के बाद, आगे के चरणों में लाइव एजेंट ट्रांसफ़र को लागू करने के लिए, उसमें कुछ और जोड़ा जा सकता है.

स्टार्टर कोड पाना

टर्मिनल में, लाइव एजेंट ट्रांसफ़र स्टार्टर कोड को अपने प्रोजेक्ट की वर्किंग डायरेक्ट्री में क्लोन करें. इसके लिए, यह कमांड इस्तेमाल करें:

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

स्टार्टर कोड को समझना

आइए, स्टार्टर कोड के स्ट्रक्चर पर एक नज़र डालें. इस स्ट्रक्चर का इस्तेमाल, कोडलैब के दौरान किया जाएगा.

step-1 डायरेक्ट्री पर जाएं और उसका कॉन्टेंट देखें. इसमें ये एलिमेंट शामिल होते हैं:

  • bin: इस डायरेक्ट्री में www स्टार्टर स्क्रिप्ट होती है, जो सर्वर को सेट अप और कॉन्फ़िगर करती है.
  • libs: इस डायरेक्ट्री में datastore_util.js शामिल है. इसमें Cloud Datastore में डेटा पढ़ने और उसमें डेटा लिखने के लिए आसान तरीके शामिल हैं. आपको इस फ़ाइल के काम करने के तरीके के बारे में जानने की ज़रूरत नहीं है. बस उपलब्ध तरीकों और उनके काम करने के तरीके पर ध्यान दें.
  • resources: इसमें credentials.json नाम की फ़ाइल के तौर पर, आपके सेवा खाते की कुंजी शामिल होती है.
  • routes: index.js फ़ाइल में वेबहुक और उसके सभी सहायक तरीके शामिल होते हैं. यह मुख्य फ़ाइल है, जिस पर आपको काम करना है और इसमें डेटा जोड़ना है.
  • व्यू: इस डायरेक्ट्री में, यूज़र इंटरफ़ेस (यूआई) एलिमेंट के लिए EJS टेंप्लेट फ़ाइलें होती हैं. इसमें बाद के चरणों में ज़्यादा फ़ाइलें होंगी.
  • app.js, app.yaml, package.json: ये फ़ाइलें, ऐप्लिकेशन और उसकी डिपेंडेंसी को कॉन्फ़िगर करती हैं.

डिप्लॉय करने से पहले, अपना GCP सेवा खाता पासकोड डाउनलोड करें और सैंपल कोड में मौजूद हर संसाधन डायरेक्ट्री में, JSON क्रेडेंशियल फ़ाइल कॉपी करें. कोडलैब के हर चरण के लिए ऐसा करें.

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

स्टार्टर कोड को डिप्लॉय करना

टर्मिनल में, सैंपल की step-1 डायरेक्ट्री पर जाएं. इसके बाद, अपने Google Cloud प्रोजेक्ट का इस्तेमाल करने के लिए gcloud टूल सेट करें. इसके लिए, वह प्रोजेक्ट आईडी सेट करें जिसका इस्तेमाल आपने एपीआई के साथ रजिस्टर करने के लिए किया था.

gcloud config set project <PROJECT_ID>

ऐप्लिकेशन को डिप्लॉय करने के लिए, यह कमांड चलाएं:

gcloud app deploy

आखिरी कमांड के आउटपुट में, डिप्लॉय किए गए ऐप्लिकेशन का यूआरएल नोट करें:

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

आपने जो स्टार्टर कोड अभी-अभी डिप्लॉय किया है उसमें एक वेब ऐप्लिकेशन है. इसमें वेबहुक भी है, ताकि Business Messages से मैसेज मिल सकें. ऐप्लिकेशन, उपयोगकर्ता को मैसेज भेजता है और मैसेज थ्रेड को Cloud Datastore में लॉग करता है.

अपना एजेंट कॉन्फ़िगर करना

Business Communications डेवलपर कंसोल में, अपने खाते की सेटिंग वाले पेज पर जाएं और अपने वेबहुक को डिप्लॉय किए गए ऐप्लिकेशन के यूआरएल पर सेट करें. उदाहरण के लिए, https://PROJECT_ID.appspot.com/callback/.

इसके बाद, एजेंट की जानकारी वाले पेज पर, मुख्य और सेकंडरी इंटरैक्शन टाइप को क्रमशः बॉट और मानव के तौर पर कॉन्फ़िगर करें.

db0cca5b74f999ad.png

Echo बॉट से बातचीत करना

Developer Console में अपना एजेंट खोलें. आपको खास जानकारी वाला पेज दिखेगा. इस पेज पर, अपने एजेंट की जानकारी देखी जा सकती है. अपने मोबाइल टेस्ट डिवाइस से मैच करने वाला एजेंट टेस्ट यूआरएल कॉपी करें. अपने एजेंट का बातचीत वाला प्लैटफ़ॉर्म लॉन्च करने के लिए, अपने मोबाइल डिवाइस पर इस यूआरएल का इस्तेमाल करें.

536313929e5c0b3e.png

कुछ मैसेज भेजकर, एजेंट से इंटरैक्ट करें. बातचीत वाली सुविधा सिर्फ़ आपकी कही गई बातों को कॉपी करती है. इससे उपयोगकर्ता को बहुत ज़्यादा फ़ायदा नहीं मिलता. अगर किसी असली व्यक्ति से बात करने का कोई तरीका होता!

3. बातचीत में शामिल होना

अब आइए, बातचीत को आपके लाइव एजेंट के नज़रिए से देखें. लाइव एजेंट के तौर पर, बातचीत में शामिल होने से पहले आपको कुछ बातें पता होनी चाहिए. जैसे, बातचीत का आईडी. यह जानना भी मददगार होता है कि उपयोगकर्ता ने लाइव एजेंट से बात करने का अनुरोध किया है या नहीं. इस चरण में, आपको यह जानकारी देखने और लाइव एजेंट के तौर पर बातचीत में शामिल होने के लिए, एक बुनियादी सीआरएम (कस्टमर रिलेशनशिप मैनेजमेंट) पेज का इस्तेमाल करना होगा.

इस चरण के लिए स्टार्टर कोड, एक बुनियादी सीआरएम जोड़ता है. इसमें एजेंट के लिए, चल रही सभी बातचीत की थ्रेड की सूची होती है. आइए, उस सीआरएम को देखें और जानें कि किन बातचीत पर लाइव एजेंट को ध्यान देने की ज़रूरत पड़ सकती है.

step-2 डायरेक्ट्री पर जाएं और ऐप्लिकेशन को फिर से डिप्लॉय करें, जैसा कि आपने पिछले चरण में किया था.

ऐप्लिकेशन को डिप्लॉय करने पर, आपको टारगेट यूआरएल दिखता है. पिछले चरण में शुरू की गई बातचीत की थ्रेड की लिस्टिंग देखने के लिए, ब्राउज़र में इस यूआरएल पर जाएं. फ़िलहाल, बातचीत की स्थिति "बॉट मैनेज कर रहा है" है, क्योंकि इस बातचीत में एजेंट की ओर से, एचओटीएच बॉट जवाब दे रहा है.

8f624e9befb8e827.png

चैट में शामिल हों बटन दिखता है, लेकिन अभी कुछ नहीं होता. इस इंटरफ़ेस से यह भी पता नहीं चलता कि उपयोगकर्ता को लाइव एजेंट से बात करनी है या नहीं.

Business Messages, लाइव एजेंट से अनुरोध करने वाला इवेंट उपलब्ध कराता है. इससे पता चलता है कि उपयोगकर्ता लाइव एजेंट से कब बात करना चाहता है. यूज़र इंटरफ़ेस (यूआई) में उस स्थिति को शामिल करने के लिए, आपको उसका ट्रैक रखना होगा.

index.js में कॉलबैक के तरीके को देखें. TODO टिप्पणी से पता चलता है कि आपको लाइव एजेंट के लिए उपयोगकर्ता के अनुरोध को कहां पकड़ना है और थ्रेड की स्थिति को अपडेट करना है.

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

मौजूदा बातचीत की थ्रेड को लोड करने और उसकी स्थिति को QUEUED_THREAD_STATE पर अपडेट करने के लिए, आपको libs/datastore_utils.js में दिए गए तरीकों का इस्तेमाल करना होगा.

अगर आपको यह नहीं पता कि क्या करना है, तो समस्या हल करने के तरीके देखें. स्टार्टर कोड में हर चरण के नीचे एक solutions डायरेक्ट्री होती है, जिसमें आपको कुछ कोड पूरा करना होता है. इन डायरेक्ट्री में, दिए गए चरण के लिए पूरे ऐप्लिकेशन की कॉपी होती है.

लागू करने की प्रोसेस पूरी करने और ऐप्लिकेशन को फिर से डिप्लॉय करने के बाद, लाइव एजेंट से संपर्क करने के लिए, अपने मोबाइल डिवाइस पर बातचीत में मौजूद ओवरफ़्लो मेन्यू का इस्तेमाल करें.

e58d2b77e9c64492.png

अब सीआरएम पर वापस जाने पर, आपको बातचीत की थ्रेड में एक नोट दिखेगा. इसमें, "लाइव एजेंट का अनुरोध किया गया" लिखा होगा. इस उपयोगकर्ता को किसी व्यक्ति की मदद चाहिए! बटन को काम करने के लिए, आपको joinConversation एंडपॉइंट लागू करना होगा.

/joinConversation के लिए, स्टब किए गए तरीके में दूसरी TODO टिप्पणी ढूंढें.

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

आपको थ्रेड की स्थिति को फिर से अपडेट करना होगा. इस बार, आपको इसे LIVE_AGENT_THREAD_STATE पर सेट करना होगा. इसके अलावा, REPRESENTATIVE_JOINED इवेंट पोस्ट करने के लिए, आपको Business Messages API के conversations.events.create तरीके का इस्तेमाल करना होगा.

अनुरोध पेलोड बनाने के लिए, आपको नीचे दी गई टेबल में बताए गए फ़ील्ड सेट करने होंगे:

फ़ील्ड का नाम

सलाह

parent

इसे 'conversations/{conversationId}' पर सेट करें.

eventId

इवेंट के लिए अपना रैंडम आईडी जनरेट करें.

auth

दिए गए initCredentials तरीके का इस्तेमाल करें.

resource

यह इवेंट का मुख्य हिस्सा है. आपको eventType और प्रतिनिधि सेट करना चाहिए.

मदद पाने के लिए, बनाने के तरीके का रेफ़रंस पेज या इवेंट का रेफ़रंस पेज देखें.

लागू करने के बाद, ऐप्लिकेशन को फिर से डिप्लॉय करें और चैट में शामिल हों बटन पर क्लिक करें. चैट में शामिल हो गए डायलॉग दिखेगा. साथ ही, चैट की स्थिति "लाइव चैट" में बदल जाएगी. अगर आपने मोबाइल डिवाइस पर बातचीत देखी, तो आपको चैट में एक नोट दिखेगा. इसमें लिखा होगा कि आपका लाइव एजेंट शामिल हो गया है.

बधाई हो! अगले चरण में, हम यह देखेंगे कि आपके लाइव एजेंट को आपके उपयोगकर्ता से बात करने के लिए कैसे जोड़ा जा सकता है.

4. लाइव एजेंट के तौर पर मैसेज भेजना

बातचीत में शामिल होने के बाद, लाइव एजेंट के तौर पर कुछ मैसेज भेजें.

step-3 डायरेक्ट्री पर जाएं और ऐप्लिकेशन को फिर से डिप्लॉय करें. सीआरएम में, पिछले चरण में बनाई गई बातचीत की थ्रेड पर क्लिक करें. अब आपको चैट का बुनियादी इंटरफ़ेस दिखेगा. यहां से, उपयोगकर्ता के मैसेज रीयल-टाइम में देखे जा सकते हैं.

46dd083f08f43961.png

हालांकि, एजेंट के तौर पर मैसेज भेजने की सुविधा अब भी लागू नहीं की गई है. आपको इस चरण में यह काम पूरा करना होगा.

routes/index.js फ़ाइल खोलें और नए जोड़े गए तीन एंडपॉइंट देखें:

  • /messages: messages.ejs व्यू फ़ाइल को ब्राउज़र में रेंडर करता है. इंडेक्स से किसी बातचीत की थ्रेड पर क्लिक करने पर, आपको इनमें से किसी एक पेज पर ले जाया जाता है.
  • /retrieveMessages: किसी थ्रेड के मैसेज का कॉन्टेंट दिखाता है. साथ ही, बातचीत में मौजूद सभी मैसेज की फ़ॉर्मैट की गई सूची दिखाता है. मैसेज पेज, समय-समय पर इस एंडपॉइंट को कॉल करता है, ताकि नए मैसेज दिखाए जा सकें.
  • /sendMessage: लाइव एजेंट से उपयोगकर्ता को मैसेज भेजता है. मैसेज पेज पर, 'भेजें' पर क्लिक करने पर, यह कॉल किया जाता है. फ़िलहाल, इसे लागू नहीं किया गया है.

अब, storeAndSendResponse के मौजूदा तरीके पर एक नज़र डालें:

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

इकोह बॉट से जवाब भेजने के लिए, वेबहुक पहले से ही इस तरीके का इस्तेमाल करता है. यह तरीका, बातचीत के लिए आने वाले मैसेज के डेटा को सबसे पहले Cloud Datastore ऑब्जेक्ट में सेव करता है. इसके बाद, यह जवाब का मैसेज भेजता है. यह मैसेज ऑब्जेक्ट क्या बनाता है, इस पर ध्यान दें. खास तौर पर, प्रतिनिधि टाइप पर ध्यान दें.

अब, /sendMessage एंडपॉइंट को खुद लागू करें. ज़्यादातर काम करने के लिए, यहां मौजूद storeAndSendResponse तरीके का इस्तेमाल किया जा सकता है. ध्यान रखें कि आपने सही प्रतिनिधि को सेट किया हो.

इसके बाद, ऐप्लिकेशन को फिर से डिप्लॉय करें और सीआरएम में अपनी बातचीत पर वापस जाएं. अब आपको चैट के इतिहास में अपने मैसेज दिखेंगे. आपको अपने मोबाइल टेस्टिंग डिवाइस पर, अपने एजेंट के मैसेज भी दिखेंगे.

49aca3df6b196c50.png

आगे बढ़ने से पहले, पक्का करें कि आपको नए एंडपॉइंट के काम करने का तरीका पता हो. अगले चरण में, आपको बातचीत छोड़ने के लिए अपना एंडपॉइंट जोड़ना होगा.

5. बातचीत छोड़ना

उपयोगकर्ता के सवालों के जवाब देने के बाद, हो सकता है कि आप बातचीत छोड़ना चाहें और उपयोगकर्ता को फिर से बॉट से बात करने दें. Business Messages में, इस बदलाव का सिग्नल REPRESENTATIVE_LEFT इवेंट से मिलता है.

step-4 डायरेक्ट्री पर जाएं, ऐप्लिकेशन को फिर से डिप्लॉय करें, और बातचीत की थ्रेड पर वापस जाएं. अब थ्रेड में सबसे नीचे, बातचीत बंद करें और छोड़ें लिंक मौजूद है. यह लिंक अभी काम नहीं करता, क्योंकि leaveConversation एंडपॉइंट लागू नहीं किया गया है.

ef4ad8107c3fff2.png

index.js फ़ाइल देखें. 'अभी नहीं' वाली एक टिप्पणी है, जिसमें आपको नया leaveConversation एंडपॉइंट बनाने का निर्देश दिया गया है.

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

इसे लागू करने के लिए, आपको अब तक कोडलैब से जो कुछ भी सीखा है उसे एक साथ रखना होगा. इस एंडपॉइंट को ये काम करने चाहिए:

  • थ्रेड को BOT_THREAD_STATE पर अपडेट करें.
  • REPRESENTATIVE_LEFT इवेंट भेजें.
  • उपयोगकर्ता को यह बताने के लिए कि वह एचओटीएसपी बॉट से बात कर रहा है, बातचीत में मैसेज भेजें. storeAndSendResponse वाला तरीका इस्तेमाल करें. याद रखें कि प्रतिनिधि का नाम फिर से BOT हो गया है.

आखिरी चरण में, उपयोगकर्ता को बातचीत की स्थिति के बारे में जानकारी मिलती है. जब कोई प्रतिनिधि चैट छोड़ता है, तो उपयोगकर्ता को एक इवेंट दिखता है. हालांकि, यह ज़रूरी नहीं है कि उसे पता हो कि वह फिर से इको बॉट से बात कर रहा है. सीधे बॉट से मैसेज भेजने पर, उपयोगकर्ता को भ्रम की स्थिति से बचाया जा सकता है और उसका अनुभव बेहतर बनाया जा सकता है.

अब बॉट काम कर रहा है, इसलिए आपका लाइव एजेंट किसी दूसरी बातचीत में शामिल हो सकता है. सैंपल कोड और सीआरएम को जितना चाहें उतना आज़माएं. अपने कारोबार के लिए, लाइव एजेंट से कॉल ट्रांसफ़र करने के कुछ अलग आइडिया आज़माएं और देखें कि आपको क्या नतीजे मिलते हैं.

6. आखिर में खास जानकारी

लाइव एजेंट को ट्रांसफ़र करने से जुड़ा कोडलैब पूरा करने के लिए बधाई!

आपने एक ऐसा एजेंट बनाया है जो लाइव एजेंट ट्रांसफ़र को शुरू से लेकर आखिर तक मैनेज कर सकता है. आपने Cloud Datastore की मदद से, बातचीत की स्थिति को ट्रैक करने का एक तरीका भी जाना है.

लाइव एजेंट को ट्रांसफ़र करने की सुविधा की मदद से, सामान्य अनुरोधों को बॉट को सौंपा जा सकता है. इस दौरान, लाइव एजेंट ज़्यादा मुश्किल अनुरोधों को मैनेज करते हैं. उपयोगकर्ताओं को पसंद के मुताबिक और काम के नए अनुभव से ज़्यादा संतुष्टि मिलेगी. इससे, आपके कारोबार पर वापस आने और अपने दोस्तों को आपके कारोबार का सुझाव देने की संभावना बढ़ेगी.

आगे क्या करना है?

इनमें से कुछ कोडलैब देखें:

इसके बारे में और पढ़ें

रेफ़रंस दस्तावेज़