Web チャット設定の 「スタイル」 タブで使用可能なオプションを超えて Web チャットのスタイルと外観をカスタマイズする場合は、別の Carbon Design テーマを選択することによってカスタマイズできます。

サポートされるテーマは、 IBM Carbon Designによって定義されたカラー・テーマです。 Carbon テーマを設定するには、 carbonTheme 構成オプションを使用します。

テーマ内の個々の変数を設定して、特定の UI エレメントをカスタマイズすることもできます。 例えば、チャット・ウィンドウに表示されるテキストは、フォント IBMPlexSans, Arial, Helvetica, sans-serifを使用します。 別のフォントを使用する場合は、 updateCSSVariables() インスタンス・メソッドを使用して指定できます。

ホーム画面には顧客に挨拶が表示され、オプションで、提案された会話スターターのリストが表示されます。 ホーム画面のスタイルとコンテンツをカスタマイズできます。

• ホーム画面に要素を追加するには、 writeableElements.homeScreenAfterStartersElement テーマ変数を使用してカスタム HTML を定義できます。

  instance.writeableElements.homeScreenAfterStartersElement.innerHTML =
    '<div class="MyCustomClass">This is my custom element</div>';
  

  例: カスタム・エレメントをホーム画面に追加する方法を示す作業例については、 watsonx Assistant Web チャットのホーム画面のカスタム・エレメントを参照してください。

• ホーム画面のスタイルを変更するには、 CSS ヘルパー・クラスを使用します。

Web チャットによって表示されるさまざまなラベルおよびハードコーディングされた語句を定義するストリングをカスタマイズできます。 ストリングをカスタマイズするには、 updateLanguagePack() インスタンス方式を使用して、現行言語パック内のストリングを置き換えます。 詳しくは、 言語を参照してください。

デフォルトでは、Web チャットによって表示されるストリングは英語です。 別の言語に変更するには、 updateLanguagePack() インスタンス・メソッドを使用して、現在の言語パックを、使用可能な翻訳済み言語パックの 1 つに置き換えます。 詳しくは、 Web チャットでのグローバル・オーディエンスのサポート を参照してください。

Web サイトとの統合を向上させるために、組み込みのランチャー・アイコンを、Web チャットを開くための別のメカニズムに置き換えることができます。 デフォルトのランチャーを非表示にするには、 showLauncher 構成オプションを false に設定します。 その他の対話に基づいて Web チャットを開くには、 openWindow インスタンス・メソッドを使用します。

チュートリアル: カスタム・ランチャーの実装方法を示すチュートリアルについては、 カスタム・ランチャーの使用を参照してください。

Web チャットを常にページ上で開いたままにする場合は、 openChatByDefault 構成を使用して、チャット・ウィンドウを開いた状態でページをレンダリングし、 hideCloseButton オプションを使用して、顧客がページを閉じないようにします。

Web サイトの設計によっては、Web チャット・ウィンドウが Web サイト上でレンダリングされる場所と方法を変更する必要がある場合があります。 例えば、ページ上の別の位置に表示したり、サイズを変更したり、ページ上の別のエレメント内にネストしたりすることができます。

Web チャット・ウィンドウのサイズを変更するには、 updateCSSVariables() インスタンス・メソッドを使用して CSS スタイルを変更します。

Web チャット・ウィンドウの位置を変更する必要がある場合、または CSS で許可されている制限を超えてサイズを変更する必要がある場合は、カスタム DOM エレメントを使用して Web チャット・ウィンドウを含めることができます。 これを行うには、 element 構成オプションを使用します。

チュートリアル: カスタム要素で Web チャットをレンダリングする方法を示すチュートリアルについては、 チュートリアル: Web チャットのサイズと位置のカスタマイズ を参照してください。

WebView を JavaScript ブリッジと共に使用して、モバイル・アプリケーションに Web チャットを追加できます。 詳しくは、「 モバイル・アプリケーションへの Web チャットの追加」を参照してください。

イベントをサブスクライブすることで、コードは、顧客とアシスタントの間で送受信されるメッセージをインターセプトし、内容を変更することもできます。

顧客のメッセージがアシスタントに送信される前にそのメッセージをインターセプトする場合は、 pre:receive イベントにサブスクライブします。 例えば、メッセージ・テキストから個人情報を削除したり、メッセージ・ペイロードにコンテキスト変数を追加したりすることができます。

アシスタントからの着信応答が顧客に表示される前にインターセプトする場合は、 pre:send イベントにサブスクライブします。 例えば、Web チャットに固有のフォーマット設定、リンク、またはその他の要素を追加することができます。

チュートリアル: pre:receive イベントを使用して着信メッセージをインターセプトおよび変更する方法を示すチュートリアルについては、 チュートリアル: Web チャットでのカスタム・オプション・ボタンの実装 を参照してください。

アシスタントがカスタム (user_defined) 応答タイプを使用して特殊な応答を送信する場合は、これらの応答を Web チャット・ウィンドウに表示するカスタム・ビューを実装できます。 これを行うには、 user_defined 応答を受信するたびに発行される customResponse イベントにサブスクライブします。 その後、イベント・ハンドラー・メソッドで、応答の内容を読み取り、独自のエレメントを使用して出力をレンダリングすることができます。

チュートリアル: デフォルト・オプション応答の代わりにカスタム応答タイプをレンダリングする方法を示すチュートリアルについては、 チュートリアル: Web チャットでのカスタム・オプション・ボタンの実装 を参照してください。

いずれかの Web チャット・スターター・キットを使用して、組み込み watsonx Assistant 統合として使用可能なもの以外のコンタクト・センター (サービス・デスク) プラットフォームと統合することができます。 完全に機能する参照実装は、いくつかのコンタクト・センター・プラットフォームで使用できます。さらに、スターター・キットを使用して、選択したプラットフォームとのカスタム統合を開発できます。

詳しくは、 コンタクト・センター・サポートの追加 を参照してください。

Web チャットは、アシスタントに送信する各メッセージにユーザー ID を関連付けます。このユーザー ID は、ユーザー・ベースの請求およびその他の目的で使用されます。 Web チャットで各ユーザーの匿名 ID を生成できるようにすることも、ユーザー ID を自分で制御することもできます。

Web チャットのセキュリティーを有効にしたかどうかに応じて、 updateUserID インスタンス・メソッドまたは updateIdentityToken メソッドのいずれかを使用して、ユーザー ID 情報を指定できます。

ユーザー ID 情報の指定方法と使用方法について詳しくは、 Web チャットでのユーザー ID 情報の管理 を参照してください。

Web チャットを保護するには、JSON Web Token (JWT) を使用してユーザーを認証し、プライベート・データを暗号化します。 詳しくは、 Web チャットの保護 を参照してください。

IBM Cloud によってホストされる Web チャット・コードは、改善および新機能によって定期的に更新されます。 デフォルトでは、組み込みスクリプトは自動的に最新バージョンの Web チャットを使用します。 Web サイトに影響を与える可能性がある予期しない変更を回避するために、Web サイトで使用する Web チャットのバージョンを制御することができます。これにより、新規バージョンのリリース時に予期しない変更を回避するために、実動にデプロイする前に各新規バージョンをテストすることができます。

Web チャットのバージョン管理について詳しくは、 Web チャットのバージョンの制御 を参照してください。