שילוב של Voice עם Twilio Flex

ארכיטקטורה לשילוב של Agent Assist ו-Twilio Flex עם Salesforce

שילוב Voice הזה משתמש בשילוב Twilio Open CTI כדי להוסיף מוקד טלפוני של Twilio Flex למופע שלכם ב-Salesforce.

Agent Assist משתמש בזרם המדיה מהשיחה ב-Twilio Flex כדי לספק הצעות לסוכנים ב-Salesforce Lightning Service Console.

לפני שמתחילים

כדי לשלב מודולים של ממשק המשתמש של Agent Assist עם Salesforce, צריך גישה למקורות המידע הבאים:

  • Node.js

    פועלים לפי הוראות ההתקנה המומלצות למערכת ההפעלה שלכם.

  • ‫Salesforce CLI

    פועלים לפי הוראות ההתקנה המומלצות למערכת ההפעלה שלכם.

  • ‫Google Cloud CLI

    מתקינים את הפקודה gcloud לפי ההוראות ומבצעים אימות באמצעות gcloud auth login.

  • Salesforce

    נכנסים לכתובת ה-URL של המכונה או לדף הכניסה של Salesforce ורושמים את הפרטים הבאים:

    • כתובת ה-URL של הדומיין שלי ב-Salesforce. כדי למצוא את כתובת ה-URL של הדומיין שלי:
      1. עוברים לסרגל התפריטים > תפריט הגדרה.
      2. לוחצים על הגדרה.
      3. בתיבה חיפוש מהיר, מזינים הדומיין שלי. שם הדומיין הוא בפורמט הבא: MY-DOMAIN-NAME.develop.my.salesforce.com.
    • מזהה הארגון שלכם ב-Salesforce. כדי למצוא את מזהה הארגון, פועלים לפי השלבים הבאים:
      1. עוברים לסרגל התפריטים > תפריט הגדרה.
      2. לוחצים על הגדרה.
      3. בתיבה Quick Find, מזינים Company Information. הערה: בדקנו את שלבי השילוב האלה רק עם Salesforce Developer Edition. אם אתם משתמשים במהדורה אחרת, יכול להיות שתיתקלו בהבדלים ברישיונות לתכונות ובממשק של Salesforce.

  • הקצה העורפי של השילוב של Agent Assist

    1. פועלים לפי ההוראות כדי להגדיר את השילוב.
    2. לפני שמריצים את סקריפט הפריסה, מגדירים את משתני הסביבה הבאים באמצעות deploy.sh או בקובץ .env בשורש הפרויקט:
      • AUTH_OPTION: צריך להגדיר את הערך הזה ל-SalesforceLWC.
      • ‫SALESFORCE_DOMAIN: שם דומיין דומה ל-YOUR_SUBDOMAIN.develop.lightning.force.com. הערך הזה מצוין בדרישות המוקדמות של Salesforce. הערה: אסור לכלול את התוכן הבא: https://.
      • ‫SALESFORCE_ORGANIZATION_ID: הערך הזה מצוין בדרישה המוקדמת של Salesforce.
      • APP_AUTH_OPTION: צריך להגדיר את הערך הזה ל-Twilio.
      • ‫TWILIO_ACCOUNT_SID: מגדירים את הערך הזה ל-Twilio Account SID.

שלב 1: הגדרת Twilio Flex

‫Twilio Flex משמש כסופטפון בשילוב הזה. אתם יכולים להיכנס למסוף Twilio כדי להגדיר חשבון Flex. הוראות מפורטות ליצירת חשבון Flex זמינות בדף ההגדרה של Twilio.

התקנת תוסף מחבר SIPREC

התוסף SIPREC connector מאפשר לחשבון Twilio Flex שלכם ליצור פיצולים (forks) של SIPREC של מדיה של שיחות קוליות אל Agent Assist. כדי להתקין את התוסף SIPREC Connector:

  1. עוברים אל Twilio Home (דף הבית של Twilio) > Marketplace (המרקטפלייס) > Catalog (קטלוג) > Twilio >‏ Siprec Connector (מחבר Siprec).
  2. לוחצים על התקנה > תיבת הסימון אישור התנאים וההגבלות > התקנה.
  3. בכרטיסייה Configure, מגדירים את הפלאגין עם הפרטים הבאים:
    • שם ייחודי: SipRec1
    • שרת הקלטת סשנים: 
      sip:+<GTP-provisioned-phone-number>@216.239.36.145:5672;transport=tls;secure=true;edge=umatilla
    • פרטים נוספים על הקצאת מספר GTP זמינים במסמכי התיעוד בנושא שילוב טלפוניה. אפשר להתעלם מהשלבים של הגדרת ה-SBC ואימותו, כי הם כבר הושלמו עבור מחבר Twilio Siprec.
  4. עוברים אל Twilio Home > Functions and Assets.
    • אם האפשרות Functions and Assets לא מוצגת בסרגל הצד, צריך להצמיד אותה מתוך Explore Products.
  5. לוחצים על יצירת שירות.
  6. נותנים לשירות החדש את השם ui-connector-auth.
  7. בכלי העריכה שמופיע, לוחצים על הוספה + > הוספת פונקציה.
  8. נותנים לפונקציה את השם conversation-name.
  9. לוחצים על ומשנים את הרשאות הגישה של הפונקציה לגלוי לכולם.
  10. מעתיקים ומדביקים את כל התוכן של ui-connector-auth.js ממאגר GitHub אל העורך.
  11. לוחצים על Save.
  12. לוחצים על Deploy All (פריסת הכול).

הגדרת IVR באמצעות Flex Studio

ה-IVR מורכב מהגדרת זרימת שיחות פרוגרמטית באמצעות Twilio Studio כדי ליצור פיצול של סטרימינג המדיה ב-SIPREC ל-Agent Assist. הוא גם שולח בקשת HTTP POST כדי לשתף את מספר הטלפון ואת מזהה השיחה עם Agent Assist. כדי להגדיר IVR באמצעות Flex Studio, מבצעים את השלבים הבאים.

  1. עוברים אל Twilio Console.
  2. לוחצים על פיתוח > מספרי טלפון > ניהול > מספרים פעילים. צריכה להיות שורה אחת בטבלה עם מספר Twilio שמוגדר כברירת מחדל ומוקצה לחשבון Flex שלכם.
  3. בקטע Voice - Studio Workflow, לוחצים על Voice IVR.
  4. גוררים את הווידג'ט Make HTTP Request (שליחת בקשת HTTP) אל התהליך.
  5. מנתקים את הקלט של הווידג'ט SendCallToAgent מהקלט של הווידג'ט Incoming Call.
  6. מחברים את הרכיב Incoming Call (שיחה נכנסת) לקלט של הווידג'ט Make HTTP Request (שליחת בקשת HTTP).
  7. מגדירים את הווידג'ט Make HTTP Request עם הפרטים הבאים:
    • שם הווידג'ט: register_twilio
    • Request Method: POST
    • כתובת ה-URL של הבקשה: <your-ui-connector-cloud-run-url>.run.app/register-app
    • סוג התוכן: Application/JSON
    • גוף הבקשה: 
      {
"accountSid": "<yourTwilioAccountSid>",
"authToken": "<yourTwilioAccountAuthToken>"
}
  8. גוררים את הווידג'ט Run Function (הפעלת פונקציה) אל תוך התהליך.
  9. מחברים את הפלט של Success ושל Fail בווידג'ט register_twilio לקלט של הווידג'ט Run Function.
  10. יוצרים ווידג'ט עם הפרטים הבאים:
    • שם הווידג'ט: conversation_name
    • שירות: ui-connector-auth
    • סביבה: ui
    • פונקציה: conversation-name
    • פרמטרים של פונקציה:
      • ‫token: 
        {{ widgets.register_twilio.parsed.token }}
      • ‫endpoint: <your-ui-connector-cloud-run-url>.run.app/conversation-name
      • ‫phone: 
        {{ trigger.call.From | replace_first:'+','' }}
      • ‫conversationName: 
        projects/<project>/locations/<location>/conversations/TW-{{ trigger.call.From | replace_first:'+','' }}-{{ trigger.call.CallSid }}
  11. גוררים את הווידג'ט Fork Stream (פיצול עדכון תוכן) מסרגל הצד אל התהליך.
  12. מחברים את הפלט Success and Fail של הווידג'ט Make HTTP Request לקלט של הווידג'ט Fork Stream.
  13. מחברים את הצומת Next של הווידג'ט Fork Stream לווידג'ט SendCallToAgent.

  14. מגדירים את הווידג'ט Fork Stream באופן הבא:

    • Stream Action (פעולת הסטרימינג): התחלה
    • סוג מקור הנתונים: Siprec
    • שם המחבר: Siprec1
    • ‫Tracks: Both Tracks

    • פרמטרים של שידור:

      • מקרא: conversation

      • ערך:

        projects/<gcp-project-id>/conversations/TW-{{trigger.call.From | replace_first:'+','' }}-{{trigger.call.CallSid}}

  15. לוחצים על שמירה > פרסום.

פרטי החשבון

פועלים לפי השלב הזה כדי לאסוף את פרטי החשבון ב-Twilio Flex. תצטרכו את המידע הזה כדי להגדיר את Flex CTI ב-Salesforce בהמשך.

  1. עוברים אל Twilio Home (הדף הראשי של Twilio) > Account Dashboard (מרכז הבקרה של החשבון), ורושמים את הפרטים הבאים:
    • מזהה SID של החשבון
    • מספר הטלפון שלי ב-Twilio

שלב 2: הגדרת פרויקט פיתוח ב-Salesforce

כדי להתחיל לשלב מודולים של ממשק המשתמש של Agent Assist, פועלים לפי השלבים הבאים.

  1. מריצים את הקוד הבא כדי לשכפל את מאגר השילוב של Agent Assist ולפתוח את הפרויקט:

    git clone https://github.com/GoogleCloudPlatform/agent-assist-integrations
cd salesforce/aa-lwc

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

    npm run generate-static-resources
npm install

שלב 3: הגדרת סביבת Salesforce

אתם יכולים לשלב מודולים של ממשק המשתמש של Agent Assist בסביבה ספציפית, כמו סביבת ייצור או סביבת פיתוח. ב-Salesforce, הסביבות האלה נקראות ארגונים (orgs).

הגדרת הארגון באמצעות Salesforce CLI

כדי להגדיר את הארגון לשילוב של Agent Assist באמצעות Salesforce CLI, צריך לפעול לפי השלבים הבאים.

  1. מריצים את הקוד הבא ומאמתים את ה-CLI באמצעות פרטי הכניסה ל-Salesforce שבהם אתם משתמשים בדרך כלל. 
    npm run login
  2. מריצים את הקוד הבא כדי לפרוס את ה-LWC בארגון. 
    npm run deploy

שלב 4: יצירת אפליקציית לקוח חיצונית

רכיב ה-LWC של Salesforce משתמש בהרשאה באמצעות OAuth 2.0 של פרטי כניסה של לקוח כדי לאמת אתכם. אפליקציית לקוח חיצונית מאפשרת את תהליך אימות הלקוח. משתמשים בטוקן הצרכן ובסוד הצרכן של האפליקציה כדי להגדיר את Salesforce LWC לאימות משתמשים באמצעות Salesforce.

  1. עוברים לסרגל התפריטים > לתפריט הגדרה ואז לוחצים על הגדרה. בתיבה חיפוש מהיר, מקלידים מנהל אפליקציות חיצוניות ללקוח.
    1. לוחצים על External Client App Manager (ניהול אפליקציות חיצוניות ללקוח) > New External Client App (אפליקציה חדשה ללקוח חיצוני) > Create (יצירה), ואז מזינים את הפרטים הבאים.
      • שם האפליקציה של הלקוח החיצוני: lwc auth
      • שם ה-API: lwc_auth
      • אימייל ליצירת קשר: your_email@example.com
      • ‫API (הפעלת הגדרות OAuth) > הפעלת OAuth: נבחר
      • ‫API (הפעלת הגדרות OAuth) > כתובת URL של קריאה חוזרת (callback): https://login.salesforce.com/services/oauth2/callback
      • ‫API (הפעלת הגדרות OAuth) > היקפי הרשאות OAuth שנבחרו: גישה לשירות של כתובות URL של זהויות
      • API (Enable OAuth Settings) > Enable Client Credentials Flow: Selected
    2. לוחצים על יצירה.
  2. עוברים לסרגל התפריטים > לתפריט הגדרה ואז לוחצים על הגדרה. בתיבה חיפוש מהיר, מקלידים מנהל אפליקציות חיצוניות ללקוח.
    1. לוחצים על השם של אפליקציית הלקוח החיצונית > עריכה.
    2. עוברים אל OAuth Policies > OAuth Flows and External Client App Enhancements.
    3. מוודאים שהאפשרות Enable Client Credentials Flow מסומנת.
    4. בשדה Run As (הרצה בתור), מזינים את שם המשתמש שלכם להתחברות.
    5. לוחצים על Save.
  3. עוברים לסרגל התפריטים > לתפריט הגדרה ואז לוחצים על הגדרה. בתיבה חיפוש מהיר, מקלידים מנהל אפליקציות חיצוניות ללקוח.
    1. לוחצים על השם של אפליקציית הלקוח החיצונית > עריכה.
    2. עוברים אל הגדרות OAuth > הגדרות אפליקציה > מפתח וסוד צרכן.
    3. מזינים את קוד האימות שנשלח לאימייל.
    4. מעתיקים את טוקן הצרכן ואת הסוד לשימוש עם טוקן הצרכן למקום בטוח. תצטרכו אותם בשלב מאוחר יותר.

הגדרה של CORS וכללי מדיניות בנושא אבטחת תוכן

  1. עוברים לסרגל התפריטים > לתפריט הגדרה ואז לוחצים על הגדרה.
  2. בתיבה חיפוש מהיר, מזינים CORS ואז לוחצים על עריכה.
    1. בוחרים באפשרות הפעלה של CORS לנקודות קצה של OAuth.
    2. לוחצים על Save.
  3. עוברים לסרגל התפריטים > לתפריט הגדרה ואז לוחצים על הגדרה.
  4. בתיבה חיפוש מהיר, מזינים כתובות URL מהימנות ולוחצים על כתובת URL מהימנה חדשה.
  5. מזינים את הפרטים הבאים:
    • שם ה-API: ui_connector
    • כתובת URL: מזינים את כתובת ה-URL של נקודת הקצה של שירות Cloud Run של מחבר ממשק המשתמש שפרסתם באמצעות שילוב ה-Agent Assist עם הקצה העורפי. אפשר למצוא את כתובת ה-URL הזו במסוף Cloud Run. לדוגמה: https://UI_CONNECTOR_SUBDOMAIN.GCP_REGION.run.app.
    • הנחיות CSP: מסמנים את כל תיבות הסימון.
    • לוחצים על שמירה ויצירת מסנן חדש.
  6. מזינים את הפרטים הבאים:
    • שם ה-API: ui_connector_wss
    • כתובת URL: מזינים את כתובת ה-URL של נקודת הקצה של שירות Cloud Run של מחבר ממשק המשתמש שפרסתם באמצעות שילוב ה-Backend של Agent Assist. אפשר למצוא את כתובת ה-URL הזו במסוף Cloud Run. משנים את הפרוטוקול ל-wss, לתנועה של WebSockets. לדוגמה: wss://UI_CONNECTOR_SUBDOMAIN.GCP_REGION.run.app.
    • הנחיות CSP: מסמנים את כל תיבות הסימון.
    • לוחצים על שמירה ויצירת מסנן חדש.
  7. מזינים את הפרטים הבאים:
    • שם ה-API: salesforce_domain
    • כתובת URL: מזינים את כתובת ה-URL של הדומיין ב-Salesforce בפורמט הבא: https://YOUR_SUBDOMAIN.my.salesforce.com.
    • הנחיות CSP: מסמנים את כל תיבות הסימון.
    • לוחצים על שמירה ויצירת מסנן חדש.
  8. מזינים את הפרטים הבאים:
    • שם ה-API: twilio_flex
    • כתובת ה-URL: https://flex.twilio.com
    • הנחיות CSP: מסמנים את כל תיבות הסימון.
    • לוחצים על Save.

שלב 5: התקנת הפלאגין Twilio Flex CTI

‫Salesforce מספקת את Salesforce Open CTI כדי לאפשר שילוב של טלפונים רכים של צד שלישי עם מופע Salesforce.

‫Twilio Flex CTI משתמש ב-Salesforce Open CTI כדי לאפשר לכם להשתמש ב-Flex ישירות במופע של Salesforce. פועלים לפי ההוראות של Twilio כדי להגדיר את Twilio Flex CTI במופע Salesforce.

שלב 6: התקנת רכיב האינטרנט של Salesforce Lightning

כדי להשתמש בכלי העריכה של Lightning Experience כדי להוסיף את רכיב האינטרנט של Salesforce Lightning לדף אנשי הקשר שבו נפתח Twilio Flex CTI כשמתקבלת שיחה חדשה, צריך לבצע את השלבים הבאים.

  1. עוברים אל Service Console (קונסולת השירות) ובוחרים באפשרות Contacts (אנשי קשר).
  2. בוחרים רשומה של איש קשר.
  3. לוחצים על תפריט ההגדרה > עריכת הדף.
  4. לוחצים על תבנית > שינוי.
    1. בוחרים באפשרות כותרת ואז באפשרות שני אזורים שווים.
    2. לוחצים על הבא.
    3. ממפים כל אזור לאזור חדש.
    4. לוחצים על סיום.
  5. בסרגל הצד רכיבים, מעבירים את agentAssistContainerModule לסרגל הצד. הערה: הרכיב הזה סופק על ידי הפקודה npm deploy.
  6. לוחצים על הרכיב שהצבתם בשלב הקודם וממלאים את השדות בטופס באופן הבא כדי להוסיף פרטי הגדרה.
    • ‫endpoint: כתובת ה-URL של הקצה העורפי של שילוב הסוכן, כמו כתובת URL ממסוף Cloud Run, למשל: https://UI_CONNECTOR_ENDPOINT.GCP_REGION.run.app
    • ‫channel: מציינים שהשילוב הוא עבור voice.
    • ‫platform: מציינים שהפלטפורמה היא twilio.
    • ‫conversationProfile: שם המשאב של פרופיל השיחה של Agent Assist (דוגמה: projects/GCP_PROJECT_ID/locations/GCP_REGION/conversationProfiles/CONVERSATION_PROFILE_ID)
    • ‫consumerKey: טוקן הצרכן של אפליקציית הלקוח החיצונית מהשלב הקודם.
    • ‫consumerSecret: סוד הצרכן של אפליקציית הלקוח החיצונית מהשלב הקודם.
    • ‫containerHeight: הגובה של מאגר Agent Assist.

שלב 7: בודקים את השילוב

אפשר לבדוק את השילוב של Voice באמצעות שיחת ניסיון למוקד הטלפוני של Salesforce.

  1. נכנסים ל-Twilio Flex מ-Service Console.
  2. מתקשרים למספר ב-Twilio Flex. הערתם את זה בשלב 1.
  3. במסוף השירות, מאשרים את השיחה. במסך אמור להיפתח דף חדש או דף קיים של איש הקשר עם המספר שהתקשר.
  4. אם זה דף חדש של איש קשר, שומרים את איש הקשר. כשהדף של איש הקשר נטען, רכיב האינטרנט של Salesforce Lightning אמור להיטען בסרגל הצד.
  5. בודקים את שני הצדדים של השיחה כדי לוודא שהתכונות של Agent Assist פועלות כמו שהגדרתם אותן.