‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

תחילת העבודה

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

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

דוגמה בסיסית

בדוגמה הבסיסית נדרשות רק 3 אפשרויות:

companyId
host
Authenticate

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

Full HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic demo</title>
</head>
<body>
  <!-- An empty element to mount the CCAI Platform web SDK widget. -->
  <div id="ccaas-widget"></div>

  <!-- Include the CCAI Platform web SDK widget -->
  <script src="https://{your_ccaas_host}web-sdk/v3/widget.js"></script>
  <script>
    var ccaas = new UJET({
      companyId: "$COMPANY_ID",
      host: "$HOST",
      authenticate: getAuthToken
    });
    ccaas.mount("#ccaas-widget");

    function getAuthToken() {
      // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
      return fetch('/auth/token').then(function(resp) {
        // { token: 'a JWT contains user identifier, name, and email' }
        return resp.json();
      });
    }
  </script>
</body>
</html>

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

הדוגמה של נתונים בהתאמה אישית דומה לדוגמה הבסיסית. צריך להגדיר את הנתונים המותאמים אישית באמצעות .config({ customData }).

Full HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Data demo</title>
</head>
<body>
  <!-- An empty element to mount the CCAI Platform web SDK widget. -->
  <div id="ccaas-widget"></div>

  <!-- Include the CCAI Platform web SDK widget -->
  <script src="https://{your_ccaas_host}web-sdk/v3/widget.js"></script>
  <script>
    var ccaas = new UJET({
      companyId: "$COMPANY_ID",
      host: "$HOST",
      authenticate: getAuthToken
    });

    // use `.config` to configure custom data.
    ccaas.config({
      customData: {
        version: {
          label: 'Version',
          value: '1.0.0'
        }
      }
    });
    ccaas.mount("#ccaas-widget");

    function getAuthToken() {
      // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
      return fetch('/auth/token').then(function(resp) {
        // { token: 'a JWT contains user identifier, name, and email' }
        return resp.json();
      });
    }
  </script>
</body>
</html>

הכנה

כדי להפעיל את Contact Center AI Platform Web SDK, מבצעים את הפעולות הבאות:

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

הפעלת אימות באמצעות COMPANY_SECRET באמצעות קוד ה-Backend

<!-- an empty element to mount the web SDK -->
<div id="ccaas-widget"></div>

<script src="https://{your_ccaas_host}web-sdk/v3/widget.js"></script>
<script>
  // const ccaas = new UJET({ ... })
</script>

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

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

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

מתבצע אתחול

לאחר מכן אפשר לאתחל את CCAI Platform web SDK באמצעות השיטה החדשה UJET(options). אם הפורטל הוא https://{your_ccaas_host}, אז המארח הוא

https://{your_ccaas_host}:
const ccaas = new UJET({
  companyId: "{COMPANY_KEY}",
  host: "https://{your_ccaas_host}",
  authenticate: getAuthToken,
});

האפשרויות זהות לאלה שמופיעות במדריך ל-SDK של Headless web.

אימות

‫getAuthToken היא פונקציה שמפעילה מנגנון לחתימה על JWT מהקצה העורפי:

async function getAuthToken() {
  // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
  const resp = await fetch('/auth/token')
  const data = await resp.json()
  return { token: data.token }
}

מידע נוסף זמין בקטע אימות.

הגדרת ה-SDK

מגדירים את ה-SDK לאתר באמצעות ccaas.config({...}).

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

export interface ConfigOptions {
  name?: string
  accent?: 'default' | 'blue' | 'green' | 'purple' | 'orange' | 'yellow' | 'gold' | 'red'
  logo?: string
  menuKey?: string
  ticketId?: string
  preferredChannel?: string
  disableAttachment?: boolean
  customData?: Record<string, any>
  signedCustomData?: string
  messages?: Record<string, unknown>
  disableLauncher?: boolean
  launcherOpenIcon?: string
  launcherCloseIcon?: string
  launcherLoadingIcon?: string
  optionsMenuIcon?: string
  confirmationIcon?: string
  enableMuteChat?: boolean
  tooltipIcon?: string
  hideNewConversation?: boolean
  hideDownloadTranscriptOptions?: boolean
  hideDownloadTranscriptPostChat?: boolean
}

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

הסתרת הכפתור להתחלת שיחה חדשה בסוף הסשן

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

הסתרת הפקודה להורדת תמליל במהלך סשן

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

הסתרת הכפתור להורדת תמליל בסיום הסשן

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

טעינת הווידג'ט

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

<div id="ccaas-widget"></div>

אחר כך אפשר להוסיף את הווידג'ט לאלמנט הזה:

ccaas.mount('#ccaas-widget')

אפשר להשתמש במדריך ל-SDK של Headless web כדי ליצור ווידג'טים משלכם לצ'אט ולשיחות.

התקנה

אפשר להתקין את החבילה באמצעות npm:

npm install @ujet/websdk-headless --save

אפשר גם להשתמש בסקריפט שמתארח במופע שלכם בפלטפורמת CCAI:

<script src="https://{your_ccaas_host}/web-sdk/v3/headless.js"></script>

<script>
  // const client = new HeadlessClient(...)
</script>

שילוב ה-SDK

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

אם הפורטל שלכם הוא https://{your_ccaas_host}, הנה דוגמה לאחזור פרטי החברה:

import { Client } from "@ujet/websdk-headless"

async function authenticate() {
  const resp = await fetch("/your-auth-endpoint")
  const data = await resp.json()
  return { token: data.token }
}

const client = new Client({
  companyId: "COMPANY_KEY",
  host: "https://{your_ccaas_host}",
  authenticate: authenticate,
})

const company = await client.getCompany()

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

דוגמה בסיסית

Full HTML

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

Full HTML

הכנה

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

מתבצע אתחול

אימות

הגדרת ה-SDK

הסתרת הכפתור להתחלת שיחה חדשה בסוף הסשן

הסתרת הפקודה להורדת תמליל במהלך סשן

הסתרת הכפתור להורדת תמליל בסיום הסשן

טעינת הווידג'ט

התקנה

שילוב ה-SDK

תחילת העבודה