النقل المباشر للوكيل

1. مقدمة

53003251caaf2be5.png 6717b85f57d859d3.png

تاريخ آخر تعديل: 2021-08-23

نقل المحادثة إلى موظّف دعم مباشر باستخدام ميزة "الرسائل التجارية"

تتيح ميزة "نقل المحادثة إلى موظف دعم" في "الرسائل التجارية" لوكيلك بدء محادثة كبرنامج آلي والتبديل إلى موظف دعم (ممثل بشري) في منتصف المحادثة. يمكن أن يتعامل برنامج الدردشة الآلي مع الأسئلة الشائعة، مثل ساعات العمل، بينما يمكن أن يقدّم موظف الدعم المباشر تجربة مخصّصة مع إمكانية الوصول بشكل أكبر إلى سياق المستخدم. عندما يكون الانتقال بين هاتين التجربتين سلسًا، يحصل المستخدمون على إجابات عن أسئلتهم بسرعة ودقة، ما يؤدي إلى ارتفاع معدّل التفاعل المتكرّر وزيادة رضا العملاء.

يعلّمك هذا الدرس التطبيقي حول الترميز كيفية الاستفادة الكاملة من ميزة نقل المحادثة إلى موظف دعم مباشر.

ما ستنشئه

في هذا الدرس التطبيقي حول الترميز، ستنشئ ويب هوك للوكيل يمكنه إرسال أحداث نقل المحادثة إلى موظّف دعم يقدّم خدمة مباشرة وتلقّيها. ستستخدم واجهة مستخدم أساسية يوفّرها الرمز الأوّلي لاختبار ما أنشأته.

49aca3df6b196c50.png

ما ستتعلمه

  • كيفية تخزين حالة المحادثة وإدارتها
  • كيفية استخدام الرسائل التجارية لإرسال أحداث نقل المحادثة إلى موظّف دعم يقدّم خدمة مباشرة
  • كيفية إعداد رابط لصفحة ويب وواجهة مستخدم أساسية للانضمام إلى المحادثات كوكيل
  • أفضل الممارسات لاستخدام واجهة برمجة تطبيقات "الرسائل التجارية"

يركّز هذا الدرس التطبيقي حول الترميز على استخدام واجهة برمجة تطبيقات الرسائل التجارية لتنفيذ عملية نقل المحادثة إلى موظّف دعم يقدّم خدمة مباشرة. يمكنك الاطّلاع على الرمز الأوّلي لكل مرحلة، ولكن عليك تنفيذ الرمز البرمجي المتعلّق بـ "الرسائل التجارية" فقط.

المتطلبات

  • وكيل "الرسائل التجارية"، بما في ذلك مفتاح حساب الخدمة يمكنك إنشاء وكيل باتّباع دليل إنشاء وكيل.
  • إعداد Cloud Datastore صالح مرتبط بمشروع Google Cloud Platform (GCP) الخاص ببرنامجك يمكنك استخدام البدء السريع في Cloud Datastore لإعداد ذلك. لست بحاجة إلى معرفة كيفية استخدام Cloud Datastore.
  • جهاز كمبيوتر مثبَّت عليه Google Cloud SDK وNode.js (الإصدار 10 أو إصدار أحدث)
  • جهاز Android (يعمل بالإصدار 5 أو الإصدارات الأحدث) أو جهاز iOS لاختبار تجربة المستخدم
  • خبرة في برمجة تطبيقات الويب ستكتب كمية صغيرة من رمز Javascript البرمجي وقد تحتاج إلى تصحيح الأخطاء في ما تكتبه.

2. إنشاء روبوت محاكاة

في هذه الخطوة، ستنشئ نموذجًا أساسيًا للروبوت يُعرف باسم "روبوت الصدى". يتلقّى برنامج المحادثة هذا رسائل المستخدمين ويسجّلها في سلسلة محادثات في Cloud Datastore، ثم "يردّد" رسالة المستخدم من خلال الرد بالمحتوى نفسه. بعد توفّر بنية أساسية لبرنامج التتبُّع وتسجيل البيانات، يمكنك إضافة المزيد من الميزات لإنشاء عملية نقل كاملة إلى وكيل مباشر في الخطوات اللاحقة.

الحصول على الرمز الأوّلي

في نافذة Terminal، استنسِخ رمز أوّلي لميزة "نقل المحادثة إلى موظّف دعم يقدّم خدمة مباشرة" إلى دليل العمل الخاص بمشاريعك باستخدام الأمر التالي:

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

فهم الرمز الأوّلي

لنلقِ نظرة على بنية الرمز الأولي الذي ستعمل عليه طوال الدروس التطبيقية.

انتقِل إلى الدليل step-1 واطّلِع على محتواه. ويتضمّن العناصر التالية:

  • bin: يحتوي هذا الدليل على النص البرمجي لبدء الويب الذي يعمل على إعداد الخادم وضبطه.
  • libs: يحتوي هذا الدليل على datastore_util.js الذي يتضمّن طرقًا سهلة للقراءة والكتابة من Cloud Datastore. لست بحاجة إلى معرفة طريقة عمل هذا الملف. ما عليك سوى تدوين الطرق المتاحة ووظائفها.
  • الموارد: يحتوي هذا الملف على مفتاح حساب الخدمة كملف باسم credentials.json.
  • routes: يحتوي ملف index.js على رمز ربط الويب وجميع طرق المساعدة الخاصة به. هذا هو الملف الرئيسي الذي ستعمل عليه وتضيف إليه.
  • views: يحتوي هذا الدليل على ملفات نماذج EJS لعناصر واجهة المستخدم. سيحتوي على المزيد من الملفات في الخطوات اللاحقة.
  • app.js وapp.yaml وpackage.json: تعمل هذه الملفات على ضبط التطبيق وتبعياته.

قبل النشر، نزِّل مفتاح حساب الخدمة على Google Cloud Platform وانسخ ملف بيانات اعتماد JSON إلى كل دليل موارد في نموذج الرمز البرمجي. كرِّر هذه الخطوة لكل خطوة من خطوات الدرس العملي.

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

نشر الرمز الأوّلي

في الوحدة الطرفية، انتقِل إلى دليل step-1 الخاص بالنموذج. بعد ذلك، اضبط أداة gcloud لاستخدام مشروعك على Google Cloud من خلال ضبط رقم تعريف المشروع الذي استخدمته للتسجيل في واجهات برمجة التطبيقات.

gcloud config set project <PROJECT_ID>

لنشر التطبيق، شغِّل الأمر التالي:

gcloud app deploy

دوِّن عنوان URL للتطبيق الذي تم نشره في ناتج الأمر الأخير:

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

يحتوي الرمز الأوّلي الذي تم نشره للتو على تطبيق ويب مع ويب هوك لتلقّي الرسائل من "الرسائل التجارية". يعيد التطبيق الرسائل إلى المستخدم ويسجّل سلاسل الرسائل في Cloud Datastore.

ضبط إعدادات الوكيل

انتقِل إلى صفحة "إعدادات الحساب" في Business Communications Developer Console واضبط عنوان URL الخاص بـ ويب هوك على عنوان URL الخاص بتطبيقك الذي تم تفعيله. على سبيل المثال، https://PROJECT_ID.appspot.com/callback/.

بعد ذلك، في صفحة "معلومات الوكيل"، اضبط نوعَي التفاعل الأساسي والثانوي على "برنامج آلي" و"موظف دعم" على التوالي.

db0cca5b74f999ad.png

إجراء محادثة مع روبوت الردّ التلقائي

افتح وكيلك في Play Console. ستظهر لك صفحة نظرة عامة تتيح لك مراجعة تفاصيل برنامجك. انسخ عنوان URL لاختبار الوكيل الذي يتطابق مع جهازك الجوّال الاختباري. استخدِم عنوان URL هذا على جهازك الجوّال لتشغيل واجهة المحادثة الخاصة بالوكيل.

536313929e5c0b3e.png

تفاعَل مع الوكيل من خلال إرسال بضع رسائل. لا ينسخ السطح الحواري سوى ما تقوله، ما يقدّم تجربة مستخدم غير مفيدة. يا ليت كان بإمكاننا التحدث إلى شخص حقيقي!

3- الانضمام إلى المحادثة

لنلقِ نظرة الآن على المحادثة من منظور موظف الدعم المباشر. بصفتك وكيلًا مباشرًا، عليك معرفة بعض المعلومات عن المحادثة قبل الانضمام إليها، مثل معرّف المحادثة. من المفيد أيضًا معرفة ما إذا كان المستخدم قد طلب التحدث مع أحد موظفي الدعم مباشرةً. في هذه الخطوة، ستستخدم صفحة أساسية لنظام إدارة علاقات العملاء (CRM) لعرض هذه المعلومات والانضمام إلى المحادثة كوكيل مباشر.

تضيف التعليمات البرمجية الأولية لهذه الخطوة نظامًا أساسيًا لإدارة علاقات العملاء (CRM) يسرد جميع سلاسل المحادثات الجارية مع الموظف. لنلقِ نظرة على نظام إدارة علاقات العملاء هذا لمعرفة المحادثات التي قد تتطلّب اهتمامًا من أحد موظفي الدعم المباشر.

انتقِل إلى الدليل step-2 وأعِد نشر التطبيق كما فعلت في الخطوة السابقة.

عند نشر التطبيق، سيظهر لك عنوان URL مستهدف. انتقِل إلى عنوان URL هذا في متصفّح للاطّلاع على قائمة تتضمّن سلسلة المحادثات التي بدأتها في الخطوة السابقة. حالة المحادثة حاليًا هي "يديرها برنامج" لأنّ برنامج الردّ التلقائي يعمل كممثل لموظف الدعم في هذه المحادثة.

8f624e9befb8e827.png

يظهر زر الانضمام إلى المحادثة ولكنّه لا ينفّذ أي إجراء بعد. لا يمكنك أيضًا معرفة ما إذا كان المستخدم يريد التحدث إلى موظف دعم مباشر من خلال هذه الواجهة.

توفّر "الرسائل التجارية" حدث طلب موظّف دعم يقدّم خدمة مباشرة يشير إلى الوقت الذي يريد فيه المستخدم التحدث إلى موظّف دعم يقدّم خدمة مباشرة. عليك تتبُّع هذه الحالة لعرضها في واجهة المستخدم.

اطّلِع على طريقة رد الاتصال في 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.
      }
    }
  });
...
});

عليك استخدام الطرق في libs/datastore_utils.js لتحميل سلسلة المحادثات الحالية وتعديل حالتها إلى QUEUED_THREAD_STATE.

إذا لم تكن متأكدًا من الإجراء الذي يجب اتّخاذه، يمكنك إلقاء نظرة على الحلول. يتضمّن الرمز الأولي دليلاً solutions ضمن كل خطوة تحتاج فيها إلى إكمال بعض الرموز. تحتوي هذه الدلائل على نسخة من التطبيق بأكمله مع التنفيذ الكامل للخطوة المحدّدة.

بعد إكمال عملية التنفيذ وإعادة نشر التطبيق، استخدِم القائمة الكاملة في المحادثة على جهازك الجوّال لطلب التحدث مع موظف دعم يقدّم خدمة مباشرة.

e58d2b77e9c64492.png

الآن، إذا رجعت إلى نظام إدارة علاقات العملاء، من المفترض أن تظهر لك ملاحظة في سلسلة محادثاتك تقول "تم طلب وكيل مباشر". يحتاج هذا المستخدم إلى بعض المساعدة من شخص حقيقي. عليك تنفيذ نقطة النهاية joinConversation لتفعيل الزر.

ابحث عن التعليق TODO الآخر في الدالة البديلة لـ /joinConversation.

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. بالإضافة إلى ذلك، عليك استخدام طريقة conversations.events.create في Business Messages API لنشر حدث REPRESENTATIVE_JOINED.

لإنشاء حمولة الطلب، عليك ضبط الحقول الموضّحة في الجدول التالي:

اسم الحقل

تلميح

parent

اضبط القيمة على "conversations/{conversationId}".

eventId

أنشئ رقم تعريف عشوائي خاصًا بك للحدث.

auth

استخدِم طريقة initCredentials المقدَّمة.

resource

هذا هو نص الحدث نفسه. يجب ضبط eventType وrepresentative.

للحصول على مساعدة، يمكنك الاطّلاع على صفحة المرجع الخاصة بطريقة الإنشاء أو صفحة المرجع الخاصة بالأحداث.

عند الانتهاء من عملية التنفيذ، أعِد نشر التطبيق وانقر على الزر الانضمام إلى المحادثة. يظهر مربع الحوار انضممت إلى المحادثة، وتتغيّر حالة المحادثة إلى "محادثة مباشرة". إذا اطّلعت على المحادثة على جهازك الجوّال، ستظهر لك ملاحظة في المحادثة تفيد بأنّ موظف الدعم المباشر قد انضمّ إليها.

تهانينا! في الخطوة التالية، سنستعرض كيفية جعل الوكيل المباشر يتحدث مع المستخدم.

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- مغادرة المحادثة

بعد مساعدتك للمستخدم في الإجابة عن أسئلته، يمكنك مغادرة المحادثة والسماح للمستخدم بالتحدّث إلى البوت مرة أخرى. في "الرسائل التجارية"، يتم الإشارة إلى هذا التغيير من خلال حدث 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.

توضّح الخطوة الأخيرة حالة المحادثة للمستخدم. يظهر للمستخدم حدث عندما يغادر أحد الممثّلين المحادثة، ولكن لن يعرف بالضرورة أنّه يتحدث مع روبوت الصدى مرة أخرى. من خلال إرسال رسالة مباشرة من برنامج التتبُّع، يمكنك تقليل ارتباك المستخدم وتحسين التجربة.

بعد أن يتولّى البوت هذه المهام، يمكن لموظف الدعم الانضمام إلى محادثة أخرى. يمكنك تجربة الرمز النموذجي ونظام إدارة علاقات العملاء (CRM) بالقدر الذي تريده. جرِّب بعض الأفكار المختلفة التي لديك بشأن تجربة نقل المحادثة إلى وكيل مباشر في نشاطك التجاري، واطّلِع على النتائج.

6. ملخص

تهانينا على إكمال تجربة الترميز الخاصة بنقل المحادثة إلى وكيل مباشر.

لقد أنشأت وكيلًا يمكنه التعامل مع عمليات النقل إلى موظف دعم مباشر من البداية إلى النهاية. تعرّفت أيضًا على إحدى طرق تتبُّع حالة المحادثة باستخدام Cloud Datastore.

من خلال ميزة "نقل المحادثة إلى موظّف دعم"، يمكنك ترك الطلبات الشائعة للبرنامج الآلي، بينما يتولّى موظّفو الدعم المباشر الردّ على الاستفسارات الأكثر تعقيدًا. سيكون المستخدمون أكثر رضًا عن التجربة الجديدة المخصّصة والمفيدة، ما يزيد من احتمالية عودتهم واقتراح نشاطك التجاري على أصدقائهم.

ما هي الخطوات التالية؟

اطّلِع على بعض دروس الترميز التطبيقية هذه:

Further reading

المستندات المرجعية