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

1. מבוא

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

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

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

ב-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. יצירת הד בוט

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

קבלת קוד לתחילת הדרך

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

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 ואת כל השיטות המסייעות שלו. זה הקובץ העיקרי שאיתו עובדים ומוסיפים לו.
• תצוגות מפורטות: הספרייה הזו מכילה קובצי תבנית 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 של הדוגמה. לאחר מכן, מגדירים את מזהה הפרויקט ששימש לרישום באמצעות ממשקי ה-API בכלי של gcloud כך שישתמש בפרויקט ב-Google Cloud.

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.

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

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

פותחים את הנציג ב-Play 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.
      }
    }
  });
...
});

כדי לטעון את שרשור השיחה הנוכחי ולעדכן את המצב שלו לQUEUED_THREAD_STATE, צריך להשתמש בשיטות שבכתובת libs/datastore_utils.js.

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

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

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

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

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

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

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

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

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

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

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

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

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

פותחים את הקובץ 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) {
...
}

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

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

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

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

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

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

עוברים לספרייה step-4, פורסים מחדש את האפליקציה וחוזרים לשרשור השיחה. בתחתית השרשור יש את הקישור סגירה ועזיבת השיחה. הקישור הזה לא פועל עדיין כי נקודת הקצה 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 עד עכשיו. נקודת הקצה הזו צריכה לבצע את הפעולות הבאות:

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

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

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

6. סיכום

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

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

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

מה השלב הבא?

כדאי לעיין בחלק מה-Codelabs הבאים:

• קנייה של איסוף אונליין בחנות – חלק 1
• קנייה של איסוף אונליין בחנות – חלק 2

קריאה נוספת

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

מסמכי עזר

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