הטמעה של מודולים ומחברים של ממשק משתמש

‫Agent Assist מספק קבוצה של מודולים מוכנים מראש של רכיבי ממשק משתמש שניתנים להתאמה אישית, שאפשר להשתמש בהם כדי לשלב את התכונות של Agent Assist בממשק המשתמש שלכם. אתם יכולים להטמיע את המודולים בכל אפליקציית אינטרנט כדי להציג לסוכנים שלכם הצעות של Agent Assist. הוראות ספציפיות להטמעת מודולים ב-LivePerson מופיעות במדריך של LivePerson.

תכונות של Agent Assist

אלה התכונות של Agent Assist שאפשר להטמיע כרכיבי מודול בממשק המשתמש.

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

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

הטמעה של מודולים בממשק המשתמש

יש שתי גישות עיקריות לשילוב מודולים של Agent Assist בממשק המשתמש:

  • מאגר (מומלץ): כל התכונות שנבחרו של Agent Assist מוצגות בחלונית אחת יעילה.
  • רכיבים נפרדים: מאפשר לייבא תכונות ספציפיות בנפרד אם רוצים למקם אותן באזורים שונים בשולחן העבודה של הסוכן.

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

אפשר להשתמש בשתי הגישות בכל מערכת, אבל Agent Assist מספק רק שילובים של מודולי ממשק משתמש בקוד פתוח עבור Genesys Cloud,‏ LivePerson,‏ Twilio ו-Salesforce. כדי לשלב מודולים של ממשק משתמש עם מערכת סוכנים אחרת, צריך ליצור שילוב משלכם. מומלץ להשתמש בגישת מאגר התגים גרסה 2 לרוב התכונות. אם יש לכם מקום, אתם יכולים גם להטמיע רכיבים בודדים, כמו תשובות מהירות.

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

גרסאות של קבצים

כדי לאחזר את הגרסה האחרונה של קובץ gstatic, מציינים את הגרסה האחרונה:

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v2/container.js"></script>

אפשר לאחזר גרסה יציבה ספציפית של קובץ gstatic על ידי ציון הגרסה המדויקת:

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v2.7/container.js"></script>

הגרסאות האחרונות: 

      Container: v1.16 // Legacy
      Container: v2.7
      Common: v1.14
      Generative knowledge assist: v2.10
      Smart reply: v1.4
      Summarization: v1.3
      Transcript: v1.4
      Genesys Cloud: v1.1

מאגר

הקונטיינר הוא רכיב יחיד שמציג את התכונות של Agent Assist שבחרתם בחלונית מאוחדת אחת. אנחנו ממליצים להשתמש בContainer V2 כמעט בכל שילוב.

מאתחלים את רכיב הקונטיינר:

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v2/container.js"></script>

שם תג האלמנט:

    <agent-assist-ui-modules-v2>

אתחול לדוגמה:

    const uiModulesEl = document.createElement('agent-assist-ui-modules-v2');
    uiModulesEl.setAttribute('use-configured-features', 'true');
    hostElement.appendChild(uiModulesEl);

מידע נוסף מופיע בדף התיעוד של Container V2 API.

Container V1 (Legacy)

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

מאתחלים את הרכיב Container V1:

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v1/container.js"></script>

שם תג האלמנט:

    <agent-assist-ui-modules>

מידע נוסף מופיע בדף התיעוד של Container V1 API.

רכיבים נפרדים

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

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

הטמעה של מחבר מודול ממשק המשתמש

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

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v1/common.js"></script>

שיטות:

    constructor(): void;
    init(config: ConnectorConfig): void;
    disconnect(): void;
    setAuthToken(token: string): void;

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

interface ConnectorConfig {
  /** Communication mode for the UI modules application. */
  channel: 'chat' | 'voice';

  /** Agent desktop to use. */
  agentDesktop: 'LivePerson' | 'GenesysCloud' | 'SalesForce' | 'GenesysEngageWwe' | 'Custom';

  /** Optional desktop source for metric tracking. */
  agentDesktopSource?: string;

  /** Conversation profile name to use. */
  conversationProfileName: string;

  /** API Connector config. */
  apiConfig: {
    /**
     * Authentication token to attach to outgoing requests. Should be a valid
     * OAuth token for Dialogflow API, or any other token for custom API
     * endpoints.
     */
    authToken: string;

    /**
     * Specifies a custom proxy server to call instead of calling the Dialogflow
     * API directly.
     */
    customApiEndpoint?: string;

    /** API key to use. */
    apiKey?: string;

    /**
     * Additional HTTP headers to include in the Dialogflow/proxy server API
     * request.
     */
    headers?: Array;
  }

  /** Event-based connector config. Required for voice/omnichannel conversations and some features of chat conversations. */
  eventBasedConfig?: {
    /** Transport protocol to use for updates. Defaults to 'websocket'. */
    transport?: string;

    /** Event-based library to use. */
    library?: 'SocketIo';

    /** Endpoint to which the connection will be established. */
    notifierServerEndpoint: string;

    /** Additional Socket.io connect options. */
    socketIoConnectOpts?: any;

    /** Options to retry initial Socket.io connection in case of failure. */
    backOffOpts?: {
      initialDelay: number;
      maxDelay: number;
      maxAttempts: number;
      connectionTimeout: number;
    };
  }

}

דוגמה ליצירת מופע:

const connector = new UiModulesConnector();

connector.init({
  channel: 'chat',
  agentDesktop: 'Custom',
  conversationProfileName: 'projects/my-project/locations/global/conversationProfiles/123',
  apiConfig: {
    authToken: 'abc123',
    customApiEndpoint: 'https://my-dialogflow-proxy-server.com',
  },
  eventBasedConfig: {
    notifierServerEndpoint: 'https://my-notifier-server-endpoint.com',
    transport: 'websocket',
    library: 'SocketIo',
  }
});

כתב ויתור בנושא מחירים

אם משתמשים במודולים של ממשק המשתמש, יש עלות שקשורה לשירותים הבסיסיים, כולל: