ウェブ SDK を使用して、コンタクト センター AI プラットフォーム（CCAI プラットフォーム）の機能をウェブ アプリケーションに統合します。ウェブ SDK はヘッドレス ウェブ SDK をベースに構築されており、すべてのヘッドレス クライアント メソッドをウェブ SDK ウィジェットで使用できます。このページでは、ウェブ SDK をマウント、初期化、認証する方法について説明します。また、新しい会話を開始したり、文字起こしをダウンロードしたりするためのボタンやコマンドを非表示にする方法についても説明します。
ウェブ SDK のインストールについては、GitHub の実装例をご覧ください。
基本的な例
基本的な例では、次の 3 つのオプションのみが必要です。
companyIdhostAuthenticate
ウィジェットのドキュメントに沿って、会社 ID とホストを取得します。
完全な 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 }) を使用してカスタムデータを構成する必要があります。
完全な 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 ウィジェット スクリプトを含めます。
マウント要素を準備します。
COMPANY_KEYを使用してウェブ SDK を初期化するバックエンド コードを使用して
COMPANY_SECRETで認証を初期化する<!-- 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>
会社キーを取得する
管理者権限のあるアカウントを使用して、コンタクト センター AI プラットフォーム ポータルにログインします。
[設定] > [デベロッパー向けの設定] に移動します。
会社キーを
COMPANY_KEYとしてコピーします。
ここで企業秘密を取得することもできます。シークレットは、バックエンド サーバーで認証トークン エンドポイントを作成するために使用されます。詳細については、認証セクションをご覧ください。
初期化中
新しい UJET(options) メソッドを使用して CCAI Platform ウェブ SDK を初期化できます。ポータルが https://{your_ccaas_host} の場合、ホストは
https://{your_ccaas_host}:
const ccaas = new UJET({
companyId: "{COMPANY_KEY}",
host: "https://{your_ccaas_host}",
authenticate: getAuthToken,
});
オプションは、ヘッドレス ウェブ SDK ガイドと同じです。
認証
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 を構成する
ccaas.config({...}) を使用してウェブ SDK を構成します。
次のコードは、ウェブ 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 を構成できます。これを行うには、ccaas.config メソッドに hideNewConversation プロパティを含めます。詳細については、SDK を構成するをご覧ください。
セッション中に文字起こしをダウンロードするコマンドを非表示にする
セッション中にエンドユーザーのチャット ウィンドウのチャット オプション メニューから [文字起こしをダウンロード] コマンドを非表示にするように、ウェブ SDK を構成できます。これを行うには、ccaas.config メソッドで hideDownloadTranscriptOptions プロパティを含めます。詳細については、SDK を構成するをご覧ください。
セッションの終了時に文字起こしをダウンロードするボタンを非表示にする
セッションの終了時にエンドユーザーのチャット ウィンドウで [文字起こしをダウンロード] ボタンを非表示にするように、ウェブ SDK を構成できます。これを行うには、ccaas.config メソッドに hideDownloadTranscriptPostChat プロパティを含めます。詳細については、SDK を構成するをご覧ください。
ウィジェットをマウントする
最初に空の要素を準備する必要があります。
<div id="ccaas-widget"></div>
次に、この要素にウィジェットをマウントできます。
ccaas.mount('#ccaas-widget')
ヘッドレス ウェブ SDK ガイドを使用して、独自のチャット ウィジェットと通話ウィジェットを作成します。
インストール
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 を統合する
管理者権限のあるアカウントを使用して、コンタクト センター AI プラットフォーム ポータルにログインします。
[設定] > [デベロッパー向けの設定] に移動します。
会社キーを
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()