Web チャットの仕組み

Web チャットには、コードを記述することなく Web サイトに追加できる、使いやすいチャットボット・インターフェースが用意されています。

ウェブサイトにウェブチャットスクリプトを追加すると、顧客はチャットウィンドウを開き、アシスタントと会話を開始するためのランチャーアイコンが表示されます。ランチャー・アイコンの外観は、デスクトップ・ブラウザーとモバイル・ブラウザーに対応しています。

顧客がこのランチャーをクリックすると、Web チャット・ウィンドウが開き、最初に_ホーム画面_が表示されます。ホーム画面には、挨拶と、よくある質問や問題に対する会話のきっかけとなる提案が表示されます。顧客は、会話スターターをクリックするか、または入力フィールドにメッセージを入力して、アシスタントとの会話を開始できます。

ランチャーアイコンの外観や動作、ホーム画面、その他ウェブチャットのほとんどの側面は、お客様のウェブサイトスタイルやブランドイメージに合わせて設定やカスタマイズが可能です。詳しくは、Web チャットの構成を参照してください。

ランチャーの外観と動作

Web チャット・ランチャーは、お客様を歓迎し、お客様が必要とする場合にヘルプを見つける場所を把握できるようにお客様を引き付けます。デフォルトでは、ウェブチャットランチャーは円として表示されます。右下隅に表示された：

15 秒後にランチャーが展開され、ユーザーに挨拶メッセージが表示されます。この展開状態でも、お客様はランチャーをクリックして Web チャットを開くことができます。（ランチャーが展開する前に、お客様がページを再読み込みしたり、別のページに移動したりすると、15秒のタイマーが再スタートします。）

この展開状態の外観は、顧客がデスクトップ・ブラウザーを使用しているのかモバイル・ブラウザーを使用しているのかによって若干異なります。

デスクトップ・ブラウザーの場合、展開されたランチャーには、顧客がクリックして Web チャットを開くことができる 2 つの基本ボタンと、ランチャーを閉じる**「閉じる」**ボタンが表示されます。

お客様がページを再ロードしたり、別のページにナビゲートしたりしても、展開されたランチャーは展開された状態のままになります。顧客が開封するまで、その状態が維持されます。顧客は2つの主要なボタンのいずれかをクリックすることで開くことができます。お客様がそれを閉じると、セッションの残りの間は、初期の小さな状態に戻ります。
モバイル・ブラウザーの場合、ランチャーに表示されるのは 1 つの基本ボタンのみです。

お客様は、ページ上でスクロールしたり、展開されたランチャーで右にスワイプしたり、10 秒待機したりすることによってランチャーを閉じることができます。その時点で、展開されたランチャーは自動的に初期の小さな状態に縮小されます。ランチャーが展開された状態でユーザーがページを再読み込みしたり、別のページに移動したりすると、ランチャーは展開された状態のままとなり、10秒タイマーが再起動します。

次のページ最新表示後に、ランチャーがクリックされずに小さい状態のままになっている場合、ランチャーは、顧客の注意を引くために上下にバウンドします。最初のバウンドは、ページ最新表示から 15 秒後に行われます。それでも顧客がランチャーをクリックしないと、60 秒後に再びバウンドが行われます。 (ユーザーがページを最新表示したり別のページにナビゲートしたりすると、2 回目のバウンドのタイミングに影響が及ぶ可能性があります。) それでもユーザーがランチャーをクリックしない場合、再びバウンドが行われることはありません。

ランチャー内に表示されるデフォルトテキストの言語は、ウェブチャットで設定されているロケールによって異なります。挨拶テキストをカスタマイズすると、ロケール設定に関係なく、指定したテキストが使用されます。

ウェブチャットの設定で、ランチャーの色と挨拶メッセージのテキストを設定することができます。詳しくは、Web チャットの構成を参照してください。

アシスタント出力のレンダリング

プレーン・テキストに加えて、watsonx Assistant は、マルチメディア・エレメントおよび対話式エレメントを出力するために使用できる多くの応答タイプをサポートしています。 Web チャットには、さまざまな応答タイプに対する組み込みサポートが含まれています。

テキストのフォーマット ：ウェブチャットでは、 Markdown またはHTMLを使用したテキストのフォーマットが可能です。詳しくは、 Markdown formatting を参照してください。
URL: 有効な URL (http://example.com など) はクリック可能リンクとして自動的にレンダリングされます。顧客が Web チャット内のリンクをクリックすると、ターゲット Web サイトが新しいブラウザー・タブで開きます。
オプション: オプション応答 (一連の選択項目から選択を行うようにアシスタントが顧客に求める場合) は、対話式エレメントとして自動的にレンダリングされます。 (デフォルトでは、5 つ未満のオプションのセットはクリック可能ボタンのセットとしてレンダリングされ、5 つ以上のオプションはドロップダウン・リストとしてレンダリングされます。)
日付: 日付を指定するようにアシスタントが顧客に求めると、Web チャットに対話式日付ピッカーが表示されます。顧客は、日付ピッカーをクリックすることによって、または有効な日付値を入力フィールドに入力することによって、日付を指定できます。
マルチメディア応答 (Multimedia responses): Web チャットは、すべてのマルチメディア応答タイプ (audio、image、および video) をサポートします。
IFrame: Web チャットは iframe 応答タイプをサポートします。この応答タイプの場合は、Web チャット・ウィンドウに HTML コンテンツ (フォームや対話式マップなど) が直接組み込まれます。

Web チャットが特定の応答タイプを処理する方法について詳しくは、レスポンス・タイプ・リファレンスを参照してください。

マークダウンの書式設定

アシスタントからのテキスト応答では、 Markdown ・フォーマットを使用して、イタリックなどの強調表示を適用したり、段落や見出しなどの要素を組み込んだりすることができます。 Markdown 形式の一般的な例を以下に示します。

見出し:

# First-level heading

## Second-level heading

強調表示:

This text includes *italic* and **bold** highlighting, as well as a `code` snippet.

リスト:
```
1. ordered
2. list

- bulleted
- list
```

表:

| Column 1 | Column 2 |
|----------|----------|
| Row      | One      |
| Row      | Two      |

リンク:

[This link](https://www.ibm.com/products/watson-assistant/demos/lendyr/demo.html) opens in a new tab.

[This link](https://www.ibm.com/products/watson-assistant/demos/lendyr/demo.html){{target=\"_self\" rel=\"noopener noreferrer\"}} opens in the same tab.

Markdown フォーマットについて詳しくは、 CommonMark 仕様を参照してください。

ライブ・エージェント転送

ウェブチャットは、アシスタントが対応できない状況では、顧客を人間に引き継ぐこともサポートしています。サポートされているコンタクトセンター統合のいずれかを設定すると、ウェブチャットは、顧客がライブエージェントとコミュニケーションを取ることができる別のチャットウィンドウを開くことができます。

その後で、アシスタントが、顧客の要求を処理できない状況で転送を開始できます。 (転送の開始について詳しくは、ライブ・エージェントへの接続を参照してください。)

コンタクト・センター統合を Web チャットに追加する方法については、コンタクト・センター・サポートの追加を参照してください。

技術的詳細

ウェブチャットは、短い JavaScript のコードスニペットをウェブサイトに表示することで、 IBM Cloud がホストする追加の JavaScript コードを呼び出します。ホストされたコードは、新機能や修正が自動的に適用されるため、デフォルトでは常に最新バージョンが利用できます。 (アップグレードを自分で制御したい場合は、オプションで特定バージョンにロックできます。)

Web チャット・ウィジェットを作成するコード・スニペットには、Web チャットの外観と動作を変更するために修正できる構成オブジェクトが含まれています。構成オブジェクトは、Web チャットをアシスタントにつなげられるようにする詳細も指定します。 JavaScript コードを書くことに慣れている場合は、コードスニペットを修正し、ウェブチャットAPIを使用することで、ウェブチャットをカスタマイズすることができます。

Web チャットは watsonx Assistant v2 ステートフル API を使用してアシスタントと通信します。デフォルトでは、セッションは終了し、会話は 5 分の非アクティブ状態の後に終了します。つまり、ユーザーがアシスタントとのやり取りを停止すると、5分後に、前の会話中に設定されたコンテキスト変数の値は、nullまたは初期値に戻されます。アシスタント設定で非アクティブ・タイムアウト設定を変更できます (プランで許可されている場合)。

アクセシビリティー

IBM は、年齢や能力を問わず、すべての人が便利に使用できる製品の提供に努めています。

Web チャット統合は、 Web Content Accessibility 2.1 Level AA 規格に準拠しています。これは、スクリーン・リーダーと自動化ツールの両方で継続的にテストされます。

課金

watsonx Assistant ユニーク・マンスリー・アクティブ・ユーザー（MAU）数に基づく課金。

デフォルトでは、新規ユーザーが初めてセッションを開始するときに Web チャットが固有の匿名 ID を作成します。この ID はファースト・パーティー Cookie に保管され、45 日間アクティブのままです。この Cookie がまだアクティブであるときに同じユーザーがサイトに戻ってアシスタントと再びチャットを行うと、Web チャット統合はそのユーザーを認識し、同じユーザー ID を使用します。同じ匿名ユーザーに対しては、1か月につき1回のみ課金されます。

Apple デバイスでは、インテリジェント・トラッキング防止機能により、7 日後にすべてのクライアント・サイド Cookie が自動的に削除されます。匿名の顧客が貴社のウェブサイトにアクセスし、2週間後に再度アクセスした場合、2回のアクセスは2つの異なるMAUとして扱われます。この問題を回避する方法については、 Web チャットでのユーザー ID 情報の管理を参照してください。

請求の目的でユーザー ID 情報の処理をカスタマイズする方法については、 Web チャットでのユーザー ID 情報の管理を参照してください。

使用量の測定方法は、プランのタイプによって異なります。ライト・プランの使用量は、Web チャット統合からアシスタントに送信された /message 呼び出し (API) の数で測定されます。それ以外のプランの使用量は、Web チャットと対話した月間アクティブ・ユーザー (MAU) の数で測定されます。許可される MAU の最大数は、watsonx Assistant のプランのタイプによって異なります。

計画の詳細
プラン	最大使用量
Enterprise	MAU 無制限
プレミアム (レガシー)	MAU 無制限
プラス	MAU 無制限
トライアル	5,000 MAU
ライト	10,000 API (約 1,000 MAU)

ブラウザー・サポート

Web チャットは、さまざまなデバイスやプラットフォームをサポートします。通常、直近の2つのバージョンのブラウザがデスクトップまたはモバイルのトラフィック全体の1%以上を占める場合、ウェブチャットはそのブラウザをサポートしています。

以下のリストは、Web チャットに最低限必要なブラウザー・ソフトウェアを示しています (特に記載がない限り、最新の 2 つのバージョンを含みます)。

Apple Safari
Apple Safari モバイル
Google Chrome
Google Chrome Android用
Microsoft Edge (Chromium および非 Chromium)
Mozilla Firefox
Mozilla Firefox ESR（直近のESRのみ）
Mozilla Firefox モバイル
Opera
Samsung モバイル・ブラウザー
Android 用 UC ブラウザー

モバイルデバイスでウェブチャットを最適に表示するには、ウェブページの <head> 要素に以下のメタデータ要素を含める必要があります

<meta name="viewport" content="width=device-width, initial-scale=1" />

言語サポート

デフォルトでは、ウェブチャットにはハードコードされたラベルとメッセージが英語で表示されますが、 watsonx Assistant がサポートするすべての言語に対応しています。また、さまざまな選択項目からロケールを選んで、グローバル・オーディエンスの日時など、ストリングの表示をカスタマイズすることもできます。

さらに、使用する言語が何であれ、いずれの定型ストリングのテキストもカスタマイズできます。

詳しくは、 Web チャットでのグローバル・オーディエンスのサポートを参照してください。

セキュリティー

デフォルトでは、Web チャットとアシスタントの間で送信されるすべてのメッセージは、Transport Layer Security (TLS) を使用して暗号化されます。より堅固な保護が必要な場合は、Web チャット・セキュリティー機能を有効にすることができます。

Web サイトに組み込む Web チャット組み込みスクリプトには、Web チャットがアシスタントに接続できるようにするための固有 ID (統合 ID やサービス・インスタンス ID など) が含まれています。これらの ID はシークレットとは見なされず、Web サイトにアクセスできるすべてのユーザーに表示されます。これらの ID を持つすべてのユーザーは、それらを使用してアシスタントにメッセージを送信し、その応答を受け取ることができます。ただし、これらの ID を使用して、アカウントへのログイン、アシスタントへの変更、アシスタントに関するログや分析情報の取得を行うことはできません。

アシスタントへの無許可アクセスが懸念される場合は、Web チャット・セキュリティー機能を有効にして、メッセージ発信元の検証やユーザーの認証などのセキュリティーを強化することができます。セキュリティー機能を有効にするには、Web サイトでさらに開発作業を行う必要があります。詳しくは、 Web チャット・セキュリティーを参照してください。

サイト・セキュリティー・ポリシーの更新

Web サイトでコンテンツ・セキュリティー・ポリシー (CSP) を使用している場合は、Web チャットに許可を付与するように CSP を更新する必要があります。

表。 CSP プロパティー には、CSP に追加する値がリストされます。

CSP プロパティー
プロパティー (Property)	値
`default-src`	'self' `*.watson.appdomain.cloud` 'unsafe-inline'
`connect-src`	`*.watson.appdomain.cloud`

default-src の個別の font-src がある場合は、 font-src とともに *.watson.appdomain.cloud を追加する必要があります。

以下の例は、完全な CSP メタデータ・タグを示しています。

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self' *.watson.appdomain.cloud fonts.gstatic.com 'unsafe-inline';connect-src *.watson.appdomain.cloud" />

エレメントの許可

もし、貴社の CSP が、 <script> や <style> タグなどの要素を許可リストに追加するために、nonce を使用している場合、 unsafe-inline を使用して、そのような要素をすべて許可しないでください。代わりに、構成オプションとして Web チャット・ウィジェットに nonce 値を指定してください。ウェブチャットは、動的に生成する <script> および <style> 要素のいずれかに、その都度異なる値をセットします。

Web チャット・ウィジェットに nonce を渡す CSP は、以下のようになります。

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self' *.watson.appdomain.cloud fonts.gstatic.com 'nonce-<server generated value>';connect-src *.watson.appdomain.cloud"
>

以下のように埋め込みスクリプトを編集することにより、nonce を Web チャットに渡すことができます。

window.watsonAssistantChatOptions = {
  integrationID: "YOUR_INTEGRATION_ID",
  region: "YOUR_REGION",
  serviceInstanceID: "YOUR_SERVICE_INSTANCE",

  cspNonce: "<server generated value>",

  onLoad: function(instance) {
    instance.render();
  }
};

Web チャットホストへのアクセス

Web サイトをホストするシステムでインターネット・アクセスが制限されている場合 (例えば、プロキシーまたはファイアウォールを使用している場合) は、以下の URL がアクセス可能であることを確認してください。

https://web-chat.global.assistant.watson.appdomain.cloud: Web チャット・ウィジェットのコードをホストし、Web サイトに埋め込んだスクリプトによって参照されます。
https://integrations.{location}.assistant.watson.appdomain.cloud: アシスタントとの通信を処理する Web チャット・サーバーをホストします。 {location} を、サービス・インスタンスが配置されているデータ・センターの場所 (サービス・エンドポイント URL の一部) に置き換えます。詳細については、エンドポイント URLの検索と更新を参照してください。

セキュリティーの確認

ウェブチャットの統合は、クロスサイトスクリプティング（XSS）脆弱性などの潜在的なセキュリティ問題を特定し、対処するために、定期的にテストとスキャンを実施しています。

Web チャットが現在の Web サイトの構造とポリシーにどのように適合するかを確認するために、必ず独自のセキュリティー・レビューを実行してください。 Web チャットはサイトでホストされ、サイトの脆弱性を継承できます。 HTTPS 経由でコンテンツを配信し、コンテンツ・セキュリティ・ポリシー（CSP）を使用し、その他の基本的なウェブセキュリティ対策を実施する。

セッション状態のコピー中

Web チャット統合は、現行セッションの状態をキャッシュとしてユーザーの Web ブラウザーに保管します。ユーザーがアシスタントに照会を送信すると、アシスタントはセッションの現在の状態のコピーとともに応答します。非アクティブ・タイムアウトが原因でアシスタント・セッションがサーバーで期限切れになると、Web チャットは新規セッションを作成し、前のセッション状態を新規セッションにコピーします。したがって、ユーザーが会話の途中にいる間にセッションの有効期限が切れた場合、ユーザーはユーザーからシームレスな会話を受け取ります。この状態は、ユーザーが Web チャットを開いた状態でブラウザー・タブを保持している間のみ保持されます。ユーザーがページを再ロードするか、ページを閉じるか、タブを閉じると、このセッション状態は失われ、ユーザーが次に Web チャットを開いたときに新しい状態で新しいセッションを取得します。サーバー上のセッションの有効期限が切れると、会話を続行するためにメッセージを送信する必要があるという警告がユーザーに表示されます。

Web チャットによって保管されたセッション状態には、プライベート変数は含まれません。これらの変数は、サーバーにのみ保管されます。古いサーバー・セッションの有効期限が切れた後に開始された新しいセッションで、アシスタントがサーバーから古いセッション状態をコピーすると、古いセッションから設定されたプライベート変数はすべて失われます。

Web チャットの仕組み

ランチャーの外観と動作

アシスタント出力のレンダリング

マークダウンの書式設定

ライブ・エージェント転送

技術的詳細

アクセシビリティー

課金

ブラウザー・サポート

Cookie および GDPR

言語サポート

セキュリティー

サイト・セキュリティー・ポリシーの更新

エレメントの許可

Web チャットホストへのアクセス

セキュリティーの確認

セッション状態のコピー中