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

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

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

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

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

  2. מאתחלים את CCAI Platform web SDK באמצעות COMPANY_KEY.

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

תהליך ההתקנה

תהליך ההתקנה

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

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

אתחול ה-SDK לאתרים

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

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

כדי לקבל את מפתח החברה:

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

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

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

לאחר מכן אפשר לאתחל את ה-SDK לאינטרנט באמצעות ה-method‏ UJET(config) והאירוע ujet.on('created', function). צריך לציין את המארח של מופע CCAI Platform, לדוגמה 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 מהקצה העורפי:

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 מהקצה העורפי. מידע נוסף זמין במאמר בנושא Mozilla Fetch API.

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

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

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

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

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

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

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

    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}`)
})

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

מדיניות אבטחה בנוגע לתוכן

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

תמיכה ב-Internet Explorer 11

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

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

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

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

  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: '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"
            }
          }
        ]
      }
    ]
  }
}

נתונים מותאמים אישית לא חתומים בצ'אט

כשמתחילים צ'אט, אפשר להעביר נתונים מותאמים אישית עם אובייקט הצ'אט. נתונים מותאמים אישית יכולים להיות מערכת ההפעלה, מספר הגרסה, המיקום או כל נתון אחר שעשוי להיות רלוונטי לצ'אט. הנתונים האלה לא מוצפנים, ולכן לא אמורים לכלול פרטים אישיים מזהים (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 היא תווית בדף CRM, ו-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) כנתונים מותאמים אישית חתומים כשמתחיל סשן. מידע נוסף זמין במאמר בנושא שליחת מאפייני נתונים שמורים.

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

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

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

  • VERIFIED_CUSTOMER_BOOLEAN: הערך True אם אתם מחשיבים את משתמש הקצה הזה כלקוח לגיטימי.
  • ‫VERIFIED_BAD_ACTOR_BOOLEAN: הערך הוא True אם לדעתכם משתמש הקצה הזה הוא גורם זדוני פוטנציאלי.
  • ‫REPEAT_CUSTOMER_BOOLEAN: הערך True אם קבעתם שמשתמש הקצה הזה יצר קשר עם מוקד התמיכה שלכם בעבר.

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

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

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

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

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

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

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

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

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

  1. בפורטל של פלטפורמת ה-CCAI, בכתובת Settings > Chat > Web & mobile deflection.

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

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

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

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

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

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

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

      • כל התורים שמוגדרים לשעות אחרי שעות הפעילות, עם הפניה אוטומטית אחרי שעות הפעילות

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

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

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

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

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

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

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

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

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

אימייל

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

ההתנהגות הספציפית היא כדלקמן:

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

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

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

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

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

התהליך

כדי להגדיר את ה-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 לאינטרנט, צריך לשייך את מחלקות הלחצנים הבאות לסוגי הלחצנים המתאימים. ה-SDK לאתרים מחפש את המחלקות האלה בקוד ומוסיף לכל אחת מהן מאזין לאירועים. אלה המחלקות של הלחצנים:

  • ‫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',
  }
})

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

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

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

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

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

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

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

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

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

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

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

  • ‫launcher: אובייקט ה-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: גרסת ה-SDK לאינטרנט.

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

  • company: שם הדייר.

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

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

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

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

  • חותמת זמן: השעה שבה משתמש הקצה ביצע את הבחירה.

  • ‫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'‎ במאפיין style ומגדירים אותו כ-true ב-new UJET(option):

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  7. עליך לספק את הפרטים הבאים:

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

    2. מזינים את שם נקודת הגישה. זה השם שמופיע ברשימה Access Point.

    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().

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

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

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

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

  2. עוברים לחלונית Web Proactive Chat Triggers ולוחצים על View triggers. מופיעה החלונית Triggers (טריגרים).

  3. לוחצים על Add Trigger (הוספת טריגר). מופיעה החלונית Choose Name (בחירת שם).

  4. בשדה שם הטריגר מזינים שם ולוחצים על הבא. מופיעה החלונית Set Conditions.

  5. כדי להגדיר תנאים:

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

    2. בשדה Enter a keyword (הזנת מילת מפתח), מזינים מילת מפתח שהתנאי יתייחס אליה, ואז מקישים על המקש Enter.

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

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

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

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

    7. לוחצים על הבא. מופיעה החלונית Define Actions (הגדרת פעולות).

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

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

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

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

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

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

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

מספרי כרטיסים קיימים

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

לדוגמה:

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

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