Web チャットの仕組み

オンラインで編集する

ウェブチャットは、コードを書くことなくウェブサイトに追加できる使いやすいチャットボットインターフェースを提供します。

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

顧客がランチャーをクリックすると、Webチャットウィンドウが開き、最初は_ホーム画面_が表示されます。ホーム画面には挨拶文と、よくある質問や問題に対する会話のきっかけとなる提案（任意）が表示されます。 ユーザーは、会話のきっかけとなる項目をクリックするか、入力欄にメッセージを入力することで、 AIアシスタントとの会話を始めることができます。

ランチャーアイコン、ホーム画面、ウェブチャットの他のほとんどの外観や動作は、あなたのウェブサイトのスタイルやブランディングに合わせて設定し、カスタマイズすることができます。 詳しくは、Web チャットの構成を参照してください。

ランチャーの外観と動作

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

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

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

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

デスクトップ・ランチャーの例

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

  • モバイル・ブラウザーの場合、ランチャーに表示されるのは 1 つの基本ボタンのみです。

モバイル・ランチャーの例

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

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

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

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

AIアシスタントの出力を表示

AIアシスタントビルダーは、プレーンテキストに加え、マルチメディアやインタラクティブな要素を出力できるさまざまな応答形式に対応しています。 Web チャットには、さまざまな応答タイプに対する組み込みサポートが含まれています。

  • テキストのフォーマットウェブチャットはMarkdownまたはHTMLを使用したテキストのフォーマットをサポートします。 詳細については、Markdownの書式設定を参照してください。

  • URL: 有効な URL (http://example.com など) はクリック可能リンクとして自動的にレンダリングされます。 顧客が Web チャット内のリンクをクリックすると、ターゲット Web サイトが新しいブラウザー・タブで開きます。

  • オプション ： AI アシスタントが顧客に選択肢の中から選んでもらうよう求めた場合、その回答は自動的にインタラクティブな要素として表示されます。 (デフォルトでは、5 つ未満のオプションのセットはクリック可能ボタンのセットとしてレンダリングされ、5 つ以上のオプションはドロップダウン・リストとしてレンダリングされます。)

  • 日付 ： AI アシスタントが顧客に日付の指定を求めた場合、ウェブチャットにインタラクティブな日付選択画面が表示されます。 顧客は、日付ピッカーをクリックすることによって、または有効な日付値を入力フィールドに入力することによって、日付を指定できます。

  • マルチメディア応答 (Multimedia responses): Web チャットは、すべてのマルチメディア応答タイプ (audio、image、および video) をサポートします。

  • IFrame: Web チャットは iframe 応答タイプをサポートします。この応答タイプの場合は、Web チャット・ウィンドウに HTML コンテンツ (フォームや対話式マップなど) が直接組み込まれます。

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

マークダウンの書式設定

AIアシスタントからのテキスト応答では、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 』 仕様書を参照してください。

ライブエージェント転送

ウェブチャットでは、AIアシスタントでは対応できない状況において、お客様をオペレーターにつなぐことができます。 サポートされているコンタクトセンター統合のいずれかを設定する場合、ウェブチャットは、顧客がライブエージェントと通信できる別のチャットウィンドウを開くことができます。

AIアシスタントが顧客の要望に対応できない場合、 AIアシスタントが自動的に転送手続きを開始することができます。 （転送の手順については、 「オペレーターへの接続」 をご覧ください。）

技術的詳細

Webチャットは、 JavaScript の短いコードスニペットによってウェブサイトに表示されます。このスニペットは、 IBM Cloud でホストされている JavaScript の追加コードを呼び出します。 ホストされているコードは、新機能や修正によって自動的に更新されるため、デフォルトでは常に最新バージョンを利用することができます。 （アップグレードを自分で管理したい場合は、 任意で特定のバージョンに固定することもできます。）

Web チャット・ウィジェットを作成するコード・スニペットには、Web チャットの外観と動作を変更するために修正できる構成オブジェクトが含まれています。 この設定オブジェクトには、Webチャットを AIアシスタントに接続するための詳細も指定されています。 JavaScript のコード記述に慣れている方は、コードスニペットを修正したり、WebチャットAPIを利用したりして、Webチャットをカスタマイズすることができます。

このWebチャットは、AIアシスタントとの通信に、AIアシスタントビルダー 「 v2 」のステートフルAPIを使用しています。 デフォルトでは、5分間操作がないとセッションは終了し、会話も終了します。 つまり、ユーザーが AIアシスタントとのやり取りを中断した場合、5分後には、前回の会話中に設定されたコンテキスト変数の値はすべてnullに設定されるか、初期値に戻ります。 AIアシスタントの設定で、非アクティブ時のタイムアウト設定を変更できます（ご利用のプランで許可されている場合）。

アクセシビリティ

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

このウェブチャット機能は、Webコンテンツアクセシビリティガイドライン（ 2.1 ）のレベルAAに準拠しています。 これは、スクリーン・リーダーと自動化ツールの両方で継続的にテストされます。

課金

AIアシスタントビルダー の料金は、月間アクティブユーザー数（MAU）に基づいて算出されます。

デフォルトでは、新規ユーザーが初めてセッションを開始するときに Web チャットが固有の匿名 ID を作成します。 この ID はファースト・パーティー Cookie に保管され、45 日間アクティブのままです。 このCookieが有効な間に、同じユーザーがサイトに戻ってきて AIアシスタントと再度チャットを行った場合、Webチャット連携機能はそのユーザーを認識し、同じユーザーIDを使用します。 同じ匿名ユーザーに対して課金されるのは月に一度だけです。

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

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

使用量の測定方法は、プランのタイプによって異なります。 Liteプランの場合、使用量は、 Web チャット連携からAIアシスタントに送信されたAPI /message 呼び出しの数によって計測されます。 それ以外のプランの使用量は、Web チャットと対話した月間アクティブ・ユーザー (MAU) の数で測定されます。 利用可能なMAUの上限数は、 AIアシスタントビルダーのプランの種類によって異なります。

表 1. プランの詳細

計画

最大使用量

エンタープライズ・

MAU 無制限

プレミアム (レガシー)

MAU 無制限

プラス

MAU 無制限

トライアル

5,000 MAU

ライト

10,000 API (約 1,000 MAU)

ブラウザー・サポート

ウェブチャットは、様々なデバイスやプラットフォームをサポートしています。 一般的に、ブラウザの最後の2つのバージョンがデスクトップまたはモバイルトラフィック全体の1％以上を占めている場合、ウェブチャットはそのブラウザをサポートしています。

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

  • Apple Safari

  • アップル・サファリ・モバイル

  • Google Chrome

  • アンドロイド版Google Chrome

  • Microsoft Edge (Chromium および非 Chromium)

  • Mozilla Firefox

  • Mozilla FirefoxESR（最新のESRのみ）

  • Mozilla FirefoxMobile

  • オペラ

  • Samsung モバイル・ブラウザー

  • Android 用 UC ブラウザー

モバイルデバイスでウェブチャットをレンダリングする最適な結果を得るには、ウェブページの '<head>要素に次のメタデータ要素を含める必要があります：

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

クッキーとGDPR

ウェブチャットは、ブラウザが開いている間、現在のセッションを識別するためのIDを保存します。 これにより、ウェブチャットは、ユーザーがページをナビゲートしている間、セッションを開いたままにすることができます。 ユーザーがブラウザを閉じると、情報は削除されます。

  • Webチャットに を提供する場合 userID、ブラウザに保存されるデータやCookieは、現在のセッションのものに限られます。 この userID は、要求に応じてユーザーのデータを削除するために使用できます。これは、X- Watson -Metadata customer_idHTTP ヘッダーの一部としても渡されるためです。そのため、 userID の構文は、RFC 7230で定義されているヘッダーフィールドの要件（表示可能なASCII文字のみ）を満たす必要があります。 AIアシスタントのセキュリティ確保に関するページで、ユーザーデータの削除について詳しくご確認ください。

  • ウェブチャットに一意の「userID」を提供できない場合、生成された匿名IDを持つファーストパーティクッキーを追加します。 クッキーは45日間有効で、同じ月に複数回訪問した場合でもユーザーを1回にカウントし、課金指標を汚染しないようにします。

ウェブチャットでは、ユーザーエクスペリエンスを継続的に向上させるために、どのような機能が使用されているかのアナリティクスを保持しています。 収集されたデータはいずれもIBMのエンド・ユーザーを特定するものではなく、異なるウェブサイト間でユーザーが追跡されることもありません。 ウェブチャット内での行動のみを記録しています。

言語サポート

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

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

詳しくは、ウェブチャットでグローバルオーディエンスをサポートするをご覧ください。

セキュリティー

デフォルトでは、Webチャットと AIアシスタントの間でやり取りされるすべてのメッセージは、トランスポート層セキュリティ（ TLS ）によって暗号化されます。 より強固な保護が必要な場合は、ウェブチャットのセキュリティ機能を有効にすることができます。

ウェブサイトに組み込むWebチャット埋め込みスクリプトには、Webチャットが AI アシスタントと接続できるようにするための固有の識別子（統合IDやサービスインスタンスIDなど）が含まれています。 これらの識別子は秘密とはみなされず、あなたのウェブサイトにアクセスできる人なら誰でも見ることができます。 これらのIDをお持ちの方は、誰でもそれらを使って AIアシスタントにメッセージを送信し、返信を受け取ることができます。 ただし、これらのIDを使用してアカウントにログインしたり、 AIアシスタントの設定を変更したり、 AIアシスタントに関するログや分析情報を取得したりすることはできません。

AIアシスタントへの不正アクセスが心配な場合は、メッセージの発信元を確認したりユーザーを認証したりするなど、セキュリティを強化するためにWebチャットのセキュリティ機能を有効にすることができます。 セキュリティ機能を有効にするには、ウェブサイトの開発作業が増えます。 詳細については、 「Webチャットのセキュリティ」 を参照してください。

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

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

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

表 2. CSPのプロパティ

プロパティー

値

default-src

'self' '*.watson.appdomain.cloud'unsafe-inline'

connect-src

*.watson.appdomain.cloud

default-src については、別の font-srcがある場合は、 とともに を *.watson.appdomain.cloud 追加する必要があります font-src。 watsonx Orchestrate で AIアシスタントビルダーを使用している場合は、CSPポリシー内の プロパティ connect-src に *.watson-orchestrate.ibm.com を追加し、 *.watson.appdomain.cloud プロパティ style-src に を追加する必要があります。

以下の例は、完全な 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 が nonce を使用して '<script>や '<style>タグなどの要素を allowlist に追加する場合、'unsafe-inline使用してそのような要素をすべて許可しないでください。 代わりに、構成オプションとして Web チャット・ウィジェットに nonce 値を指定してください。 ウェブチャットは、動的に生成される '<script>と '<style>要素のいずれかに nonce を設定します。

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 サイトをホストするシステムでインターネット・アクセスが制限されている場合 (例えば、プロキシーまたはファイアウォールを使用している場合) は、以下の 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）を使用し、その他の基本的なウェブセキュリティ対策を実施する。

セッション状態のコピー

ウェブチャット統合は、現在のセッションの状態をユーザーのウェブブラウザにキャッシュとして保存します。 ユーザーが AIアシスタントに質問を送信すると、アシスタントはセッションの現在の状態のコピーを添えて返信します。 サーバー側で非アクティブタイムアウトにより AIアシスタントのセッションが期限切れになると、Webチャットは新しいセッションを作成し、以前のセッションの状態を新しいセッションにコピーします。 そのため、ユーザーが会話中にセッションが切れても、ユーザーからシームレスな会話を得ることができる。 この状態は、ユーザーがウェブチャットのあるブラウザタブを開いている間だけ保持されます。 ユーザーがページをリロードしたり、ページを離れたり、タブを閉じたりすると、このセッションの状態は失われ、次にウェブチャットを開いたときに新しい状態の新しいセッションを取得します。 サーバー上のセッションが切れると、会話を続けるにはメッセージを送る必要があるという警告がユーザーに表示される。

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