Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

Web SDK バージョン 2 から Web SDK バージョン 3 へのアップグレード

このページでは、ウェブ SDK バージョン 2 からウェブ SDK バージョン 3 にアップグレードする方法について説明します。ウェブ SDK を初めてインストールする場合は、ウェブ SDK v3 ガイドをご覧ください。

ウェブ SDK v3 の機能

ウェブ SDK v3 には、ウェブ SDK v2 にはない機能がいくつかあります。

カスタムフォーム: エージェントは、ウェブチャットインターフェース内でデータの収集フォームを直接送信できます。詳しくは、データの収集フォームをご覧ください。
ダウンロード可能な文字起こし: エンドユーザーは、ウィジェットからチャットの文字起こしを直接ダウンロードできます。詳しくは、チャットの文字起こしをウェブ SDK とモバイル SDK を使用してダウンロードするをご覧ください。
高度なプロアクティブチャットトリガー: 高度なプロアクティブチャットトリガーを使用します。たとえば、キューの言語を指定したり、URL キーワードに複雑な AND-OR ロジックを使用したりできます。詳しくは、プロアクティブウェブ SDK トリガーをご覧ください。

ウェブ 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 v3 は、UJET ヘッドレスクライアント上に直接構築されています。ウィジェット UI は、このヘッドレス構造を使用しているため、ccaas.client をターゲットにすることで、基盤となるすべてのメソッドにアクセスして呼び出し、ヘッドレス SDK がサポートするイベントをリッスンできます。

このセクションでは、ウェブ 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 では、初期化オプションはヘッドレス 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 ガイドをご覧ください。

テーマのカスタマイズ

ウェブ SDK v3 では、テーマのカスタマイズのアプローチが更新されています。詳しくは、テーマのカスタマイズをご覧ください。