ווידג'ט לאתר

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

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

דיאגרמת ארכיטקטורה

מגבלות

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

הגדרת הווידג'ט לאתר

כדי להטמיע את הווידג'ט באתר:

  1. לוחצים על פריסה בחלק העליון של הכלי ליצירת סוכנים.
  2. לוחצים על יצירת ערוץ או על ערוץ חדש.
  3. בוחרים בסוג הערוץ ווידג'ט לאתר.
  4. מזינים שם לערוץ.
  5. בוחרים או יוצרים גרסה של אפליקציית סוכן.
  6. מגדירים העדפות אחרות, כמו ערכת הצבעים וסוג החוויה (צ'אט, שיחה או שילוב של שניהם).
  7. לוחצים על יצירת ערוץ כדי ליצור את קוד הפריסה.
  8. מוסיפים את קוד ההטמעה לקוד ה-HTML של האתר.
  9. מגדירים אימות למשתמשי הקצה. אם משתמשים בקוד ההטמעה ללא שינוי בלי להגדיר אימות, מוצגת בווידג'ט אזהרה. פרטים על האפשרויות וההגדרה מופיעים בקטע הגדרת אימות.

הטמעת הווידג'ט באתר

כדי להוסיף את הווידג'ט לאתר, צריך להוסיף את קטעי ה-HTML הבאים.

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

כדי לתמוך בפריסות רספונסיביות, אפשר גם לטעון את chat-messenger-layout.css. קובץ chat-messenger-layout.css משמש לעיצוב רספונסיבי ולגלילה של חלון הצ'אט פנימה והחוצה כשמשתמשים ב-render-mode="slide-in" או ב-render-mode="slide-over". התג הזה מעצב את body, ולכן הוא עשוי להשפיע על האתר שלכם. לכן, אתם יכולים לבחור שלא לטעון את chat-messenger-layout.css, או להעתיק את התוכן שלו ולשלב אותו ב-CSS שלכם.

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

בקטע <header>:

<header>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script defer src="https://www.gstatic.com/ces-console/fast/chat-messenger/prod/v1/chat-messenger.js"></script>

  <!-- Chat Messenger CSS -->
  <link rel="stylesheet" href="https://www.gstatic.com/ces-console/fast/chat-messenger/prod/v1/themes/chat-messenger-default.css">

  <!-- Optional responsive styling  -->
  <!-- <link rel="stylesheet" href="https://www.gstatic.com/ces-console/fast/chat-messenger/prod/v1/themes/chat-messenger-layout.css"> -->

  <!-- CSS customization -->
  <style>
    chat-messenger {
      z-index: 999;
      position: fixed;
      <!-- Your CSS customization goes here if needed -->
    }
  </style>
</header>

בקטע <body>:


<body>
  <!-- Your website's main content goes here -->

  <script>
    window.addEventListener("chat-messenger-loaded", () => {
      chatSdk.registerContext(
        chatSdk.prebuilts.ces.createContext({
          deploymentName: "projects/YOUR_PROJECT_ID/locations/YOUR_REGION/apps/YOUR_APP_ID/deployments/YOUR_DEPLOYMENT_ID",
          tokenBroker: {
            enableTokenBroker: true,
            // If you enabled reCAPTCHA for the token broker, set enableRecaptcha to true.
            // enableRecaptcha: true,
          },
          // Automatically prompt the agent to start the conversation with a greeting.
          enableWelcomeEvent: true,
        }),
      );
    });
  </script>

  <!-- Messenger component -->
  <chat-messenger
    language-code="en"
    max-query-length="-1">
    <chat-messenger-chat-bubble
      chat-title="${your-chat-title}">
    </chat-messenger-chat-bubble>
  </chat-messenger>

  <!-- Page content continues -->
</body>

התחלת השיחה באופן אוטומטי

כברירת מחדל, ווידג'ט הצ'אט מחכה שהמשתמש ישלח את ההודעה הראשונה. כדי להנחות את הנציג להתחיל את השיחה באופן אוטומטי עם ברכה, מגדירים את enableWelcomeEvent: true בפונקציה chatSdk.prebuilts.ces.createContext.

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

שיקולי אבטחה

כשמטמיעים את הווידג'ט כרכיב מותאם אישית (<chat-messenger>) ישירות באתר, הווידג'ט פועל בshadow DOM בדף המארח. כברירת מחדל, הוא לא אוכף ארגז חול קפדני (כמו iframe).

כי הווידג'ט משתף את מקור החלון עם האפליקציה:

  • גישה ל-Shared Storage: לכל סקריפט שפועל ברכיב המותאם אישית של הווידג'ט יש גישה ל-window.sessionStorage ול-window.localStorage של הדף המארח. זה כולל טוקנים לאימות או נתוני סשן רגישים שמאוחסנים בווידג'ט עצמו.
  • Cross-Site Scripting (XSS): אם קוד הרכיב המותאם אישית או מטען הייעודי של תוכן עשיר מכילים קלט לא מחוטא, אפשר לנצל אותם כדי להריץ JavaScript שרירותי בהקשר של האפליקציה הראשית.

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

  1. ניקוי קוד מותאם אישית: חשוב לוודא שכל קוד ה-JavaScript וה-HTML המותאם אישית שמשמש ברכיבים מותאמים אישית או במטענים ייעודיים (payloads) עובר ניקוי קפדני.
  2. אימות קלט: צריך להתייחס לכל הנתונים שמועברים לווידג'ט ממקורות חיצוניים (כולל תשובות של סוכנים) כאל נתונים לא מהימנים.
  3. בידוד של רכיבים: אם דרישות האבטחה שלכם מחייבות בידוד קפדני בין ווידג'ט הצ'אט לבין הנתונים של האפליקציה, אתם צריכים להטמיע ארגז חול משלכם (לדוגמה, לעטוף את רכיב הווידג'ט במאגר שאתם שולטים בו ומבודדים אותו).

הגדרת העברה לסוכן אנושי

לפני שמגדירים את הווידג'ט, צריך לוודא שהמשאבים הנדרשים נוצרו ושהפריסה של WebChat Proxy הושלמה.

  1. הגדרת מספר להעברת שיחה לטיפול ברמה גבוהה יותר.
    1. יוצרים משאב PhoneNumber לפרויקט.
      1. צריך להשתמש בפרופיל שיחה תקין שהוגדר לאפליקציית הנציג.
      2. משייכים את פרופיל השיחה למספר הטלפון כדי לאפשר למערכת לטפל בהעברה לנציג אנושי.
    2. פועלים לפי ההוראות להגדרה של WebChat Proxy.

  2. הגדרת לקוח לצ'אט באתר:

    1. מגדירים את המאפיין מ-WebChat Proxy כדי להפעיל את התכונה 'העברה לשידור חי'. קטע קוד לדוגמה:

      <chat-messenger service='{"name":"ces","deployment-id":"projects/YOUR_PROJECT_ID/locations/YOUR_REGION/apps/YOUR_APP_ID/deployments/YOUR_DEPLOYMENT_ID"}'
  liveHandoff="true"
escalationNumber="projects/YOUR_PROJECT_ID/locations/global/phoneNumbers/YOUR_PHONE_NUMBER_ID"
  url-allowlist="*"
>
  </chat-messenger>

התאמה אישית של HTML

אתם יכולים להתאים אישית היבטים שונים של אופן ההצגה וההתנהגות של תיבת הדו-שיח של הצ'אט. רכיב ה-HTML‏ chat-messenger ו-chat-messenger-container כולל את המאפיינים הבאים:

מאפיין שיוך רכיבים ערך (אופציונלי) אפקט
שירות chat-messenger שם השירות הנדרש לשירות קצה עורפי מקושר.
רשימת כתובות URL מותרות chat-messenger * (רשימה מופרדת בפסיקים של דומיינים של תמונות
logging-level chat-messenger ניפוי באגים <OMIT>
enable-audio-input-only chat-messenger-container מצב קולי בלבד
start-with-recording chat-messenger-container נדרש מצב אודיו בלבד. מצב שיחה קולית בלבד מתחיל ברגע שרכיב הצ'אט-הודעות-הקונטיינר מוצג
enable-audio-input chat-messenger-container הוספת כפתור שמאפשר צ'אט מרובה מצבים
enable-file-upload chat-messenger-container הפעלת העלאות של תמונות
bot-writing-image chat-messenger-container מחרוזת כתובת ה-URL של התמונה שמוצגת בזמן שהבוט 'חושב'
chat-title-icon chat-messenger-container מחרוזת כתובת ה-URL של התמונה שמוצגת בחלק העליון של הצ'אט (תמונת מותג)
chat-title chat-messenger-container מחרוזת הטקסט של הכותרת של הצ'אט
render-mode chat-messenger מחרוזת (slide-in או slide-over) מצב העיבוד של תיבת הדו-שיח של הצ'אט ביחס לשאר הדף. האפשרויות הן slide-over או slide-in. אם לא מציינים מיקום, יכול להיות שהלקוח יציין אותו. נדרשים סגנונות כדי לתמוך במצב רינדור. אפשר להשתמש ב-chat-messenger-layout.css כנקודת השוואה.

התאמה אישית של CSS

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

טוקנים של צבעים

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

מאפיין (property) תיאור עיצוב בהיר שמוגדר כברירת מחדל עיצוב כהה שמוגדר כברירת מחדל
קונטיינרים / משטחים
--chat-messenger-color--surface צבע הרקע הראשי של גוף הצ'אט ואזור הכותרת התחתונה. #F8FAFD ‪#1B1B1B
--chat-messenger-color--surface-container צבע הרקע של מאגרי הווידג'טים (לדוגמה, כרטיסי מוצרים וקרוסלות) שמוטמעים בתוך הצ'אט. #FFFFFF #131314
--chat-messenger-color--surface-container-high רקע עם הדגשה גבוהה לאלמנטים בווידג'טים (לדוגמה, שדות קלט) #F0F4F9 #1E1F20
מותג / הדגשה
--chat-messenger-color--primary הצבע הראשי של המותג משמש למילויים מודגשים ולכפתורים ראשיים. #303030 #E3E3E3
--chat-messenger-color--primary-container צבע רקע בולט לרכיבים מרכזיים כמו בועות של הודעות למשתמשים. #E9EEF6 #282A2C
--chat-messenger-color--secondary הצבע של רכיבים אינטראקטיביים משניים, כמו הכפתור 'שליחה' או כפתורים טונאליים. #DDE3EA #333537
טקסט וסמלים
--chat-messenger-color--on-surface הצבע הראשי של הטקסט והסמלים שמוצגים על רקעים סטנדרטיים של משטחים. #1F1F1F #E3E3E3
--chat-messenger-color--on-surface-variant צבע עם פחות הדגשה לטקסט משני ולסמלים דקורטיביים. #444746 #C4C7C5
--chat-messenger-color--on-primary הצבע של הטקסט והסמלים שמוצבים מעל הרקעים הראשיים של המותג. #F2F2F2 #303030
--chat-messenger-color--on-primary-container הצבע של הטקסט והסמלים שמוצבים מעל הרקעים של הרכיב הראשי. #1F1F1F #E3E3E3
--chat-messenger-color--on-secondary הצבע של הטקסט והסמלים שמוצבים מעל רקעים משניים של המותג. #444746 #C4C7C5
מדינות
--chat-messenger-color--state-layer-on-surface שכבת-העל השקופה שמשמשת לציון מצבי ריחוף או בחירה בממשקים רגילים. הצבע של הרכיבים המושבתים. #1F1F1F 8% #E3E3E3 8%
--chat-messenger-color--state-layer-on-primary שכבת-העל השקופה שמשמשת למצבי אינטראקציה מעל רכיבים בצבע הראשי. #FFFFFF 8% #062E6F 8%
--chat-messenger-color--state-layer-on-secondary השכבה השקופה למחצה שמשמשת למצבי אינטראקציה מעל רכיבים בצבע משני. #1F1F1F 8% #E3E3E3 8%
--chat-messenger-color--state-on-surface-mute הצבע של טקסט וסמלים מושבתים. #444746 (38%) ‎#C4C7C5 (38%)
כלי
--chat-messenger-color--outline הצבע של גבולות כלליים, קווים מפרידים ומתארים דקורטיביים. #C4C7C5 #444746
--chat-messenger-color--outline-variant צבע לגבולות עדינים (לדוגמה, המסגרת החיצונית של הווידג'טים) ‫#747775 ב-16% ‫#8E918F ב-16%
--chat-messenger-color--outline-active צבע הגבול של שדות קלט ותפריטים נפתחים כשהם במיקוד או פעילים. #747775 #8E918F
--chat-messenger-color--error צבע בולט שמשמש למילוי, לסמלים ולטקסט, ומצביע על דחיפות. #B3261E #F2B8B5
--chat-messenger-color--error-container צבע מילוי הרקע של באנרים של שגיאות או של מאגרי התראות אינטראקטיביים. #F9DEDC #8C1D18
--chat-messenger-color--on-error-container טקסט וסמלים שמוצבים על רקע של מאגר שגיאות. #8C1D18 #F9DEDC
--chat-messenger-color--link הצבע שבו מוצגים היפר-קישורים שאפשר ללחוץ עליהם בהודעות או בתיאורים. #0B57D0 #A8C7FA

אסימוני צורה וגובה

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

מאפיין (property) תיאור ברירת מחדל
--chat-messenger-shape--corner-value-small רדיוס הפינות של רכיבים קטנים שמוטמעים בווידג'טים (לדוגמה, תמונות ממוזערות של מוצרים) ‫8px
--chat-messenger-shape--corner-value-medium רדיוס הפינות של רכיבים מוטמעים בווידג'טים (לדוגמה, שדות קלט, תמונות) ‫16px
--chat-messenger-shape--corner-value-large רדיוס הפינות של קונטיינרים מוטמעים בווידג'טים (לדוגמה, כרטיסי קרוסלה, כרטיסי פעולות מהירות) 20 פיקסלים
--chat-messenger-shape--corner-value-extra-large רדיוס הפינות של חלון הצ'אט הראשי ושל מאגרי הווידג'טים. 28px
--chat-messenger-shape--corner-fully-rounded משמש לכפתורים ולרכיבים אינטראקטיביים בצורת גלולה כדי להבטיח קצה מעוגל לחלוטין. ‫100px
--chat-messenger-elevation הצללה של תיבה שמוחלת על רכיבים צפים ועל רכיב הצ'אט הראשי. 0 1px 2px 0 rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15)

טוקנים של טיפוגרפיה

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

מאפיין (property) שימוש מיועד ברירת מחדל
--chat-messenger-font-family משפחת הגופנים הראשית Google Sans
כותרת גדולה כותרות בולטות
--chat-messenger-typescale--title-large-font-size ‫18px
--chat-messenger-typescale--title-large-font-weight 400
--chat-messenger-typescale--title-large-line-height 24px
--chat-messenger-typescale--title-large-letter-spacing 0
כותרת בגודל בינוני כותרות של קטעים בווידג'טים.
--chat-messenger-typescale--title-medium-font-size ‫16px
--chat-messenger-typescale--title-medium-font-weight 500
--chat-messenger-typescale--title-medium-line-height 24px
--chat-messenger-typescale--title-medium-letter-spacing 0
כותרת קטנה
--chat-messenger-typescale--title-small-font-size כותרות משנה או כותרות בכרטיסים קטנים יותר. ‫14px
--chat-messenger-typescale--title-small-font-weight 500
--chat-messenger-typescale--title-small-line-height 20 פיקסלים
--chat-messenger-typescale--title-small-letter-spacing 0
Body large תיאורים ארוכים.
--chat-messenger-typescale--body-large-font-size ‫16px
--chat-messenger-typescale--body-large-font-weight 400
--chat-messenger-typescale--body-large-line-height 24px
--chat-messenger-typescale--body-large-letter-spacing 0
Body medium טקסט סטנדרטי בממשק המשתמש
--chat-messenger-typescale--body-medium-font-size ‫14px
--chat-messenger-typescale--body-medium-font-weight 400
--chat-messenger-typescale--body-medium-line-height 20 פיקסלים
--chat-messenger-typescale--body-medium-letter-spacing 0
Body small מטא-נתונים ותיאורים משניים.
--chat-messenger-typescale--body-small-font-size ‫12px
--chat-messenger-typescale--body-small-font-weight 400
--chat-messenger-typescale--body-small-line-height ‫16px
--chat-messenger-typescale--body-small-letter-spacing 0.1
תווית גדולה טקסט בתוך לחצנים וצ'יפים של פעולות ראשיות.
--chat-messenger-typescale--label-large-font-size ‫14px
--chat-messenger-typescale--label-large-font-weight 500
--chat-messenger-typescale--label-large-line-height 20 פיקסלים
--chat-messenger-typescale--label-large-letter-spacing 0
תווית אמצעי הגעה לאתר טקסט של כפתור משני ותוויות של שדות
--chat-messenger-typescale--label-medium-font-size ‫12px
--chat-messenger-typescale--label-medium-font-weight 500
--chat-messenger-typescale--label-medium-line-height ‫16px
--chat-messenger-typescale--label-medium-letter-spacing 0.1
תווית קטנה תוויות מיקרו וטקסט בתג
--chat-messenger-typescale--label-small-font-size ‫11px
--chat-messenger-typescale--label-small-font-weight 500
--chat-messenger-typescale--label-small-line-height ‫16px
--chat-messenger-typescale--label-small-letter-spacing 0.1

טוקנים של ריווח

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

מאפיין (property) ברירת מחדל
--chat-messenger-spacing--half 4 פיקסלים
--chat-messenger-spacing--one ‫8px
--chat-messenger-spacing--one-and-half ‫12px
--chat-messenger-spacing--two ‫16px
--chat-messenger-spacing--two-and-half 20 פיקסלים
--chat-messenger-spacing--three 24px
--chat-messenger-spacing--three-and-half 28px
--chat-messenger-spacing--four ‫32px

אירועי JavaScript

מערכת Messenger מפעילה מגוון אירועים שאפשר ליצור עבורם פונקציות event listener. יעד האירוע של האירועים האלה הוא הרכיב chat-messenger.

כדי להוסיף רכיב event listener לרכיב chat-messenger, מוסיפים את קוד ה-JavaScript הבא, כאשר event-type הוא אחד משמות האירועים שמתוארים בקטע הזה


const chatMessenger = document.querySelector('chat-messenger');
chatMessenger.addEventListener('event-type', function (event) {
  // Handle event
  ...
});

סוגי האירועים הנתמכים:

  • ‫chat-messenger-loaded: האירוע הזה מופעל כשהרכיב chat-messenger נטען ומאותחל באופן מלא.

  • chat-messenger-close

  • ‫chat-messenger-error: האירוע הזה מתרחש כשסוכן CES שולח קוד סטטוס של שגיאה. מבנה האירוע נראה כך

    eventId= `chat-messenger-error-v2`
event.details {
  message: string;
  code: number | undefined;
  status: number | string;
}

  • df-update-cart-count: האירוע הזה מתרחש כשפעולות כמו 'הוספה לעגלת קניות', 'שינוי כמות הפריטים' ו'מחיקת פריט' מתבצעות ברכיבי התוכן העשיר product_carousel, product_detail ו-product_comparison. מבנה האירוע נראה כך

    {
  "detail": {
    "count": <cart_item_count>,
  }
}

פונקציות JavaScript

רכיב chat-messenger מספק פונקציות שאפשר להפעיל כדי להשפיע על ההתנהגות שלו.

renderCustomEvent

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

לדוגמה:

const chatMessenger = document.querySelector('chat-messenger');
chatMessenger.renderCustomText('Custom text');

renderCustomCard

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

לדוגמה:

const chatMessenger = document.querySelector('chat-messenger');
const payload = [
  {
    "type": "info",
    "title": "Info item title",
    "subtitle": "Info item subtitle",
    "image": {
      "src": {
        "rawUrl": "https://example.com/images/logo.png"
      }
    },
    "actionLink": "https://example.com"
  }];
chatMessenger.renderCustomCard(payload);

הגדרת אימות

כל בקשות ה-API שווידג'ט האינטרנט שולח לשירותי הבק-אנד של Google חייבות להיות מאומתות. הפעולה הזו מתבצעת באמצעות אסימון גישה לטווח קצר מסוג OAuth 2.0.

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

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

הגדרת ברוקר של טוקנים

ברוקר אסימונים הוא שירות אינטרנט שפועל ב Google Cloud פרויקט שלכם ויוצר אסימון גישה בשם חשבון שירות שבבעלותכם. ווידג'ט האינטרנט יכול להפעיל באופן אוטומטי את כתובת ה-URL של ברוקר האסימונים בתחילת השיחה כדי לקבל אסימון חדש לשימוש בתקשורת עם CX Agent Studio API.

יש שתי דרכים להגדיר ברוקר של טוקנים: שמתארח ב-Google או באירוח עצמי.

שמתארח ב-Google

משתמשים בטוקן ברוקר ש-Google מספקת כדי לאפשר גישה ציבורית לווידג'ט של הצ'אט:

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

אירוח עצמי

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

  • יוצרים חשבון שירות בפרויקט ומעניקים לו את התפקיד 'לקוח של חבילת Customer Engagement Suite'.
  • פורסים פונקציה של Cloud Run Functions עם קוד לדוגמה של ברוקר אסימונים שאנחנו מספקים.

הוראות מפורטות זמינות במאגר הקוד הפתוח.

הגדרת OAuth2

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

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

אלה השלבים העיקריים שצריך לבצע:

  • במסוף Google Cloud , עוברים אל Google Auth Platform ובוחרים באפשרות Clients.
  • לוחצים על Create Client.
  • בוחרים באפשרות Web application (אפליקציית אינטרנט) כסוג הלקוח.
  • מזינים שם ללקוח החדש.
  • מוסיפים את כתובת ה-URL של האתר גם ל'מקורות מורשים של JavaScript' וגם ל'כתובות URI מורשות להפניה אוטומטית'.
  • לוחצים על יצירה וממתינים 5 דקות לפני שממשיכים.

אחרי שמבצעים את השלבים, מקבלים Client-ID בפורמט הבא:

123456789012-abcdefghijklmnopqrstuvwxyz.apps.googleusercontent.com

צריך לספק את הערך הזה במאפיין oauth-client-id של רכיב האינטרנט chat-messenger.

יצירת API משלכם לאימות

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

מידע על השימוש ב-CX Agent Studio API זמין במאמר בנושא גישה ל-API.