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

1. शुरुआती जानकारी

53003251caaf2be5.png 6717b85f57d859d3.png

पिछली बार अपडेट किए जाने की तारीख: 23-08-2021

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

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

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

क्या बनाएं

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

49aca3df6b196c50.png

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

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

इस कोडलैब का मकसद, लाइव एजेंट को ट्रांसफ़र करने के लिए, Business Message 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 से पढ़ने और लिखने के आसान तरीके शामिल हैं. आपको यह समझने की ज़रूरत नहीं है कि यह फ़ाइल कैसे काम करती है. बस उपलब्ध तरीकों और उनके काम पर ध्यान दें.
  • संसाधन: इसमें आपकी सेवा खाते की कुंजी, credentials.json नाम की फ़ाइल के तौर पर शामिल होती है.
  • रूट: 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

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

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 फ़ाइल को देखें. एक TODO टिप्पणी आपको नया 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 के साथ बातचीत की स्थिति को ट्रैक करने का एक तरीका भी सीखा.

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

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

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

आगे पढ़ना

पहचान वाले दस्तावेज़