このページでは、Web SDK バージョン 2 から Web SDK バージョン 3 にアップグレードする方法について説明します。ウェブ SDK を初めてインストールする場合は、ウェブ SDK v3 ガイドをご覧ください。
Web SDK v3 にアップグレードする
まず、ソースコード内で次のスクリプトを見つけます。
<script type="module" src="https://websdk.ujet.co/v2/loader.js"></script>
これを次のコードに置き換えます。
<script type="module" src="https://{your_ccaas_host}/web-sdk/v3/widget.js"></script>
大きな相違点
このセクションでは、ウェブ SDK のバージョン 2 と 3 の主な違いについて説明します。
初期化
v2
const ccas = new UJET({
"companyId": "{companyId}",
"host": "https://{your_ccaas_host}",
"authenticate": getAuthToken
})
v3
var ccas = new UJET({
"companyId": "{companyId}",
"host": "https://{your_ccaas_host}",
"authenticate": getAuthToken
})
// v3 has a mount point
// ccaas.mount(HTMLElement | string)
ccaas.mount('#ccaas-widget')
オプション
ウェブ SDK を初期化するときに、オプションを指定します。このセクションでは、ウェブ SDK のバージョン 2 と 3 の違いについて説明します。
v2
v2 は該当なし。
v3
v3 では、初期化オプションは Headless SDK と同じです。
interface ClientOption {
companyId: string;
authenticate: () => Promise<TokenResponse>;
tenant?: string;
host?: string;
lang?: string;
bridge?: string;
cobrowse?: {
enabled: boolean;
template?: string;
messages?: CobrowseMessages;
api?: string;
license?: string;
trustedOrigins?: string[];
capabilities?: string[];
registration?: boolean;
redactedViews?: string[];
unredactedViews?: string[];
};
}
追加のオプションは ccaas.config() メソッドで構成できます。
ccaas.config({
disableAttachment: true
})
使用可能な構成オプション:
interface ConfigOptions {
accent?: AccentColor;
logo?: string;
menuKey?: string;
ticketId?: string;
preferredChannel?: string;
disableAttachment?: boolean;
customData?: string | Record<string, any>;
messages?: Record<string, unknown>;
reCaptchaSiteKey?: string;
}
メソッド
v2 では、ローダーに次のようなメソッドがいくつか追加されています。
ccaas.createCobrowseCode()
ccaas.fetchWaitTimes({id: 123})
v3 では、ウィジェット UI はヘッドレス クライアントを使用しているため、ヘッドレス SDK がサポートするすべてのメソッドを呼び出すことができます。
const client = ccaas.client
client.getCompany()
client.loadOngoingChat()
詳しくは、ヘッドレス ウェブ SDK ガイドをご覧ください。
イベント
v2 では、次の方法でイベントをリッスンできます。
ccaas.on('chat:update', (chat) => {
console.log(chat)
})
v3 では、ヘッドレス クライアントでイベントをリッスンできます。
const client = ccaas.client
client.on('chat.updated', (chat) => {
console.log(chat)
})
その他のイベントについては、ヘッドレス ウェブ SDK ガイドをご覧ください。
テーマのカスタマイズ
Web SDK v3 では、テーマのカスタマイズに対するアプローチが更新されています。詳細については、テーマのカスタマイズをご覧ください。