העברת סוכן פעיל

1. מבוא

עדכון אחרון: 23 באוגוסט 2021

העברה של נציג תמיכה אנושי באמצעות Business Messages

התכונה 'העברת נציג אנושי' ב-Business Messages מאפשרת לנציג שלכם להתחיל שיחה כבוט ולהעביר את השיחה לנציג אנושי (נציג אנושי) באמצע השיחה. הבוט יכול לטפל בשאלות נפוצות, כמו שעות פתיחה, והנציג הקבוע יכול לספק חוויה מותאמת אישית עם יותר גישה להקשר של המשתמש. כשהמעבר בין שתי האפשרויות האלה יהיה חלק, המשתמשים מקבלים תשובות לשאלות שלהם במהירות ובצורה מדויקת, וכתוצאה מכך שיעור ההתעניינות של הלקוחות בהחזרים גבוה יותר ושביעות הרצון של הלקוחות עולה.

ה-Codelab הזה מלמד איך להשתמש באופן מלא בתכונה של העברת סוכנים בזמן אמת.

מה תפַתחו

ב-Codelab הזה, ברצונך לפתח תגובה לפעולה מאתר אחר (webhook) בשביל הנציג שיוכל לשלוח ולקבל אירועי העברה בזמן אמת של נציגים. כדי לבדוק מה יצרתם, תצטרכו להשתמש בממשק משתמש בסיסי שסופק על ידי הקוד לתחילת הפעולה.

הערה: ה-Codelab הזה מניח שכבר נרשמת כשותף וקיבלת אישור מצוות התמיכה שלנו. אם עדיין לא עשית את זה, צריך להירשם באמצעות Business Messages ולהמתין לאישור לפני שמפעילים את ה-Codelab הזה.

מה תלמדו

• איך מאחסנים ומנהלים את מצב השיחה.
• איך משתמשים ב-Business Messages כדי לשלוח אירועי העברה של נציג תמיכה אנושי.
• איך מגדירים תגובה לפעולה מאתר אחר (webhook) וממשק משתמש בסיסי להצטרפות לשיחות כנציגים.
• שיטות מומלצות לשימוש ב-Business Messages API

ה-Codelab הזה מתמקד בשימוש ב-Business Message API כדי להטמיע העברה של נציגים בזמן אמת. אפשר לקרוא את הקוד לתחילת הפעולה בכל שלב, אבל צריך להטמיע רק קוד שקשור ל-Business Messages.

מה צריך להכין

• נציג של Business Messages, כולל המפתח של חשבון השירות שלכם. כדי ליצור נציג אפשר להיעזר במדריך ליצירת נציג.
• הגדרה פעילה של Cloud Datastore שמקושרת לפרויקט GCP של הסוכן. ניתן להגדיר זאת בעזרת המדריך למתחילים של Cloud Datastore. אתם לא צריכים לדעת איך משתמשים ב-Cloud Datastore.
• מחשב עם Google Cloud SDK ו-Node.js (גרסה 10 ואילך).
• מכשיר Android (בגרסה 5 ואילך) או מכשיר iOS לבדיקת חוויית המשתמש.
• ניסיון בתכנות אפליקציות אינטרנט. צריך לכתוב כמות קטנה של קוד JavaScript ויכול להיות שתצטרכו לנפות באגים במה שכותבים.

2. יצירת בוט הד

בשלב הזה תפרסו נציג בוט בסיסי שנקרא 'Echo bot'. הבוט הזה מקבל הודעות ממשתמשים, רושם אותן לשרשור שיחה ב-Cloud Datastore ואז יוצר הד. להודעה של המשתמש על ידי מענה עם אותו תוכן. אחרי שתהיה לכם תשתית בסיסית של בוט ורישום ביומן, תוכלו להוסיף אותה כדי ליצור הטמעה מלאה של העברת סוכן אנושי בשלבים הבאים.

קבלת הקוד לתחילת הפעולה

בטרמינל, משכפלים את Live Agent Transfer code Starter לספריית העבודה של הפרויקט באמצעות הפקודה הבאה:

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

הסבר על הקוד לתחילת הפעולה

בואו נבחן את המבנה של קוד לתחילת פעולה שאיתו תפעל במהלך ה-Codelab.

צריך לעבור לספרייה step-1 ולראות את התוכן שלה. היא מכילה את הרכיבים הבאים:

• bin: הספרייה הזו מכילה את הסקריפט www לתחילת פעולה שמגדיר את השרת ומגדיר אותו.
• libs: הספרייה הזו מכילה את הפקודה datastore_util.js, שמכיל שיטות נוחות לקריאה ולכתיבה מ-Cloud Datastore. אין צורך להבין איך הקובץ הזה פועל. רק חשוב לשים לב לשיטות הזמינות ולפעולות שהן עושות.
• resources: מכילה את המפתח של חשבון השירות כקובץ בשם credentials.json.
• נתיבים: הקובץ index.js מכיל את ה-webhook ואת כל שיטות העזרה שלו. זה הקובץ הראשי שאיתו תעבדי ותוסיפי אליו.
• Views: הספרייה הזו מכילה קובצי תבנית EJS של רכיבי ממשק משתמש. היא תכיל קבצים נוספים בשלבים מאוחרים יותר.
• app.js, app.yaml, package.json: הקבצים האלה מגדירים את האפליקציה ואת יחסי התלות שלה.

לפני הפריסה, צריך להוריד את המפתח לחשבון השירות של GCP ולהעתיק את קובץ פרטי הכניסה של JSON לכל ספריית משאבים בקוד לדוגמה. חוזרים על הפעולה בכל שלב ב-Codelab.

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

טיפ: אם אתם צריכים עזרה בהגדרה או בהורדה של מפתח השירות, תוכלו לעיין במדריך של Google Cloud לניהול חשבונות שירות.

פריסה של הקוד לתחילת הפעולה

בטרמינל, עוברים לספרייה step-1 של הדוגמה. לאחר מכן מגדירים את הכלי של gcloud לשימוש בפרויקט ב-Google Cloud, על ידי הגדרת מזהה הפרויקט שבו השתמשתם כדי להירשם לממשקי ה-API.

gcloud config set project <PROJECT_ID>

כדי לפרוס את האפליקציה, מריצים את הפקודה הבאה:

gcloud app deploy

שימו לב לכתובת ה-URL של האפליקציה שנפרסה בפלט של הפקודה האחרונה:

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

הקוד לתחילת הפעולה שפרסת עכשיו מכיל אפליקציית אינטרנט עם webhook, שמאפשרת לקבל הודעות מ-Business Messages. האפליקציה מחזירה הודעות למשתמש ומתעדת שרשורי הודעות ב-Cloud Datastore.

הגדרת הנציג

עוברים לדף הגדרות החשבון ב-Business Communications Developer Console ומגדירים את ה-webhook לכתובת ה-URL של האפליקציה שנפרסה. לדוגמה, https://PROJECT_ID.appspot.com/callback/.

טיפ: אם אתם צריכים רענון לגבי הגדרת התגובה לפעולה מאתר אחר (webhook). אפשר לעיין בקטע הגדרת תגובה לפעולה מאתר אחר (webhook) במדריך ההגדרה של Business Messages.

בשלב הבא, בדף המידע על הנציג צריך להגדיר את סוג האינטראקציה הראשית והמשנית בתור 'בוטים' ו'אדם אנושי', בהתאמה.

ניהול שיחה עם בוט ההד

פותחים את הנציג ב-Developer Console. בדף סקירה כללית אפשר לראות את פרטי הנציג. מעתיקים את כתובת ה-URL לבדיקה של הנציג שתואמת למכשיר הבדיקה בנייד. צריך להשתמש בכתובת ה-URL הזו בנייד כדי להפעיל את פלטפורמת השיחה של הנציג.

כדי לתקשר עם הנציג אפשר לשלוח כמה הודעות. פלטפורמת השיחה מעתיקה רק את מה שאתם אומרים, ולא מספקת חוויית משתמש יעילה במיוחד. אם רק הייתה דרך לדבר עם אדם אמיתי!

3. הצטרפות לשיחה

עכשיו נסתכל על השיחה מנקודת המבט של נציג התמיכה. כנציג/ת שירות, אתם צריכים לדעת כמה דברים על השיחה לפני ההצטרפות, כמו מזהה השיחה. כדאי גם לדעת אם המשתמש ביקש לדבר עם נציג תמיכה. בשלב הזה משתמשים בדף בסיסי של ניהול קשרי לקוחות (CRM) כדי להציג את המידע הזה ולהצטרף לשיחה כנציג/ה פעיל/ה.

הקוד לתחילת הפעולה הזה מוסיף מערכת CRM בסיסית שמציגה את כל שרשורי השיחות השוטפים של הנציג. בואו נבחן את המערכת לניהול קשרי לקוחות (CRM) כדי לראות אילו שיחות עשויות לדרוש את תשומת הלב של נציג התמיכה.

עוברים לספרייה step-2 ופורסים שוב את האפליקציה כפי שעשיתם בשלב הקודם.

כשתפרסו את האפליקציה, תוצג כתובת URL של יעד. צריך לעבור לכתובת ה-URL הזו בדפדפן כדי לראות דף עסקי עם שרשור השיחה שהתחלתם בשלב הקודם. המצב של השיחה הוא כרגע 'Bot-managed' כי בוט ההד משמש כנציג של הנציג שלנו בשיחה.

הלחצן הצטרפות לצ'אט מופיע, אבל הוא לא עושה דבר עדיין. בנוסף, אי אפשר להבין מהממשק הזה אם המשתמש רוצה לדבר עם נציג תמיכה.

התכונה Business Messages מספקת אירוע לבקשת נציג תמיכה אנושי שמציין מתי המשתמש רוצה לדבר עם נציג תמיכה. עליכם לעקוב אחרי המצב הזה כדי שהוא יופיע בממשק המשתמש.

כדאי לקרוא את שיטת הקריאה החוזרת (callback) ב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 מתחת לכל שלב שבה צריך להשלים קוד כלשהו. בספריות האלה יש עותק של כל האפליקציה עם ההטמעה המלאה של השלב הנתון.

אחרי שתשלימו את ההטמעה ותפרסו מחדש את האפליקציה, תצטרכו להשתמש באפשרויות הנוספות בשיחה בנייד כדי לבקש נציג תמיכה אנושי.

טיפ: אם האפשרות 'צ'אט עם נציג תמיכה לא מופיעה' לא מופיעה כאפשרות בתפריט האפשרויות הנוספות, צריך לוודא שלנציג הוגדר סוג אינטראקציה אנושית במסוף Business Messages.

עכשיו, כשתחזרו למערכת לניהול קשרי לקוחות (CRM), אמורה להופיע הערה בשרשור של השיחה עם הכיתוב 'נשלחה בקשה לנציג תמיכה'. המשתמש הזה צריך עזרה מאדם. צריך להטמיע את נקודת הקצה (endpoint) 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. בנוסף, כדי לפרסם אירוע REPRESENTATIVE_JOINED צריך להשתמש בשיטה conversations.events.create של Business Messages API.

כדי ליצור את המטען הייעודי (payload) של הבקשה, צריך להגדיר את השדות המפורטים בטבלה הבאה:

שם השדה	רמז
parent	מגדירים את הערך כ-'conversationId}' של השיחות.
eventId	ליצור מזהה רנדומלי משלכם לאירוע.
auth	משתמשים בשיטה initCredentials המתאימה.
resource	זהו גוף האירוע עצמו. צריך להגדיר את eventType ואת הנציג.

עיינו בדף העזר של שיטת היצירה או בדף העזר לאירועים כדי לקבל עזרה.

בסיום ההטמעה, פורסים מחדש את האפליקציה ולוחצים על הלחצן הצטרפות לצ'אט. תופיע תיבת דו-שיח עם הכיתוב הצטרפת לשיחה והסטטוס של הצ'אט ישתנה ל'צ'אט בשידור חי'. אם תסתכלו בשיחה בנייד, תראו בצ'אט הודעה שהנציג שלכם הצטרף אליה.

מעולה! בשלב הבא נראה איך ליצור קשר עם נציג תמיכה אנושי.

4. שליחת הודעות בתור נציג תמיכה אנושי

אחרי שהצטרפת לשיחה, זה הזמן לשלוח כמה הודעות בתור הנציג/ה בשידור חי.

עוברים לספרייה step-3 ופורסים מחדש את האפליקציה. במערכת לניהול קשרי לקוחות (CRM), לוחצים על שרשור השיחה מהשלב הקודם. עכשיו יוצג ממשק צ'אט בסיסי. מכאן אפשר לראות את ההודעות של המשתמש בזמן אמת.

למרות זאת, שליחת הודעה כנציג עדיין לא בוצעה. עליכם להשלים זאת בשלב הזה.

פותחים את הקובץ routes/index.js ובודקים את שלוש נקודות הקצה החדשות שנוספו:

• /messages: מקבל את קובץ התצוגה messages.ejs ומעבד אותו בדפדפן. כשלוחצים על שרשור שיחה מהאינדקס, עוברים לאחד מהדפים האלה.
• /retrieveMessages: קבלת תוכן ההודעות של שרשור ומחזירה רשימה מעוצבת של כל ההודעות בשיחה. דף ההודעות מפעיל מדי פעם את נקודת הקצה (endpoint) הזו כדי להציג את ההודעות האחרונות.
• /sendMessage: שליחת הודעה מנציג נציג תמיכה למשתמש. הדף 'הודעות' קורא לכך כשלוחצים על 'שליחה'. היא לא מוטמעת כרגע.

עכשיו נבחן את ה-method הקיים של 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) {
...
}

ה-webhook כבר משתמש בשיטה הזו כדי לשלוח תשובות מבוט ההד. השיטה הזו שומרת קודם את נתוני ההודעות הנכנסות באובייקט Cloud Datastore של השיחה. לאחר מכן, היא שולחת את הודעת התגובה. כדאי לבחון היטב את אובייקט ההודעה שנוצר, במיוחד את הסוג הייצוגי.

עכשיו אתם צריכים להטמיע את נקודת הקצה /sendMessage בעצמכם. אפשר להשתמש כאן בשיטה storeAndSendResponse הקיימת כדי לבצע את רוב העבודה. הדבר החשוב הוא לזכור להגדיר את הנציג הנכון.

אחרי שהתהליך יסתיים, תוכלו לפרוס מחדש את האפליקציה ולחזור לשיחה במערכת לניהול קשרי לקוחות (CRM). עכשיו אפשר לראות את ההודעות בהיסטוריית הצ'אט. אפשר גם לראות את ההודעות של הנציג במכשיר הבדיקה בנייד.

לפני שממשיכים, חשוב לוודא שאתם מבינים איך עובדות נקודות הקצה החדשות. בשלב הבא תוסיפו נקודת קצה (endpoint) משלכם כדי לעזוב את השיחה.

5. עזיבת השיחה

אחרי שעוזרים למשתמש בשאלות שלו, כדאי לעזוב את השיחה ולתת למשתמש לדבר שוב עם הבוט. ב-Business Messages, השינוי הזה מסומן באמצעות אירוע REPRESENTATIVE_LEFT.

עוברים לספרייה step-4, פורסים מחדש את האפליקציה וחוזרים לשרשור השיחה. בתחתית השרשור מופיע הקישור סגירה ויציאה של השיחה. הקישור הזה עדיין לא פועל כי נקודת הקצה (endpoint) leaveConversation לא הוטמעה.

מאתרים את הקובץ 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.
 */

כדי ליישם זאת, עליכם להרכיב את כל מה שלמדתם מ-Codelab עד עכשיו. נקודות הקצה (endpoint) האלה צריכות לבצע את הפעולות הבאות:

• לעדכן את השרשור לערך BOT_THREAD_STATE.
• לשלוח אירוע REPRESENTATIVE_LEFT.
• אפשר לשלוח הודעה בשיחה כדי ליידע את המשתמש שהוא מדבר עם בוט ההד. משתמשים בשיטה storeAndSendResponse. חשוב לזכור שהנציג השתנה חזרה ל-BOT.

השלב האחרון מבהיר את מצב השיחה עבור המשתמש. המשתמש רואה אירוע כשהנציג עוזב את הצ'אט, אבל הוא לא בהכרח יודע שהוא מדבר שוב עם בוט ההד. שליחת הודעה ישירות מהבוט יכולה להפחית את בלבול המשתמשים ולשפר את החוויה.

עכשיו הבוט מטפל בזה, ועכשיו אפשר להצטרף לשיחה נוספת עם נציג התמיכה שלך. נסו לשחק עם הקוד לדוגמה ועם מערכת ניהול קשרי הלקוחות (CRM) כמה שתרצו. אתם מוזמנים לנסות כמה רעיונות שונים שיש לכם לגבי חוויית ההעברה של נציג תמיכה בעסק שלכם, ותראו את הרעיונות שלכם.

6. סיכום

מזל טוב, השלמת את ה-Codelab של העברת סוכנים חיים!

יצרת נציג שמורשה לטפל בהעברות בזמן אמת עד לסיום ההעברה של נציגים. למדתם גם דרך אחת לעקוב אחרי מצב השיחה עם Cloud Datastore.

העברה של נציג תמיכה תאפשר לך להשאיר את הבקשות הנפוצות לבוט, בזמן שהנציגים הפעילים יטפלו בפניות מורכבות יותר. המשתמשים יהיו מרוצים יותר מחוויית השימוש החדשה המותאמת אישית והמועילה, מה שיגדיל את הסיכוי שהם יחזרו וימליצו על העסק שלכם לחברים.

מה השלב הבא?

התנסות בכמה מ-Codelabs האלה:

• קנייה באינטרנט לאיסוף בחנות, חלק 1
• קנייה אונליין ואיסוף בחנות, חלק 2

קריאה נוספת

• כדי להכיר את היסודות של העברת נציגים בזמן אמת, אפשר להיעזר ב-Handoff מבוט לסוכן בשידור חי מדריך.
• אם תשדרגו את ההד בוט לבוט שאלות נפוצות, תוכלו להיעזר במדריך של Dialogflow.

מסמכי עזר

• שיטה: calls.events.create
• שיטה: calls.messages.create
• משאב: אירוע
• נציג