הפניית API של Web SDK

בדף הזה מפורטות שיטות ה-API של ה-SDK לאינטרנט.

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

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

    const ujet = new UJET({
      companyId: '',
      // ...
    })

אפשרויות

בקטע הזה מפורטות האפשרויות שאפשר להעביר כשמפעילים את ה-SDK לאתרים.

companyId

חובה

כדי לאחזר את companyId מפורטל CCAI Platform, צריך לבצע את השלבים הבאים:

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

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

  3. מעתיקים את מפתח החברה.

    new UJET({
  companyId: '{​ COMPANY KEY }​',
})

tenant

מומלץ

דייר הוא שם הדומיין המשני של מופע Contact Center AI Platform (פלטפורמת CCAI), שנקרא גם הסביבה שלכם. לדוגמה, אם הפורטל של CCAI Platform הוא https://acme.ccaiplatform.com/, אז acme הוא הדייר. דוגמה:

```sh
new UJET({
  companyId: '....',
  tenant: 'acme',
})
```

host

אופציונלי

‫host היא נקודת הקצה של ה-API שמשמשת את ה-SDK לאינטרנט. אם הגדרתם את tenant, אין צורך להגדיר את host.

new UJET({
  companyId: '....',
  host: 'https://acme.api.ccaiplatform.com',
})

אם הגדרתם את tenant ולא את host, ה-SDK לאתרים יגדיר את הערך של host בהתאם ל-tenant. מקרה לדוגמה:

https://{tenant}.api.ccaiplatform.com

authenticate

אופציונלי

‫authenticate היא פונקציה שמחזירה אסימון JWT עם הבטחה. מקרה לדוגמה:

new UJET({
  // ...
  authenticate: getAuthToken,
})

function getAuthToken () {
  return fetch('/ujet/token').then(function(resp) {
    return resp.json()
  })
}

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

var ujet = new UJET({ ... })
ujet.on('created', function() {
  getAuthToken().then({ token } => {
    ujet.authenticate({ token })
  })
})

lang

אופציונלי

שפת ברירת המחדל של משתמש הקצה. מקרה לדוגמה:

new UJET({
  // ...
  lang: 'ja',
})

user

אופציונלי

מקרה לדוגמה:

new UJET({
  companyId: '....',
  user: {
    identifier: '...',
    name: '...',
    email: '...',
  },
})

launcher

אופציונלי

האפשרות launcher יכולה להיות false או אובייקט. אלה האפשרויות: launcher

right: string,
bottom: string,
cssText: string,
chatIcon: url,
closeIcon: url,
style: {
  '--background-color': color,
  '--icon-color': color,
}

כדי להשבית את משגר ברירת המחדל של פלטפורמת CCAI, אפשר להגדיר את האפשרות הזו לערך false. מקרה לדוגמה:

const ujet = new UJET({
  companyId: '...',
  launcher: false,
})
// use your own button: `<button id="start-chat">Chat with Me</button>`
document.querySelector('#start-chat').addEventListener('click', function() {
  ujet.open()
})

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

new UJET({
  companyId: '...',
  launcher: {
    // cssText: 'body{color:red}',
    // chatIcon: 'https://example.com/logo.svg',
    // closeIcon: 'https://example.com/static/close.svg',
    // right: '50px',
    // bottom: '50px',
    style: {
      '--icon-color': '#FFF',
      '--background-color': '#F1684A',
    }
  },
})

מומלץ

כתובת ה-URL של הלוגו של החברה. מקרה לדוגמה:

new UJET({
  logo: 'https://example.com/logo.svg',
})

style

אופציונלי

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

    new UJET({
      // ...
      style: {
        // links: ['https://example.com/font.css'],
        '--primary-font': '',
        '--primary-color': '',
        '--link-color': '',
        '--logo-shadow': '',
      }
    })

customData

אופציונלי

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

new UJET({
  // ...
  customData: {
    version: {
      label: 'Version',
      value: '1.1.0'
    },
    platform: {
      label: 'Platform',
      value: navigator.platform
    }
  }
})

disableAttachment

אופציונלי

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

    new UJET({
      companyId: '....',
      disableAttachment: true,
    })

אופציונלי

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

new UJET({
  right: '50px',
})

bottom

אופציונלי

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

new UJET({
  bottom: '150px',
})

translation

אופציונלי

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

new UJET({
  translation: {
    "en": {
      "ujet_start_title": "English!",
      "ujet_greeting": "Hi there!"
    },
    "es": {
      "ujet_start_title": "¡Español!",
      "ujet_greeting": "¡Hola!"
    },
    "fr": {
      "ujet_start_title": "Français!",
      "ujet_greeting": "Salut!"
    },
    "de": {
      "ujet_start_title": "Deutsche!",
      "ujet_greeting": "Hallo!"
    },
    "ja": {
      "ujet_start_title": "日本語！",
      "ujet_greeting": "こんにちは！"
    }
  }
})

Methods

בקטע הזה מפורטות השיטות של האובייקט UJET:

.on(event, callback)

מריצים את callback כשמתקבל event:

ujet.on('ready', function() {
  console.log('widget is ready')
})

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

.off(event, callback)

הסרת callback ממעבדי אירועים.

function ready() {
  console.log('widget is ready')
}

ujet.on('ready', ready)
ujet.off('ready', ready)

.authenticate(authData)

שליחת הערך token לווידג'ט. בדרך כלל קוראים לשיטה הזו באירוע created:

ujet.on('created', function() {
  fetchToken().then(function(token) {
    ujet.authenticate({ token: token })
  })
})

.authenticate(authFunction)

אפשר גם להעביר פונקציה לשיטה .authenticate. הפונקציה הזו אמורה להחזיר promise של token:

ujet.on('created', function() {
  ujet.authenticate(function(callback) {
    return fetchToken().then(function(token) {
      return { token: token }
    })
  })
})

.start({ menuKey, ticketId })

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

// if end user stayed in the web page for 10 senconds
setTimeout(function() {
  ujet.start({ menuKey: 'help' })
}, 10000)

אם .start עם menuKey, הווידג'ט עובר ישירות לתור הזה.

.open()

‫.open דומה ל-.start, אבל הוא לא מקבל פרמטרים.

setTimeout(function() {
  ujet.open()
}, 10000)

.close()

מזעור הווידג'ט באופן אוטומטי:

ujet.on('chat:status', function(status) {
  if (status === 'timeout') {
    ujet.close()
  })
})

.destroy()

השמדת ה-SDK לאינטרנט. כלומר, להסיר אותו מדף האינטרנט הנוכחי.

.registerHook(event, fn)

הערך של event ב-.registerHook שונה מהערך ב-.on. בדרך כלל משתמשים בפונקציה הזו כשרוצים להשתמש במשגר משלכם:

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

const ujet = new UJET({
  // ...
  launcher: false,
})

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

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_start_title

  • ujet_greeting