תכונות נתמכות

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

  • במחשב:

    • Chrome

    • Safari

    • Edge

  • ב-Android:

    • Chrome

    • Edge

  • ‫iOS:

    • Chrome

    • Safari

    • Edge

טריגרים פרואקטיביים

טריגרים פרואקטיביים מאפשרים להפעיל את ה-SDK לאינטרנט ולשלוח הודעה לצרכנים באופן פרואקטיבי. כדי להגדיר טריגרים יזומים לצ'אט ב-Contact Center AI Platform, עוברים אל הגדרות > צ'אט > טריגרים יזומים לצ'אט באתר.

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

מעקב אחרי משתמשים

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

אפשר לבצע אימות (עדכון המזהה) בתחילת סשן או באמצע סשן. למידע נוסף על אימות באמצע הסשן, ראו אימות באמצע הסשן באמצעות API.

מזהה

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

צריך להוסיף את המזהים במקומות הבאים:

  1. העברה אל ה-Backend ב-getAuthToken()

    function getAuthToken() {
      // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
      return fetch('/auth/token', {
        headers: {
          'Content-Type': 'application/json'
        },
        method: "POST",
        body: JSON.stringify({
          payload: {
            identifier: 'c727f2851b64b29761da170d0adee67a9a89c2d9960c8eee0ae53737413cfa4e',
            name: 'Test user',
            email: 'test@user.com',
            phone: '18008675309'
          }
        })
      }).then(function(resp) {
        return resp.json();
      });
    }
    
  2. הוספה למטען הייעודי (payload) כשמבצעים קידוד של JWT.

    const express = require('express');
    const jwt = require('jsonwebtoken');
    
    const port = process.env.PORT || 3000;
    const secret = process.env.COMPANY_SECRET || 'secret';
    
    const app = express();
    
    app.use(express.json());
    
    app.post('/auth/token', function (req, res) {
      const payload = req.body.payload;
      payload['iss'] = 'YOUR_COMPANY_NAME';
      const iat = parseInt(Date.now() / 1000, 10);
      payload['iat'] = iat;
      payload['exp'] = iat + 600;
    
      const token = jwt.sign(payload, secret, { algorithm: 'HS256' });
      res.json({ token });
    });
    
    app.listen(port, function () {
      console.log(`Listening at http://localhost:${port}`);
    });
    
  3. הוספת אפשרויות נוספות ב-authentication()

    new UJET({`
      // ...
      authenticate: function() {
        return getAuthToken().then({ token } => {
          return {
            token: token,
            user: {
              identifier: YOUR_UNIQUE_USER_ID,
              name: 'Test user', //optional,
              email: 'test@user.com', //optional,
              phone: '000000000' //optional
            }
          };
        });
      },
    })
    

העברה של צ'אטבוט חיצוני

כשמעבירים צ'אט מהנציג הווירטואלי לנציג, אפשר לשנות את הודעת הפתיחה ולהעביר את התמלילים לנציג על ידי מילוי השדה external_chat_transfer בנתונים המותאמים אישית. ‫greeting_override תומך בעיצוב Markdown.

ccaas.config({
  customData: {
    "external_chat_transfer": {
      "greeting_override": "YOUR GREETING MESSAGE."
    }
  }
"agent": {
      "name": "Agent Name",
      "avatar": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
    },
    "transcript": [
      {
        "sender": "agent",
        "timestamp": "2021-03-15 12:00:00Z",
        "content": [
          {
            "type": "text",
            "text": "Hello! How can I help you today?"
          },
          {
            "type": "buttons",
            "buttons": [
              {
                "label": "Create New Order",
                "selected": false
              },
              {
                "label": "Check Order Status",
                "selected": true
              },
              {
                "label": "Check Account Balance",
                "selected": false
              }
            ]
          }
        ]
      },
      {
        "sender": "end_user",
        "timestamp": "2021-03-15 12:00:15Z",
        "content": [
          {
            "type": "text",
            "text": "Check Order Status"
          }
        ]
      },
      {
        "sender": "agent",
        "timestamp": "2021-03-15 12:00:16Z",
        "content": [
          {
            "type": "text",
            "text": "I can help you with that, what's your order number?"
          }
        ]
      },
      {
        "sender": "end_user",
        "timestamp": "2021-03-15 12:00:20Z",
        "content": [
          {
            "type": "media",
            "media": {
              "type": "image",
              "url": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
            }
          }
        ]
      }
    ]
  }
}

שם החברה

בוחרים name מותאם אישית במקום השם מ-API של החברה.

ccaas.config({
  name: 'ACME',
})

הפניית שיחות בצ'אט

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

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

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

נקודות גישה ישירות (DAP)

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

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

  1. בפורטל של CCAI Platform, לוחצים על הגדרות > תור. אם לא רואים את תפריט ההגדרות, לוחצים על תפריט.

  2. מפעילים את האפשרות שימוש בתפריט האינטרנט ועוברים אל עריכה / תצוגה.

  3. בוחרים תור כלשהו ממבנה התורים.

    רשימת התורים והאפשרויות לרמות התמיכה.

  4. לוחצים על יצירת נקודת גישה ישירה.

  5. סוג נקודת הגישה = כללי.

    יוצרים נקודת גישה ישירה ומציינים את סוג נקודת הגישה שרוצים ליצור.

  6. בתיבת הדו-שיח, מוסיפים נתוני קלט לנקודת הגישה הישירה. שימו לב שהשדה General Access Point Label תואם ל-MenuKey שמוזכר בשלב הבא.

  7. לוחצים על יצירה.

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

ccaas.config({
  menuKey: 'vip'
})

מזהה הכרטיס

אם יש לכם כרטיס קיים לצרכן, אתם יכולים לאחזר את מזהה הכרטיס ממערכת ה-CRM ולהעביר אותו ל-SDK לאינטרנט:

retrieveTicket().then(ticket => {
  ccaas.config({ ticketId: ticket.id })
})

בחירת ערוצים באופן אוטומטי

באמצעות preferredChannel, אתם יכולים לבחור ערוץ באופן אוטומטי כשלקוח בוחר תור מסוים:

ccaas.config({
  preferredChannel: 'chat'
})

השבתת קבצים מצורפים

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

ccaas.config({
  disableAttachment: false
})

העברת נתונים בהתאמה אישית

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

אפשר להוסיף נתונים מותאמים אישית לא חתומים באמצעות הגדרות customData.

פורמט הנתונים המותאם אישית דומה לאובייקט JSON ומורכב מ-key, label ו-value.

ccaas.config({
  customData: {
    k1: {
      label: 'Version',
      value: '1.1.0'
    },
    k2: {
      label: 'Platform',
      value: navigator.platform
    }
  }
})

‫Key: מזהה ייחודי של הנתונים. בדוגמה הקודמת, k1 ו-k2 הם מפתחות.

‫Label: השם המוצג בדף ה-CRM.

‫Value: הערך של התווית

אפשר להוסיף נתונים מותאמים אישית חתומים באמצעות הגדרת signedCustomData:

ccaas.config({
  signedCustomData: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.n...."
})

‫signedCustomData הוא מחרוזת JWT עם אלגוריתם HS256.

SIGN_JWT(
  algorithm='HS256',
  secret=YOUR_COMPANY_SECRET,
  payload={
    custom_data: {
      version: {
        label: 'Version',
        value: '1.0.0'
      },
      ...
    },
    iss: 'YOUR TENANT',
    iat: NOW,
    exp: NOW + 3600,
  }
)

תמיכה בכמה שפות

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

client.getMenus(key?: string, lang?: string)

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

דוגמה:

const client = new Client({
  // ...
  lang: 'ja',
})

אפשר לגשת לאפשרות הזו באמצעות המאפיין הבא:

console.log(client.lang)

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

שפה Abbreviation
אנגלית iw
אנגלית (קנדה) en-CA
אנגלית (בריטניה) en-GB
אנגלית (אוסטרליה) en-AU
אנגלית (הודו) en-IN
ספרדית (ספרד) es
ספרדית (מקסיקו) es-MX
צרפתית (קנדה) fr-CA
גרמנית de
יפנית ja
קוריאנית ko
איטלקית it
סינית (פשוטה) zh
סינית (מסורתית) zh-Hant
שוודית sv
פורטוגזית נק'
פורטוגזית (ברזיל) pt-BR
פינית fi
נורווגית nb
דנית da
הולנדית nl
טורקית tr
וייטנאמית vi
תאית th
ערבית ar
צ'כית cs
פולנית pl
הונגרית hu
רוסית ru
הינדית הי
רומנית ro
קרואטית שעה
אוקראינית uk
טגלוג tl

מידע נוסף על תרגומים זמין בקטע התאמה אישית של הודעות ותרגומים.

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

בשלב הזה אפשר לפתוח את ממשק המשתמש האינטרנטי באופן פרוגרמטי באמצעות השיטה ccaas.start(options).

במקרים מסוימים, יכול להיות שתרצו שהלקוח ילחץ על לחצן נוסף כדי לפתוח את ממשק המשתמש של Web SDK.

דוגמה:

<button id="launcher">Click to open</button>

var ccass = new UJET({
  companyId: "YOUR_COMPANY_ID",
  host: "HOST_URL",
  authenticate: getAuthToken,
});

ccass.config({disableLauncher: true})

var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
  if (ccass.visible) {
    ccaas.hide();
    launcher.textContent = 'Click to open';
  } else {
    ccaas.show();
    launcher.textContent = 'Click to close';
  }
});

ccass.on('ready', function() {
  launcher.textContent = 'ready to talk';
});

אפשר גם לסגור את הווידג'ט בשיטה ccass.close(), ולהסיר אותו בשיטה ccass.destroy().

סגירה פרוגרמטית של ממשק האינטרנט

בשלב הזה אפשר להפעיל את פונקציית הקריאה החוזרת כשהצרכן רוצה לסגור את Web SDK.

ccass.on('visible', function(visible) {console.log(visible) })

איך מקבלים מידע על סשנים פעילים בצ'אט

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

מקרה לדוגמה:

ccass.getOngoingChat()

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

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

מעקב אחרי סטטוס הפתיחה או הסגירה בכמה כרטיסיות או חלונות

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

ccass.on('visible', (isVisible) => {
 localStorage['ujetOpen'] = isVisible ? 'yes' : 'no'
})
if (localStorage['ujetOpen'] == 'yes') {
 ccass.show()
} else {
 ccass.hide()
}

תזמון שיחה

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

תבנית

באמצעות האפשרות הזו אפשר להתאים אישית את תבנית תיבת הדו-שיח של שיתוף המסך. ברירת המחדל template היא:

<dialog open class="cobrowse-dialog">
  <h1>$title</h1>
  <div class="cobrowse-dialog_content">$content</div>
  <div class="cobrowse-dialog_footer">
    <button class="cobrowse-dialog_allow js-cobrowse-allow">$allow</button>
    <button class="cobrowse-dialog_deny js-cobrowse-deny">$deny</button>
  </div>
</dialog>

הtemplate הזה משמש ל:

  • תיבת דו-שיח לאישור השיחה שנקבעה

  • תיבת דו-שיח לאישור השלט הרחוק

  • תיבת דו-שיח לאישור גיבוי מלא של המכשיר

הפרמטרים בתבנית יוחלפו בתוכן של האפשרות messages.

confirmSessionTemplate

האפשרות הזו משמשת להתאמה אישית של תיבת הדו-שיח לאישור הפעילות.

confirmRemoteControlTemplate

האפשרות הזו משמשת להתאמה אישית של תיבת הדו-שיח לאישור השלט הרחוק.

confirmFullDeviceTemplate

האפשרות הזו משמשת להתאמה אישית של תיבת הדו-שיח לאישור מחיקה מלאה של המכשיר.

sessionControlsTemplate

האפשרות הזו משמשת להתאמה אישית של לחצן השליטה בסשן. תבנית ברירת המחדל היא:

<button class="cobrowse-end js-cobrowse-end">$end</button>

Messages

התבניות שלמעלה מכילות את משתני ההודעה הבאים:

  • $title

  • $content

  • $allow

  • $deny

המשתנים האלה יוחלפו ב:

{
  confirmSessionTitle: string;  // $title
  confirmSessionContent: string;  // $content
  confirmRemoteControlTitle: string;  // $title
  confirmRemoteControlContent: string;  // $content
  confirmFullDeviceTitle: string;  // $title
  confirmFullDeviceContent: string;  // $content
  allowText: string;  // $allow
  denyText: string;  // $deny
  endSessionText: string;  // $end
}

יש לנו הודעות מובנות לשיתוף מסך, למשל, ההודעות ללוקאל en:

{
  "confirmSessionTitle": "Screen Share Session Request",
  "confirmSessionContent": "Do you want to share your current screen with the agent?",
  "endSessionText": "End Screen Share Session",
  "confirmRemoteControlTitle": "Remote Access Request",
  "confirmRemoteControlContent": "The agent would like to have access to your currently shared screen to further assist you. Do you want to allow this?",
  "confirmFullDeviceTitle": "Screen Share Request",
  "confirmFullDeviceContent": "Do you want to share your full screen with the agent? The agent will not be able to control anything on the screen.",
  "allowText": "Allow",
  "denyText": "Deny"
}