מדריך להתקנה של Web SDK

בדף הזה מוסבר איך להתקין את ה-SDK לאינטרנט של Contact Center AI Platform (CCAI Platform) ולהשתמש בו. כדי לעזור לכם להתחיל, Google ממליצה להוריד את קובצי הדוגמה של Web SDK גרסה 2 ולהשתמש בהם.

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

  1. כוללים את טוען ה-SDK לאינטרנט של פלטפורמת CCAI בלקוח האינטרנט.

    <script src="https://websdk.ujet.co/v2/loader.js"></script>

  2. מפעילים את ה-SDK לאינטרנט של פלטפורמת CCAI באמצעות COMPANY_KEY.

  3. מאתחלים את האימות באמצעות COMPANY_SECRET באמצעות קוד הקצה העורפי.

תהליך ההתקנה

תהליך ההתקנה

קדימה, מתחילים

בקטעים הבאים מוסבר איך להתחיל להשתמש ב-SDK לאינטרנט של פלטפורמת CCAI.

אתחול ה-SDK לאינטרנט

אתם יכולים להפעיל את ה-SDK לאינטרנט באמצעות מפתח החברה שלכם.

קבלת מפתח החברה

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

  1. נכנסים לפורטל של פלטפורמת CCAI באמצעות פרטי כניסה של אדמין.

  2. לוחצים על תפריט, ואז על הגדרות > הגדרות למפתחים.

  3. עוברים לחלונית Company key and secret code ושומרים את הקוד בשדה Company key.

לאחר מכן, אפשר להפעיל את ה-SDK לאינטרנט באמצעות ה-method‏ UJET(config) והאירוע ujet.on('created', function). מציינים את המארח של המכונה של פלטפורמת CCAI, לדוגמה myccaip.uc1.ccaiplatform.com.

// INITIALIZE WEB SDK
var ujet = new UJET({
  companyId: "YOUR_COMPANY_ID",
  host: "https://myccaip.uc1.ccaiplatform.com",
});

ujet.on('created', function () {
  ujet.authenticate(getAuthToken);
});

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

var ujet = new UJET({
  companyId: "YOUR_COMPANY_ID",
  authenticate: getAuthToken,
  host: "https://myccaip.uc1.ccaiplatform.com",
});

כאשר getAuthToken() היא פונקציה שקוראת למנגנון חתימה של JWT מה-backend:

function getAuthToken() {
  // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
  return fetch('/auth/token')
    .then(function(resp) {
      // { token: '....' }
      return resp.json();
    });
}

כאשר fetch() קורא למנגנון חתימה של JWT מה-backend שלכם. מידע נוסף זמין במאמר Mozilla Fetch API.

הגדרת ה-SDK לאינטרנט לגלישה משותפת

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

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

  1. כדי לקבל את הדומיין של הגלישה המשותפת ואת מפתח הרישיון של המכונה של CCAI Platform:

    1. נכנסים לפורטל של פלטפורמת CCAI באמצעות פרטי כניסה של אדמין.

    2. לוחצים על תפריט, ואז על הגדרות > הגדרות למפתחים.

    3. עוברים לחלונית גלישה משותפת ומעבירים את המתג למצב מופעל.

    4. שומרים את הערכים בשדות Co-browse Domain (דומיין לגלישה משותפת) ו-License Key (מפתח רישיון).

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

    var ujet = new UJET({
  // other options
  cobrowseOptions: {
    license: "LICENSE_KEY",
    trustedOrigins: ["CO-BROWSE_DOMAIN"],
    api: "CO-BROWSE_DOMAIN"
  },
  // other options
})

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

    • ‫LICENSE_KEY: מפתח הרישיון ששמרתם בשלב הקודם

    • ‫CO-BROWSE_DOMAIN: הדומיין לגלישה משותפת ששמרתם בשלב הקודם

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

הפעלת האימות באמצעות הסוד של החברה

הפונקציה getAuthToken() צריכה לשלוח קריאה ל-API ולקודד את המטען הייעודי (payload) באמצעות COMPANY_SECRET.

דוגמה לחתימה על JWT באמצעות ExpressJS:

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 = {}
  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(`Listing at http://localhost:${port}`)
})

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

מדיניות אבטחת תוכן (CSP)

אם לשרת הייצור יש מדיניות אבטחת תוכן, צריך להוסיף את https://websdk.ujet.co/ ל-script-src ול-frame-src.

תמיכה ב-Internet Explorer 11

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

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

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

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

  1. העברה לקצה העורפי ב-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: '1800UJETSDK'
      }
    })
  }).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(`Listing 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.

{
  "external_chat_transfer": {
    "greeting_override": "Please hold while we connect you with a human agent.",
    "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": "txt",
            "text": "Ceck Order Status"
          }
        ]
      },
      {
        "sender": "aget",
        "timestamp": "021-03-15 12:00:16Z",
        "content": [
          {
            "type": "txt",
            "text": "Ican help you with that, what's your order number?"
          }
        ]
      },
      {
        "sender": "enduser",
        "timestamp": "021-03-15 12:00:20Z",
        "content": [
          {
            "type": "mdia",
            "media": {
              "type": image",
              "url": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
            }
          }
        ]
      }
    ]
  }
}

נתונים לא חתומים בהתאמה אישית ב-Chat

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

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

var ujet = new UJET({
  // other parameters
  customData: {
    version: {
      label: 'Version',
      value: '1.1.0'
    },
    platform: {
      label: 'Platform',
      value: navigator.platform
    }
  },
});

פורמט הנתונים המותאם אישית דומה ל-JSON. כל שדה נתונים מכיל מפתח, תווית וערך. לדוגמה:

{
  "k1": {
    "label": "Version",
    "value": "1.2.3"
  },
  "k2": {
    "label": "Dashboard",
    "value": "http://example.com"
  }
}

בדוגמה הזו, k1 ו-k2 הם מפתחות. ‫label היא תווית בדף של מערכת לניהול קשרי לקוחות, ו-value הוא הערך של התווית.

מניעת הצגה של נתונים בהתאמה אישית

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

var ujet = new UJET({
  // Other parameters
});

ujet.config({
  customData: {
    version: {
      label: 'Version',
      value: '1.1.0'
      invisible_to_agent: true
    },
    platform: {
      label: 'Platform',
      value: navigator.platform
      invisible_to_agent: false
    }
  }
});

כשכוללים את המאפיין "invisible_to_agent" : true באובייקט נתונים בהתאמה אישית, ההתנהגות הצפויה היא:

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

מאפייני נתונים שמורים

אתם יכולים לשלוח מאפייני נתונים שמורים אל Contact Center AI Platform (CCAI Platform) כנתונים חתומים בהתאמה אישית בתחילת הסשן. מידע נוסף זמין במאמר שליחת מאפייני נתונים שמורים.

דוגמה למאפייני נתונים שמורים בנתונים מותאמים אישית:

  {
    "custom_data": {
      "reserved_verified_customer": {
        "label": "Verified Customer",
        "value": false,
        "type": "boolean"
      },
      "reserved_bad_actor": {
        "label": "Bad Actor",
        "value": false,
        "type": "boolean"
      },
      "reserved_repeat_customer": {
        "label": "Repeat Customer",
        "value": false,
        "type": "boolean"
      }
    }
  }

מגדירים כל ערך כ-true או כ-false.

  • ‫reserved_verified_customer: true אם לדעתך משתמש הקצה הזה הוא לקוח לגיטימי.
  • ‫reserved_bad_actor: true אם לדעתכם משתמש הקצה הזה עלול להיות גורם זדוני.
  • ‫reserved_repeat_customer: true אם קבעתם שמשתמש הקצה הזה פנה בעבר למוקד שלכם.

השבתת האפשרות לצרף קבצים

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

new UJET({
// ...
  disableAttachment: true
});

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

הסטת צ'אט

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

האפשרויות להפניית צ'אט נמצאות בפורטל של פלטפורמת CCAI, בקטע Settings>Chat>Web & mobile deflection.

הפניה לאחר שעות הפעילות

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

  1. בפורטל של CCAI Platform, בקטע Settings > Chat > Web & mobile deflection.

  2. אם האפשרות הפניה מחוץ לשעות הפעילות מושבתת, אפשר להפעיל אותה על ידי בחירה באפשרות הפניה מחוץ לשעות הפעילות.

  3. משנים את האפשרות אישור העברות כדי לאפשר העברות לתורים מחוץ לשעות הפעילות, בהתאם להתנהגות הבאה:

    • הנציגים יוכלו לראות את התורים הבאים כאפשרויות להעברה במתאם הנציג:

      • כל התורים בשעות הפעילות

      • כל התורים מחוץ לשעות הפעילות, בלי הפניה, עם נציגים מחוברים ופעילים

      • כל התורים שפועלים מחוץ לשעות הפעילות עם נציג וירטואלי שמוגדר במצב זמינות של 24 שעות

    • הנציגים לא יוכלו לראות את סוגי התורים הבאים:

      • כל התורים שמופעלת בהם הפניית שיחות מחוץ לשעות הפעילות

      • כל התורים מחוץ לשעות הפעילות עם נציג וירטואלי שהוקצה ומוגבל לשעות הפעילות של התור

הפניה במקרה של חריגה מהקיבולת

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

  1. בפורטל של Contact Center AI Platform, בקטע Settings > Chat > Web & Mobile Deflection.

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

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

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

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

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

אימייל

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

ההתנהגות הספציפית היא:

  • בנייד: כשהאפשרות להפניית אימייל מופעלת וזמן ההמתנה המשוער עומד בתנאי הסף, כשמשתמש הקצה לוחץ על האפשרות "צ'אט", הוא מופנה לאפליקציית האימייל שמוגדרת כברירת מחדל. גרסת האפליקציה וגרסת iOS או Android מוזנות באופן אוטומטי בתוכן האימייל, והנושא הוא תמיכה ב[נתיב התפריט שנבחר]. לחלופין, יכול להיות שהטופס באימייל מופעל. מידע נוסף זמין במאמר טופס אימייל משולב לערכות SDK לנייד ולאינטרנט.

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

  • המשך המתנה (באינטרנט בלבד): מאפשר למשתמש הקצה ללחוץ על אפשרות להמשיך להמתין.

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

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

התהליך

כדי להגדיר את ה-Web SDK לשיתוף מסך ולהתאים אישית את תיבות הדו-שיח להבעת הסכמה:

  1. כדי לקבל את הדומיין של הגלישה המשותפת ואת מפתח הרישיון של המכונה של CCAI Platform:

    1. נכנסים לפורטל של פלטפורמת CCAI באמצעות פרטי כניסה של אדמין.

    2. לוחצים על תפריט, ואז על הגדרות > הגדרות למפתחים.

    3. עוברים לחלונית Co-browse ומעבירים את המתג למצב מופעל.

    4. שומרים את הערכים בשדות Co-browse Domain (דומיין לגלישה משותפת) ו-License Key (מפתח רישיון).

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

    var ujet = new UJET({
  // other options
  cobrowseOptions: {
    license: "LICENSE_KEY",
    trustedOrigins: ["CO-BROWSE_DOMAIN"],
    api: "CO-BROWSE_DOMAIN"
    cobrowseRequestHtml: "COBROWSE_REQUEST_HTML",
    remoteControlHtml: "REMOTE_CONTROL_HTML",
    fullDeviceHtml: "FULL_DEVICE_HTML",
    styles: "STYLES",
    sessionControlsHtml: "SESSION_CONTROLS_HTML"
  },
  // other options
})

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

מחלקות כפתורים

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

  • ‫cobrowse-allow: כפתור שמאפשר למשתמש הקצה לאשר את הבקשה

  • ‫cobrowse-deny: כפתור שמאפשר למשתמש הקצה לדחות את הבקשה

  • ‫cobrowse-close: כפתור שמאפשר למשתמש הקצה לסגור את תיבת הדו-שיח להבעת הסכמה

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

"cobrowseOptions": {
    "license": "example_license",
    "trustedOrigins": "[https://example.com]",
    "cobrowseRequestHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n <svg width=\"14\" height=\"14842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n <li>Stop screen sharing at any time</li>\n <li>Personal info automatically hidden</li>\n  <li>Only your_company_name screens are shared</li>\n </ul>\n </div>\n <div class=\"description\">\n <svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n <span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n </span>\n </div>\n <div class=\"footer\">\n <span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9",
    "remoteControlHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n  </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n  <li>Stop screen sharing at any time</li>\n  <li>Personal info automatically hidden</li>\n <li>Only your_company_name screens are shared</li>\n</ul>\n</div>\n<div class=\"description\">\n<svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n<span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n</span>\n</div>\n<div class=\"footer\">\n<span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>",
    "fullDeviceHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n <li>Stop screen sharing at any time</li>\n <li>Personal info automatically hidden</li>\n <li>Only your_company_name screens are shared</li>\n </ul>\n </div>\n <div class=\"description\">\n <svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n <span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n </span>\n </div>\n <div class=\"footer\">\n <span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n  <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>",
    "styles": ".some-end-button {\n border-radius: 20px;\n background-color: blue;\n color: white;\n display: marquee;\n width: 20rem;\n font-size:200%;\n height: 20rem;\n }\n .custom-backdrop {\n background: rgba(0, 0, 0, 0.1);\n position: fixed;\n z-index: 2147483647;\n bottom: 0;\n top: 0;\n left: 0;\n right: 0;\n }\n .cobrowse-confirm-dialog {\n color: #232424;\n font-family:sans-serif;\n line-height:140%;\n position:fixed;\n background:white;\n border-radius:5px;\n z-index:2147483647;\n top:50px;\n left:50%;\n width:75%;\n max-width:450px;\n transform:translateX(-50%);\n box-shadow:2px 2px 30px rgb(0,0,0,0.08);\n padding: 1.5rem;\n }\n .title {\n text-align:center;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 125%;\n line-height: 25px;\n padding: 20px;\n border-radius: 5px 5px 0 0;\n }\n \n .description {\n height: 8rem;\n display: flex;\n flex-direction:column;\n justify-content: center;\n align-items: center;\n background-color: #F3F3F3;\n }\n \n #loader {\n height:4rem;\n }\n \n .footer {\n margin-top: 1rem;\n margin-bottom: 1rem;\n display: flex;\n flex-direction: column;\n justify-content: flex-start\n }\n .cobrowse-allow {\n background-color: pink;\n color: white;\n flex-grow: 2;\n height: 3rem;\n }\n #cobrowse-end-button {\n cursor: pointer;\n position: fixed;\n z-index: 2147483647;\n top: 50%;\n left: 25%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n }\n #cobrowse-end-button:hover {\n background-color: #92162D;\n }",
    "sessionControlsHtml": " <div class=\"some-end-button\">\n End Session\n </div>"
  }

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

התאמה אישית של הודעות בכמה שפות ועם רכיבים חזותיים

בשיטה החדשה של CCAI Platform (אפשרות) יש שני שדות שתומכים בכמה שפות ובהתאמה אישית של הודעות חזותיות:

  • ‫lang: מציין את שפת ברירת המחדל אם משתמש הקצה לא בחר שפה מועדפת. הקוד הזה תואם לתקן ISO 639-1. אם לא מציינים אותו, ברירת המחדל היא en.

  • translation: ערכת ה-SDK לאינטרנט תומכת במספר שפות לטקסטים שמוצגים. באמצעות אובייקט התרגום, אתם יכולים להתאים אישית טקסטים בשפה קיימת או אפילו להוסיף טקסטים בשפות חדשות. לדוגמה: de, es, fr, ja.

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

// ES6
let translation = `{
  "en": {
    "ujet_start_title": "Hi!"
  },
  "es": {
    "ujet_start_title": "¡Hola!"
  },
  "fr": {
    "ujet_start_title": "Salut!"
  },
  "de": {
    "ujet_start_title": "Hallo!"
  },
  "it": {
    "ujet_start_title": "Ciao!"
  },
  "ja": {
    "ujet_start_title": "こんにちは！"
  },
  "ko": {
    "ujet_start_title": "안녕하세요!"
  },
  "pt": {
    "ujet_start_title": "Olá!"
  },
  "pt-BR": {
    "ujet_start_title": "Olá!"
  },
  "sv": {
    "ujet_start_title": "Hej!"
  }
}`;

// initialize when dom ready
var ujet = new UJET({
  // other fields
  lang: 'en',
  translation: translation
});

הודעות ההתאמה האישית הן:

"ujet_ask_phone_number_button_title": "Call Me"
"ujet_ask_phone_number_description": "Provide your phone number below"
"ujet_ask_phone_number_title_instant": "We'll Call You"
"ujet_ask_phone_number_title_scheduled": "Let's Schedule a Call"
"ujet_ask_phone_number_warning": "Your call may be monitored or recorded for training and quality assurance purposes."
"ujet_call_confirm_content": "Your phone should be ringing right about - {0}"
"ujet_call_confirm_start_new_conversation": "Start A New Conversation"
"ujet_call_record_permission_subtitle": "Do you give permission for {0} to record your call for training and quality?"
"ujet_call_record_permission_title": "Permission to Record"
"ujet_channel_chat": "Let's connect you to one of our chat support specialists",
"ujet_channel_instant_call": "Let one of our support specialists give you a call now",
"ujet_channel_menu_chat": "Chat now"
"ujet_channel_menu_email": "Email"
"ujet_channel_menu_instant_call": "Call now"
"ujet_channel_menu_keep_waiting": "Keep Waiting"
"ujet_channel_menu_scheduled_call": "Schedule call"
"ujet_channel_scheduled_call": "Let's schedule a time for a support specialist to call and help you",
"ujet_channel_email": "Please send us an email so we can help",
"ujet_chat_end": "End chat"
"ujet_chat_ended": "This chat has ended"
"ujet_chat_input_placeholder": "Type your message here"
"ujet_chat_leave": "Leave chat"
"ujet_chat_timed_out": "This chat has timed out"
"ujet_chat_title_with_multiple_agent": "Multiple Agents"
"ujet_chat_title_with_one_agent": "Chatting with {0}"
"ujet_chat_title_with_two_agent": "Chatting with {0} & {1}"
"ujet_chat_transfer_failed": "Transfer has failed"
"ujet_chat_transfer_joined": "<b>{0}<\/b> just joined the conversation"
"ujet_chat_transfer_left": "<b>{0}<\/b> just left the conversation"
"ujet_chat_transfer_started_menu": "<b>{0}<\/b> is transferring this chat to another agent..."
"ujet_chat_transfer_started_user": "<b>{0}<\/b> is adding another agent to this conversation..."
"ujet_common_back": "Back"
"ujet_common_cancel": "Cancel"
"ujet_common_end": "End"
"ujet_common_no": "No"
"ujet_common_save": "Save"
"ujet_common_submit": "Submit"
"ujet_common_support": "Support"
"ujet_common_yes": "Yes"
"ujet_deflection_menu_title": "Select from the options below"
"ujet_error_no_available_language": "No Available Language"
"ujet_error_phone_number_invalid": "Please input a valid phone number."
"ujet_file_upload_button": "Choose a file to upload"
"ujet_file_upload_failure_size": "Looks like we couldn't upload. <br> Please try uploading a file <br> that is less than {0}."
"ujet_file_upload_failure_type": "Looks like we couldn't upload. <br> We only accept <br> .JPG, .PNG, or .MP4."
"ujet_file_upload_failure_unknown": "Looks like we couldn't upload. <br> Please try again!"
"ujet_file_upload_subtitle": "Drop files here to upload"
"ujet_file_upload_title": "Upload Files"
"ujet_greeting": "Hi there, how can we help?"
"ujet_instant_call_confirm_content": "Your phone should be ringing shortly"
"ujet_language_chinese": "中文"
"ujet_language_english": "English"
"ujet_language_french": "Français"
"ujet_language_german": "Deutsch"
"ujet_language_italian": "Italiano"
"ujet_language_japanese": "日本語"
"ujet_language_korean": "한국어"
"ujet_language_portuguese": "Português (Portugal)"
"ujet_language_portuguese_brazil": "Português (Brazil)"
"ujet_language_spanish": "Español"
"ujet_language_swedish": "Svenska"
"ujet_menu_title": "Select an option"
"ujet_message_back_in_menu": "Looks like you changed your mind! How else can we help?"
"ujet_message_channel": "How would you like to communicate?"
"ujet_message_chat_deflection_afterhour": "We are currently closed. We look forward to helping you during our normal business hours."
"ujet_message_chat_deflection_default": "We are currently experiencing a high volume of requests with a current wait time of <b>{0}<\/b>. How would you like to reach out?"
"ujet_message_chat_deflection_email": "Please contact us via email: <b><a href="mailto:{0}">{0}<\/a><\/b>."
"ujet_message_chat_deflection_keepwaiting": "Thank you for continuing to wait. The remaining wait time is <b>{0}<\/b>."
"ujet_message_chat_deflection_outage": "We are currently experiencing a high volume of request, how would you like to reach out?"
"ujet_message_chat_deflection_recurring": "Thanks for your patience! The remaining wait time is <b>{0}<\/b>."
"ujet_message_chat_restart": "Connecting to your ongoing chat, one moment please..."
"ujet_message_chat_start": "One moment please..."
"ujet_message_queue": "Let's help you with<br /><strong>{0}<\/strong>"
"ujet_rating_feedback_placeholder": "Let us know how we can improve."
"ujet_rating_result_subtitle": "We appreciate your feedback"
"ujet_rating_result_title": "Thank you!"
"ujet_rating_title": "Rate Your Experience"
"ujet_redirect_action_title": "Open this page in a new tab"
"ujet_redirect_url_title": "Visit the page below"
"ujet_schedule_time_description": "Pick a time that works best for you"
"ujet_schedule_time_title": "Let's Schedule a Call"
"ujet_scheduled_call_cancel_cancel": "Cancel"
"ujet_scheduled_call_cancel_content": "You scheduled a support call for<br><b>{0}<\/b> at <b>{1}<\/b>."
"ujet_scheduled_call_cancel_keep": "Keep It"
"ujet_scheduled_call_cancel_title": "Cancel the existing call?"
"ujet_screenshot_init_cancel": "No Thanks"
"ujet_screenshot_init_okay": "Accept"
"ujet_screenshot_init_title": "Screenshot Request"
"ujet_screenshot_install_cancel": "Cancel"
"ujet_screenshot_install_okay": "Install"
"ujet_screenshot_install_title": "Install Chrome Extension"
"ujet_screenshot_take_action": "Take Screenshot"
"ujet_screenshot_take_title": "Click the button below to send a screenshot to the agent"
"ujet_screenshot_verify_cancel": "No"
"ujet_screenshot_verify_okay": "Yes"
"ujet_screenshot_verify_title": "Successfully Installed Chrome Extension"
"ujet_start_title": "Need any help?"
"ujet_tap_to_minimize": "Tap to minimize"
"ujet_time_hour": "hour | hours"
"ujet_time_minute": "minute | minutes"

התאמה אישית של הלוגו והסמל

ב-method‏ new UJET(option) יש שדות שמאפשרים להתאים אישית את הלוגו והסמל.

  • ‫logo: כתובת ה-URL של תמונת הלוגו

  • מיקום הווידג'ט (רלוונטי רק למחשבים)

    • right: מגדיר את מיקום הקצה הימני בפיקסלים (ערך ברירת המחדל הוא 50)

    • ‫bottom: מגדיר את מיקום הקצה התחתון בפיקסלים (ערך ברירת המחדל הוא 50)

  • מיקום הסמל (רלוונטי רק למחשבים)

    • right: מגדיר את מיקום הקצה הימני בפיקסלים (ערך ברירת המחדל הוא 50)

    • ‫bottom: מגדיר את מיקום הקצה התחתון בפיקסלים (ערך ברירת המחדל הוא 50)

דוגמה להתאמה אישית של לוגו וסמל

new UJET({
  logo: 'https://example.com/logo.svg',
  // widget position
  right: '50px',
  bottom: '150px',

  // launcher position
  launcher: {
    right: '50px',
    bottom: '50px',
  }
})

התאמה אישית של הלוגו והסמל

התאמה אישית של הלוגו והסמל

התאמה אישית של הלוגו והסמל

התאמה אישית של הלוגו והסמל

התאמה אישית של העיצוב

ב-method‏ new UJET(option) יש שדה לתמיכה בהתאמה אישית של העיצוב.

  • ‫style: אובייקט העיצוב תומך בארבעה ערכים לווידג'ט.

    • ‫links: רשימה של קישורים לגיליונות סגנונות של גופני אינטרנט

    • ‫--primary-font: ערך לסגנון ה-CSS של משפחת הגופנים שמוחל על כל ממשק המשתמש באינטרנט, למשל Merriweather

    • ‫--primary-color: ערך של קוד הקסדצימלי שמשמש כצבע הראשי של ממשק המשתמש באינטרנט, למשל #51C3C3

    • ‫--link-color: ערך של קוד הקסדצימלי שמשמש כצבע הקישור של ממשק המשתמש באינטרנט, למשל ‎#51C3C3

  • ‫launcher: האובייקט launcher תומך בארבעה ערכים.

    • ‫cssText: תחביר CSS שמשמש כסגנון ה-CSS של מרכז האפליקציות

    • ‫chatIcon: כתובת URL של סמל SVG שמשמש כסמל הצ'אט הרגיל

    • ‫closeIcon: כתובת URL של סמל SVG שמשמש כסמל הסגירה

    • ‫style: אובייקט העיצוב המופרד הזה תומך בשני ערכים של מרכז האפליקציות.

      • --background-color: ערך של קוד הקסדצימלי שמשמש כצבע הרקע של מרכז האפליקציות, לדוגמה: ‎#E85230 --icon-color: ערך של קוד הקסדצימלי שמשמש כצבע הסמל של סמל מרכז האפליקציות, לדוגמה: ‎#FFF
var ujet = new UJET({
  // ...
  style: {
    links: [
      'https://fonts.example.com/css?family=Droid+Serif:400,700&display=swap',
    ],
    '--primary-font': 'Droid Serif, Georgia, serif',
    '--primary-color': '#F1684A',
    '--link-color': '#F1684A',
  },
  launcher: {
    cssText: '.wrap button {background: #E85230}',
    chatIcon: 'https://example.com/logo.svg',
    closeIcon: 'https://example.com/close.svg',
    style: {
      '--background-color': '#F1684A',
      '--icon-color': '#fff',
    }
  }
});

סגנון מרכז האפליקציות

מעקב אחרי בחירת הערוץ ושליחת האימייל

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

  • application: סוג המכשיר.

  • ‫sdk_version: הגרסה של Web SDK.

  • ‫user_agent: גרסת הדפדפן.

  • ‫company: שם הדייר.

  • ‫menu_name: השם של התור או התפריט שמשתמש הקצה בחר.

  • ‫menu_path: הנתיב לתור או לתפריט שמשתמש הקצה בחר.

  • ‫menu_id: מזהה התפריט של התור או התפריט שמשתמש הקצה בחר.

  • url: כתובת ה-URL של דף האינטרנט שבו משתמש הקצה היה כשבחר ערוץ או שלח אימייל.

  • ‫timestamp: השעה שבה משתמש הקצה ביצע את הבחירה.

  • ‫has_attachments: אם לאימייל היו קבצים מצורפים כשהוא נשלח (השדה הזה מופיע רק במהלך שליחת האימייל, ולא במהלך בחירת הערוץ).

נתוני ההודעה מאוחסנים באובייקט ujet עם 2 מאפיינים: אחד שנקרא action, שהוא מחרוזת שמכילה את שם הפעולה שהושלמה, ואחד שנקרא data, שכולל את הנתונים שתוארו קודם.

כדי לאחזר נתונים מההודעה, אפשר ליצור רכיב event listener שמאזין ל-"message". בקטע הבא מופיעה דוגמה להדפסת הפעולה והנתונים במסוף. דוגמה פעילה זמינה בתיקייה tracking-channel-selection.

window.addEventListener('message', (e) => {
  if (e.data && e.data.ujet) {
    console.log(`Action: ${e.data.ujet.action}`);
    console.log(`Message Data: ${e.data.ujet.data}`);
  }
});

הסתרת הגבול של לוגו הסוכן

כדי להסתיר את הגבול של לוגו הנציג, מוסיפים את המאפיין "‎--logo-shadow": "none"‎ למאפיין הסגנון ומגדירים אותו כ-true ב-UJET החדש(אפשרות):

new UJET({
  // ...
  style: {
    '--logo-shadow': 'none',
  }
});

הסתרת סמל ההפעלה

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

new UJET({
  // ...
  launcher: false,
});

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

שימוש בנקודת גישה ישירה

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

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

  1. נכנסים לפורטל של פלטפורמת CCAI.

  2. עוברים אל הגדרות > תור.

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

  4. עוברים אל עריכה > תצוגה בערוץ האינטרנט. מבנה האתר מוצג.

  5. בוחרים את התור שאליו רוצים שמשתמש הקצה יועבר ישירות.

  6. בקטע Access Point, לוחצים על Create direct access point.

  7. ממלאים את הפרטים הבאים:

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

    2. מזינים את שם נקודת הגישה (APN). זה השם שמופיע ברשימה נקודת גישה.

    3. מזינים את תווית נקודת האיסוף הכללית. זה הערך שבו תשתמשו כדי להגדיר את ה-SDK לאינטרנט.

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

אפשר להעביר את השם של נקודת גישה ישירה באמצעות ה-method‏ ujet.start(options). מקרה לדוגמה:

var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
  if (ujet.status === 'open') {
    ujet.close();
  } else {
    ujet.start({ menuKey: '__MENU_KEY__' });
  }
});

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

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

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

ujet.on('close', function() {
  // do something here
});

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

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

בשלב הזה אפשר לפתוח את ממשק המשתמש באינטרנט באופן פרוגרמטי באמצעות השיטה ujet.start(options). יכול להיות שתרצו שמשתמש הקצה ילחץ על כפתור נוסף כדי לפתוח את ממשק המשתמש באינטרנט, למשל:

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

var ujet = new UJET({
  companyId: "YOUR_COMPANY_ID",
  host: "HOST_URL",
  launcher: false
});

var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
  if (ujet.status === 'open') {
    ujet.close();
  } else {
    ujet.start();
  }
});

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

ujet.registerHook('loading', function() {
  launcher.textContent = 'loading';
});

ujet.registerHook('open', function() {
  launcher.textContent = 'Click to close';
});

ujet.registerHook('close', function() {
  launcher.textContent = 'Click to open';
});

ujet.on('created', function() {
  ujet.authenticate(getAuthToken);
});

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

טריגר יזום

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

כדי להגדיר טריגר פרואקטיבי:

  1. בפורטל של CCAI Platform, עוברים אל Settings > Chat.

  2. בחלונית Web Proactive Chat Triggers, לוחצים על View triggers. מופיע החלונית Triggers.

  3. לוחצים על הוספת טריגר. החלונית Choose Name תופיע.

  4. בשדה Trigger name, מזינים שם ולוחצים על Next. מופיע החלון Set Conditions.

  5. כדי להגדיר תנאים, מבצעים את הפעולות הבאות:

    1. לצד משתמש הקצה, בוחרים תנאי.

    2. בשדה הזנת מילת מפתח, מזינים את מילת המפתח שרוצים שהתנאי יתייחס אליה, ולוחצים על Enter.

    3. חוזרים על השלב הקודם לכל מילת מפתח שרוצים להזין.

    4. כדי להוסיף עוד תנאי, לוחצים על הוספת תנאי ואז על סוג התנאי הרצוי.

    5. מגדירים את אפשרות ההגדרה של התנאי.

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

    7. לוחצים על הבא. החלונית Define Actions תופיע.

  6. כדי להגדיר פעולות:

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

    2. לוחצים על השם המודגש של תור הצ'אט. מופיעה תיבת דו-שיח לאישור.

    3. לוחצים על אישור כדי להמשיך.

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

    5. לוחצים על סיום.

    6. כדי להפעיל את הטריגר החדש, לוחצים על הפעלה.

מזהי כרטיסים קיימים

אם יש לכם פנייה קיימת של משתמש קצה, אתם יכולים לאחזר את מזהה הפנייה מה-CRM ולהעביר אותו ל-Web SDK באמצעות קריאה ל-ujet.start().

לדוגמה:

yourFunctionToRetrieveTicket()
  .then((existingTicket) => {
    ujet.start({ ticketId: existingTicket });
  });

אפשר לעיין בדוגמה שבתיקייה ticket-id.