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

1. מבוא

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

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

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

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

מה תפַתחו

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

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

מה תלמדו

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

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

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

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

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 מכיל את ה-webhook ואת כל שיטות העזר שלו. זהו הקובץ הראשי שבו תעבדו ותוסיפו אליו.
• views: הספרייה הזו מכילה קובצי תבניות EJS לרכיבי ממשק משתמש. בשלבים הבאים הוא יכיל קבצים נוספים.
• app.js, ‏ app.yaml, ‏ package.json: קובצי התצורה של האפליקציה והיחסים שלה לקבצים אחרים.

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

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.

הגדרת הסוכן

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

טיפ: אם אתם צריכים תזכורת לגבי הגדרת ה-webhook, אפשר לעיין בקטע הגדרת ה-webhook במדריך להגדרת Business Messages.

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

שיחה עם בוט של Echo

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

6. סיכום

ברכות על השלמת הקודלה בנושא העברת נציגים אנושיים בצ'אט!

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

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

מה השלב הבא?

כדאי לעיין בחלק מהקורסים הבאים ב-Codelab:

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

מקורות מידע נוספים

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

מסמכי עזרה

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