ウェブ SDK は、最新のパソコン用ブラウザとモバイル ブラウザすべてで動作するように設計されていますが、次のブラウザの最新バージョンは正式にサポートされています。
パソコン:
Chrome
Safari
Edge
Android:
Chrome
Edge
iOS:
Chrome
Safari
Edge
プロアクティブ トリガー
事前対応トリガーを使用すると、ウェブ SDK を起動して、コンシューマーに事前対応メッセージを送信できます。プロアクティブ チャット トリガーは、Contact Center AI Platform で [設定] > [チャット] > [ウェブ プロアクティブ チャット トリガー] に移動して設定できます。
詳しくは、プロアクティブな Web SDK トリガーをご覧ください。
ユーザーの追跡
CRM でリピーターを特定したり、ユーザーの情報を使用して事前作成された返信を使用したりする場合は、users に identifiers を追加する必要があります。返信定型文を使用するには、CRM が必要です。
認証（識別子の更新）は、セッションの開始時またはセッションの途中で行うことができます。セッション中の認証の詳細については、API によるセッション中の認証をご覧ください。
識別子
通話やチャットを開始する際、システムはユーザー認証用の識別子を使用します。構成時に、識別子フィールドの優先値を指定できます。ユーザーの GUID（グローバルに一意の識別子）をすでに所有している場合は、ユーザーの識別に使用できます。ただし、ユーザーの識別子が列挙可能である場合や、個人を特定できる情報（PII）が含まれている場合は、セキュリティを強化するためにハッシュ化する必要があります。
識別子は次の場所に追加する必要があります。
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: '18008675309' } }) }).then(function(resp) { return resp.json(); }); }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(`Listening at http://localhost:${port}`); });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 } }; }); }, })
外部 chatbot への転送
仮想エージェントからエージェントにチャットを転送するときに、挨拶メッセージをオーバーライドし、external_chat_transfer フィールドをカスタムデータにバックフィルすることで、文字起こしをエージェントに渡すことができます。greeting_override はマークダウン形式をサポートしています。
ccaas.config({
customData: {
"external_chat_transfer": {
"greeting_override": "YOUR GREETING MESSAGE."
}
}
"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": "text",
"text": "Check Order Status"
}
]
},
{
"sender": "agent",
"timestamp": "2021-03-15 12:00:16Z",
"content": [
{
"type": "text",
"text": "I can help you with that, what's your order number?"
}
]
},
{
"sender": "end_user",
"timestamp": "2021-03-15 12:00:20Z",
"content": [
{
"type": "media",
"media": {
"type": "image",
"url": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
}
}
]
}
]
}
}
会社名
会社の API から名前ではなくカスタム name を選択します。
ccaas.config({
name: 'ACME',
})
チャットの回避
エージェントが対応不可の場合、偏向を使用して状況を自動的に処理するためのオプションを指定できます。
チャットの回避オプションは、ポータルの [設定] > [チャット] > [ウェブとモバイルの回避] で確認できます。
直接アクセス ポイント（DAP）
直接アクセス ポイントを使用すると、キュー構造内の特定のキューにユーザーを直接誘導できます。
直接アクセス ポイントを使用するには、まずポータルで直接アクセス ポイントを作成する必要があります。
CCAI Platform ポータルで、[設定>キュー] をクリックします。[設定] メニューが表示されない場合は、 [メニュー] をクリックします。
ウェブ メニューの [使用] をオンにして、[編集 / 表示] に移動します。
キュー構造から任意のキューを選択します。
[ダイレクト アクセス ポイントを作成] をクリックします。
アクセス ポイントの種類 = [General]（全般）。
ダイアログで、直接アクセス ポイントの入力データを追加します。
General Access Point Labelフィールドは、次のステップで説明するMenuKeyに対応しています。[作成] をクリックします。
ポータルを使用して構成したら、MenuKey: を使用してユーザーを特定のキューに転送できます。
ccaas.config({
menuKey: 'vip'
})
チケット ID
お客様の既存のチケットがある場合は、CRM からチケット ID を取得して、ウェブ SDK に渡すことができます。
retrieveTicket().then(ticket => {
ccaas.config({ ticketId: ticket.id })
})
自動チャンネル選択
preferredChannel を使用すると、コンシューマーが特定のキューを選択したときに、チャンネルを自動的に選択できます。
ccaas.config({
preferredChannel: 'chat'
})
添付ファイルを無効にする
デフォルトでは、ウェブ SDK を使用すると、チャット セッション中に写真や動画をアップロードできます。次のスクリプトを使用して無効にできます。
ccaas.config({
disableAttachment: false
})
カスタムデータを渡す
チャットが開始されると、カスタムデータをチャット オブジェクトとともに送信できます。カスタムデータには、OS、バージョン、場所など、それぞれのチャットに関連する可能性のあるあらゆるデータを含めることができます。
customData 構成を使用して、署名なしのカスタムデータを追加できます。
カスタム データ形式は JSON オブジェクトに似ており、key、label、value で構成されます。
ccaas.config({
customData: {
k1: {
label: 'Version',
value: '1.1.0'
},
k2: {
label: 'Platform',
value: navigator.platform
}
}
})
Key: データの一意の識別子。上記の例では、k1 と k2 はキーです。
Label: CRM ページの表示名。
Value: ラベルの値
署名付きカスタムデータは、signedCustomData 構成を使用して追加できます。
ccaas.config({
signedCustomData: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.n...."
})
signedCustomData は、HS256 アルゴリズムを使用した JWT 文字列です。
SIGN_JWT(
algorithm='HS256',
secret=YOUR_COMPANY_SECRET,
payload={
custom_data: {
version: {
label: 'Version',
value: '1.0.0'
},
...
},
iss: 'YOUR TENANT',
iat: NOW,
exp: NOW + 3600,
}
)
複数言語のサポート
lang フィールドは、起動時のデフォルト言語を制御し、複数の言語をサポートするために使用できます。省略した場合、デフォルトは英語（en）です。デフォルトの言語は、ウェブサイトのページごとに設定できます。テナントで他の言語が有効になっている場合、ユーザーは別の言語に切り替えることができます。
client.getMenus(key?: string, lang?: string)
.getMenus メソッドはオプションの lang パラメータを受け取ります。.getMenus に lang パラメータを渡さない場合、このメソッドはデフォルトの lang オプションを使用します。
例:
const client = new Client({
// ...
lang: 'ja',
})
このオプションには、次のプロパティを使用してアクセスできます。
console.log(client.lang)
次の言語がサポートされており、次の表に示す略語が使用されています。
| 言語 | 略語 |
| 英語 | en |
| 英語（カナダ） | en-CA |
| 英語（英国） | en-GB |
| 英語（オーストラリア） | en-AU |
| 英語（インド） | en-IN |
| スペイン語（スペイン） | es |
| スペイン語（メキシコ） | es-MX |
| フランス語（カナダ） | fr-CA |
| ドイツ語 | de |
| 日本語 | ja |
| 韓国語 | ko |
| イタリア語 | it |
| 中国語（簡体） | zh |
| 中国語（繁体字） | zh-Hant |
| スウェーデン語 | sv |
| ポルトガル語 | pt |
| ポルトガル語（ブラジル） | pt-BR |
| フィンランド語 | fi |
| ノルウェー語 | nb |
| デンマーク語 | da |
| オランダ語 | nl |
| トルコ語 | tr |
| ベトナム語 | vi |
| タイ語 | th |
| アラビア語 | ar |
| チェコ語 | cs |
| ポーランド語 | pl |
| ハンガリー語 | hu |
| ロシア語 | ru |
| ヒンディー語 | hi |
| ルーマニア語 | ro |
| クロアチア語 | 時間 |
| ウクライナ語 | uk |
| タガログ語 | tl |
翻訳について詳しくは、メッセージと翻訳のカスタマイズをご覧ください。
プログラムでウェブ UI を起動する
この手順では、ccaas.start(options) メソッドを使用して、プログラムでウェブ UI を開きます。
場合によっては、ユーザーが追加のボタンをクリックして Web SDK UI を開くようにしたいことがあります。
例:
<button id="launcher">Click to open</button>
var ccass = new UJET({
companyId: "YOUR_COMPANY_ID",
host: "HOST_URL",
authenticate: getAuthToken,
});
ccass.config({disableLauncher: true})
var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
if (ccass.visible) {
ccaas.hide();
launcher.textContent = 'Click to open';
} else {
ccaas.show();
launcher.textContent = 'Click to close';
}
});
ccass.on('ready', function() {
launcher.textContent = 'ready to talk';
});
ccass.close() メソッドでウィジェットを閉じたり、ccass.destroy() メソッドでウィジェットを削除したりすることもできます。
プログラムでウェブ UI を閉じる
このステップでは、コンシューマーが Web SDK を閉じたいときにコールバック関数を呼び出すことができます。
ccass.on('visible', function(visible) {console.log(visible) })
アクティブなチャット セッションに関する情報を取得する
チャット ID など、アクティブなチャット セッションに関する情報を取得できます。
次の例をご覧ください。
ccass.getOngoingChat()
アクティブなチャット セッションがある場合は、チャット メタデータが返されます。アクティブなチャット セッションがない場合は、null を返します。
この機能を使用すると、進行中のチャットがある場合に SDK を条件付きで非表示にすることで、消費者が複数のチャット セッションを開くのを防ぐことができます。
複数のタブやウィンドウ間で開閉ステータスを追跡する
ウェブサイトの複数のタブまたはウィンドウ間で SDK の開閉ステータスを同期できます。コード スニペットを使用して、ローカル ストレージ内の SDK の状態をトラッキングします。
ccass.on('visible', (isVisible) => {
localStorage['ujetOpen'] = isVisible ? 'yes' : 'no'
})
if (localStorage['ujetOpen'] == 'yes') {
ccass.show()
} else {
ccass.hide()
}
画面共有の同意ダイアログと終了ボタンをカスタマイズする
テンプレート
このオプションを使用して、画面共有ダイアログ テンプレートをカスタマイズできます。デフォルトの template は次のとおりです。
<dialog open class="cobrowse-dialog">
<h1>$title</h1>
<div class="cobrowse-dialog_content">$content</div>
<div class="cobrowse-dialog_footer">
<button class="cobrowse-dialog_allow js-cobrowse-allow">$allow</button>
<button class="cobrowse-dialog_deny js-cobrowse-deny">$deny</button>
</div>
</dialog>
この template は次の目的で使用されます。
セッションの確認ダイアログ
リモコンの確認ダイアログ
デバイス全体のダイアログを確認する
テンプレート内のパラメータは、messages オプションの内容に置き換えられます。
confirmSessionTemplate
このオプションは、セッションの確認ダイアログをカスタマイズするために使用されます。
confirmRemoteControlTemplate
このオプションは、リモコンの確認ダイアログをカスタマイズするために使用されます。
confirmFullDeviceTemplate
このオプションは、デバイスの完全な確認ダイアログをカスタマイズするために使用されます。
sessionControlsTemplate
このオプションは、セッション コントロール ボタンをカスタマイズするために使用されます。デフォルトのテンプレートは次のとおりです。
<button class="cobrowse-end js-cobrowse-end">$end</button>
メッセージ
上記のテンプレートには、次のメッセージ変数があります。
$title$content$allow$deny
これらの変数は次のように置き換えられます。
{
confirmSessionTitle: string; // $title
confirmSessionContent: string; // $content
confirmRemoteControlTitle: string; // $title
confirmRemoteControlContent: string; // $content
confirmFullDeviceTitle: string; // $title
confirmFullDeviceContent: string; // $content
allowText: string; // $allow
denyText: string; // $deny
endSessionText: string; // $end
}
画面共有メッセージが組み込まれています。たとえば、en ロケールのメッセージは次のとおりです。
{
"confirmSessionTitle": "Screen Share Session Request",
"confirmSessionContent": "Do you want to share your current screen with the agent?",
"endSessionText": "End Screen Share Session",
"confirmRemoteControlTitle": "Remote Access Request",
"confirmRemoteControlContent": "The agent would like to have access to your currently shared screen to further assist you. Do you want to allow this?",
"confirmFullDeviceTitle": "Screen Share Request",
"confirmFullDeviceContent": "Do you want to share your full screen with the agent? The agent will not be able to control anything on the screen.",
"allowText": "Allow",
"denyText": "Deny"
}