ウェブチャット開発概要

ウェブチャットの形式と内容

ウェブチャットの外観のカスタマイズ：ウェブチャット設定の 「スタイル 」タブにあるオプションだけでは物足りない場合、別のCarbon Designテーマを選択することで、ウェブチャットのスタイルや外観をさらにカスタマイズすることができます。

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

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

ホーム画面のカスタマイズ：ホーム画面は顧客を出迎え、必要に応じて会話のきっかけとなる提案リストを表示します。 ホーム画面のスタイルとコンテンツをカスタマイズできます。

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

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

例： ホーム画面にカスタム要素を追加する方法を示す実例については、 「 AIアシスタントビルダーWebチャット用のホーム画面カスタム要素」 を参照してください。

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

文字列のカスタマイズ：Webチャットに表示される各種ラベルや固定文言を定義する文字列をカスタマイズできます。 文字列をカスタマイズするには、インスタンス updateLanguagePack() メソッドを使用して、現在の言語パック内の文字列を置き換えてください。 詳細については、 「言語」 を参照してください。

世界中のユーザーに対応：デフォルトでは、ウェブチャットに表示される文字列は英語です。 別の言語に変更するには、インスタンス updateLanguagePack() メソッドを使用して、現在の言語パックを、利用可能な翻訳済み言語パックのいずれかと置き換えてください。 詳しくは、ウェブチャットでグローバルオーディエンスをサポートするをご覧ください。

Webチャットウィンドウの表示、非表示、およびレンダリング

デフォルトのランチャーの置き換え：ウェブサイトとの連携を強化するため、組み込みのランチャーアイコンを、Webチャットを開くための別の仕組みに置き換えることをお勧めします。 デフォルトのランチャーを非表示にするには、設定オプション showLauncher を に設定してください false。 他の操作に基づいてWebチャットを開くには、インスタンス openWindow メソッドを使用してください。

チュートリアル： カスタムランチャーの実装方法については、 「カスタムランチャーの使用 」をご覧ください。

Webチャットを常に開いた状態に保つ：ページ上でWebチャットを常に開いた状態に保ちたい場合は、チャットウィンドウが開いた状態でページを表示する設定 openChatByDefault を使用し、顧客がウィンドウを閉じられないようにする hideCloseButton オプションを設定してください。

ウェブチャットのサイズや位置の変更：ウェブサイトのデザインによっては、ウェブチャットウィンドウの表示位置や表示方法を変更する必要がある場合があります。 たとえば、ページ上の別の位置に表示させたいとか、別のサイズで表示させたいとか、ページ上の別の要素の中に入れ子で表示させたいとか。

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

ウェブチャットウィンドウの位置を変更する必要がある場合、または CSS で許可されている制限を超えてサイズを変更する必要がある場合、ウェブチャットウィンドウを含むカスタム DOM 要素を使用することができます。 これを行うには、設定 element オプションを使用してください。

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

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

会話のカスタマイズ

メッセージの傍受と変更： イベントを登録することで、コードはユーザーとアシスタントの間で送受信されるメッセージを傍受し、その内容を変更することさえ可能です。

AIアシスタントに送信される前に顧客のメッセージをキャッチしたい場合は、この pre:receive イベントを登録してください。 例えば、メッセージ・テキストから個人を特定できる情報を削除したり、メッセージ・ペイロードにコンテキスト変数を追加したりすることが考えられます。

AIアシスタントからの応答が顧客に表示される前にそれを取得したい場合は、その pre:send イベントをサブスクライブしてください。 例えば、フォーマット、リンク、またはウェブチャット特有のその他の要素を追加したい場合があります。

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

カスタム応答タイプの表示： AI アシスタントがカスタム（user_defined）応答タイプを使用して特定の応答を送信する場合、Webチャットウィンドウにこれらの応答を表示するためのカスタムビューを実装できます。 これを行うには、レスポンス user_defined が受信されるたびに発生するイベント customResponse を登録してください。 イベントハンドラメソッドでは、レスポンスの内容を読み取り、独自の要素を使用して出力をレンダリングすることができます。

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

コンタクトセンターとの連携の実装：組み込みのAIアシスタントビルダー 連携機能で提供されているもの以外のコンタクトセンター（サービスデスク）プラットフォームと連携するには、Webチャットスターターキットのいずれかをご利用いただけます。 さらに、スターターキットを使用して、ご希望のプラットフォームとのカスタム統合を開発することもできます。

詳細については、「コンタクトセンターのサポートを追加する」を参照してください。

データの管理

ユーザーID情報の管理：Webチャットは、AIアシスタントに送信する各メッセージにユーザーIDを関連付けます。このユーザーIDは、ユーザー単位の課金やその他の目的で使用されます。 ウェブチャットが各ユーザーに匿名IDを生成することを許可するか、またはユーザーIDを自分で管理することができます。

Webチャットのセキュリティを有効にしているかどうかによって、ユーザーの識別情報を指定するために、インスタンス updateIdentityTokenupdateUserID メソッドまたはメソッドのいずれかを使用できます。

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

セキュリティーと管理

Webチャットのセキュリティ確保：Webチャットのセキュリティを確保するには、JSON Web Token（JWT）を使用してユーザーの認証を行い、個人データを暗号化することができます。 詳細については、 「Webチャットのセキュリティ対策」 を参照してください。

Webチャットのバージョンの管理： IBM Cloud でホストされているWebチャットのコードは、機能の改善や新機能の追加に伴い、定期的に更新されています。 デフォルトでは、埋め込みスクリプトは自動的に最新バージョンのウェブチャットを使用します。 あなたのウェブサイトに影響を与える可能性のある予期しない変更を避けるために、あなたのウェブサイトが使用するウェブチャットのバージョンを制御することをお勧めします、 新バージョンがリリースされたときに予期せぬ変更を避けるためだ。

ウェブチャットのバージョン管理については、ウェブチャットのバージョン管理を参照してください。