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

1. מבוא

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

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

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

ב-Codelab הזה תלמדו איך להשתמש בכל האפשרויות של התכונה 'העברה לנציג תמיכה'.

מה תפַתחו

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

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

מה תלמדו

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

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

מה תצטרכו

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

2. יצירת בוט Echo

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

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

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

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

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

בואו נסתכל על המבנה של קוד לתחילת הדרך שבו תשתמשו במהלך ה-Codelab.

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

• ‫bin: בספרייה הזו נמצא סקריפט ההפעלה www שמגדיר את השרת.
• ‫libs: בספרייה הזו יש datastore_util.js, שמכילה שיטות נוחות לקריאה מ-Cloud Datastore ולכתיבה ל-Cloud Datastore. אתם לא צריכים להבין איך הקובץ הזה עובד. פשוט שימו לב לשיטות הזמינות ולמה שהן עושות.
• ‫resources: מכיל את המפתח של חשבון השירות כקובץ בשם credentials.json.
• ‫routes: הקובץ 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 שלכם, על ידי הגדרת מזהה הפרויקט שבו השתמשתם כדי להירשם ל-APIs.

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.

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

ניהול שיחה עם בוט האקו

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

שולחים כמה הודעות כדי ליצור אינטראקציה עם הסוכן. בממשק הצ'אט עם AI מועתק רק מה שאומרים – חוויית המשתמש לא מאוד שימושית. הלוואי שהייתה דרך לדבר עם אדם אמיתי!

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

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

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

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

מחפשים את התגובה השנייה של TODO בשיטה עם ה-stub של /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.

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

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

אפשר להיעזר בדף העזר של ה-method ליצירה או בדף העזר של האירועים.

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

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

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

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

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

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. סיכום

כל הכבוד, סיימתם את ה-Codelab בנושא העברה לנציג אנושי!

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

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

מה השלב הבא?

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

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

קריאה נוספת

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

מאמרי עזרה

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