ウェブチャット開発概要

ウェブチャット設定のスタイルタブで利用可能なオプションを超えてウェブチャットのスタイルと外観をカスタマイズしたい場合は、別のカーボンデザインテーマを選択することによって行うことができます。

サポートされているテーマは、IBMCarbon Designによって定義されたカラーテーマです。 カーボンテーマを設定するには、「carbonTheme設定オプションを使用する。

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

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

• ホーム画面に要素を追加するには、テーマ変数「writeableElements.homeScreenAfterStartersElement」を使ってカスタムHTMLを定義することができる：

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

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

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

ウェブチャットで表示される様々なラベルやハードコードされたフレーズを定義する文字列をカスタマイズすることができます。 文字列をカスタマイズするには、'updateLanguagePack()インスタンスメソッドを使用して、現在の言語パックの文字列を置き換える。 詳しくは「言語」を参照。

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

あなたのウェブサイトとの統合をより良くするために、ウェブチャットを開くための別のメカニズムで内蔵ランチャーアイコンを置き換えることができます。 デフォルトのランチャーを非表示にするには、「showLauncher設定オプションを「false」に設定する。 他のインタラクションに基づいてウェブチャットを開くには、'openWindowインスタンスメソッドを使用します。

チュートリアル：カスタムランチャーの実装方法を紹介するチュートリアルについては、カスタムランチャーを使うを参照してください。

あなたのページ上でウェブチャットを常に開いておきたい場合は、'openChatByDefault設定を開いてチャットウィンドウを開いた状態でページをレンダリングし、'hideCloseButtonオプションを使用して顧客が閉じるのを防ぎます。

あなたのウェブサイトの設計では、あなたのウェブサイト上でウェブチャットウィンドウを表示する場所と方法を変更する必要があるかもしれません。 たとえば、ページ上の別の位置に表示させたいとか、別のサイズで表示させたいとか、ページ上の別の要素の中に入れ子で表示させたいとか。

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

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

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

JavaScriptブリッジでWebViewを使用して、モバイルアプリケーションにWebチャットを追加することができます。 詳しくは、モバイルアプリケーションにウェブチャットを追加するをご覧ください。

イベントを購読することで、あなたのコードは顧客とアシスタントの間で送受信されるメッセージを傍受し、その内容を変更することもできる。

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

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

チュートリアルを参照してください： pre:receiveイベントを使用して受信メッセージをインターセプトし、修正する方法を示すチュートリアルについては、Tutorial: implementing custom option buttons in the web chatを参照してください。

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

チュートリアルデフォルトのオプションレスポンスの置き換えとしてカスタムレスポンスタイプをレンダリングする方法を示すチュートリアルについては、Tutorial: implementing custom option buttons in the web chatをご覧ください。

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

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

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

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

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

ウェブチャットを保護するために、JSONウェブトークン（JWT）を使用してユーザーを認証し、プライベートデータを暗号化することができます。 詳細については、ウェブチャットのセキュリティを参照してください。

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

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