IBM Cloud Docs
Web サイトへの Web チャットの追加

クラシック Watson Assistant エクスペリエンスの資料が移動しました。 最新バージョンについては、 Web チャットの概要を参照してください。

Web サイトへの Web チャットの追加

よくある質問やよく行われるタスクについて顧客に案内でき、人間の担当者に顧客を転送することもできるアシスタントを、企業の Web サイトに Web チャット・ウィジェットとして追加します。

Web チャット統合を作成すると、JavaScript で作成されたスクリプトを呼び出すコードが生成されます。 このスクリプトが、固有のアシスタント・インスタンスを生成します。 コードが生成されたら、その HTML の script 要素をコピーし、ユーザーがアシスタントに支援を求めることができるようにしたい Web サイトの任意のページに貼り付けます。

Web チャットがビジネスにどのように役立つかについて詳しくは、 この Medium のブログ投稿を参照してください。

Web チャット・インスタンスを作成して Web サイトに追加する

企業の Web サイトの Web ページにアシスタントを追加するには、以下の手順を実行します。

  1. 「アシスタント (Assistants)」ページから、サイトにデプロイするアシスタントのタイルをクリックして開きます。

  2. 「統合」セクションで、「Web チャットの統合」をクリックするか、「統合の追加」をクリックして、「Web チャット」タイルを選択します。

    Web チャット統合は、最初のアシスタントに自動的に追加されます。 「私の最初のアシスタント」を使用している場合は、「Web チャット」タイルをクリックして、追加された統合を開きます。

  3. オプション: Web チャット統合の名前を「Web チャット (Web chat)」から、よりわかりやすい名前に変更します。

    プレビュー・ペインが表示され、Web チャットが Web ページに組み込まれたときの Web チャットの外観が示されます。 There is an error で始まるメッセージが表示された場合、アシスタントに会話スキルがまだ追加されていないことを意味します。 スキルを追加した後、プレビュー・ペインから会話をテストできます。

  4. **「作成 (Create)」**をクリックして、Web チャット・インスタンスを作成します。

    Web チャット統合が自動的に作成された場合は、このステップをスキップできます。

    プラス以上のプランのみ プライベート・エンドポイントが使用されている環境では、Web チャット統合がトラフィックをインターネット経由で送信することに留意してください。 詳しくは、プライベート・ネットワーク・エンドポイントを参照してください。

  5. オプション: チャット・ウィンドウのスタイルをカスタマイズします。 次の変更を行うことができます。

    • 顧客に知られているアシスタントの名前: ユーザーがアシスタントを認識するための名前。 この名前がチャット・ウィンドウのヘッダーに表示されます。 名前の最大長は 64 文字です。

    • 基本色: Web チャット・ヘッダーの色。

      白いドットをクリックすると、カラー・スイッチャーが開かれ、色を選択できます。 色は HTML カラー・コード (ピンクは #FF33FC、緑は #329A1D など) で保存されます。 あるいは、HTML カラー・コードをフィールドに直接追加して色を設定することもできます。

    • 2 番目の色: ユーザー入力メッセージのバブルの色。

    • アクセント色: 対話式エレメントの色。これには、以下のものが含まれます。

      • Web ページに埋め込まれるチャットのランチャー・ボタン
      • 入力テキスト・フィールドに関連付ける送信ボタン
      • フォーカス時の入力テキスト・フィールドの枠
      • アシスタントの応答の開始を表すマーカー
      • クリックされたボタンの枠
      • ユーザーがオプションを選択するときのドロップダウン・リスト・フィールドの枠
      • 一時停止の応答を表すために表示されるタイピングの標識

    スタイルを変更すると、このページに表示されているプレビューにすぐに適用されるので、選択した内容がチャットの UI のスタイルにどのように影響するかを確認できます。

    • IBM ウォーターマーク: Web チャットウィンドウに表示される Built with IBM Watson のウォーターマークを有効または無効にします。 ライト・プランでは、すべての新規 Web チャット統合に対してウォーターマークが常に有効になっています。

  6. アシスタントまたは組織を表すイメージを Web チャット・ヘッダーに追加する場合は、「アバター・イメージの追加」をクリックします。

    誰でも取得できるように公開されている画像 (企業やブランドのロゴ、アシスタントのアバターなど) の URL を指定してください。 画像ファイルのサイズは、64 x 64 から 100 x 100 までです。

    保存 をクリックします。

  7. チャット・ウィンドウのホーム画面を構成します。

    ホーム画面があると、顧客がアシスタントとの会話を開始しやすくなります。 あいさつと、顧客がクリックできる簡単な質問のリストを会話スターターとして追加することができます。 詳しくは、「ホーム画面の構成」を参照してください。

    ホーム画面を使用しない場合は、「ホーム画面」タブに移動し、スイッチを「オフ」に切り替えます。

  8. オプション: サービス・デスクの担当者に会話を転送するためのサポートを構成するには、**「ライブ・エージェント (Live agent)」**タブをクリックします。 詳しくは、サービス・デスクのサポートの追加を参照してください。

  9. オプション: Web チャットでは、顧客が行き詰まった場合に、顧客が会話をリセットできるように提案のリストを表示します。 提案は自動的に有効になります。 提案を表示する頻度と、提案に含めるものを制御できます。 **「提案」**タブをクリックします。 詳しくは、追加の提案の表示を参照してください。

  10. オプション: Web チャットを保護するには、**「セキュリティー (Security)」**タブをクリックします。 詳しくは、Web チャットの保護を参照してください。

  11. **「埋め込む (Embed)」**タブをクリックします。

    チャット・ウィンドウの実装を定義するコード・スニペットが表示されます。 このコード・スニペットを Web ページに追加します。 コード・スニペットには HTML スクリプト要素が含まれています。 このスクリプトが、IBM サイトでホストされている JavaScript コードを呼び出します。 このコードは、アシスタントと通信するウィジェットのインスタンスを作成します。 生成されるコードには、リージョンおよび固有の統合 ID が含まれています。 これらのパラメーター値は変更しないでください。

  12. script HTML 要素をコピーします。 次のセクション、「実稼働でのアシスタントのデプロイ」で、このスクリプトを Web サイトに追加します。

  13. カスタマイズした場合は、**「保存して終了 (Save and exit)」をクリックします。 カスタマイズしていない場合は、「閉じる (Close)」**をクリックします。

    Web チャット・インスタンスは、「作成 (Create)」ボタンをクリックするとすぐに作成されます。保存する必要はありません。

実稼働でのアシスタントのデプロイ

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

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

  2. チャット・ウィンドウを表示する Web サイトの Web ページの HTML ソースを開きます。 コード・スニペットをページに貼り付けます。

    コードをできるだけ終了 </body> タグの近くに貼り付けて、ページがより速くレンダリングされるようにします。

    以下の HTML スニペットをテスト・ページのソースとしてコピーし、拡張子 .html のファイル形式で保存してテストに使用することができます。 この中のスクリプトの要素ブロックを、Web チャット統合のセットアップ・ページからコピーしたスクリプト要素に置き換えてください。

    <html>
<head></head>
<body>
    <title>My Test Page</title>
    <p>The body of my page.</p>

    </body>
</html>

  3. Web ページを更新します。

    Web チャットでサポートされる Web ブラウザーについては、「ブラウザー・サポート」を参照してください。

    チャット・アイコン

    Web チャットのランチャー・アイコンがページの端に表示されます。 アクセント・カラーをカスタマイズしない限り、このアイコンは青色です。

    Web チャットのアイコンの位置は、スクリプト要素を Web ページのソースのどこに貼り付けようと常に同じです。 チャット・ウィンドウは、div HTML 要素で表されます。

    開発者は、ランチャー・アイコンとその配置、チャット・ウィンドウのサイズと位置の変更など、より複雑なスタイル変更を行うことができます。 詳しくは、「拡張カスタマイズの適用」を参照してください。

  4. アイコンをクリックしてチャット・ウィンドウを開き、アシスタントに話しかけます。

    Web チャット・ウィンドウ

  5. アシスタントを顧客が利用できるようにする各 Web ページにコード・スニペットを貼り付けます。

    同じスクリプトのタグを、何ページでも必要なだけ、Web サイトのページに貼り付けることができます。 アシスタントの支援をユーザーが受けられるようにしたいすべての場所に追加できます。 ただし、必ず 1 ページにつき 1 回だけ追加してください。

  6. Web ページに表示されたチャット・ウィジェットからテスト発話を送信して、アシスタントがどのように応答するか確認します。

    ダイアログ・スキルを作成してアシスタントに追加するまで、応答は返されません。

    「エージェントへの接続」ボタンが表示されていて、ヒューマン・エージェント・サポートが構成されていない場合は、「提案」構成を変更して非表示にすることができます。 詳しくは、追加の提案の表示を参照してください。

    アシスタントのセッション・タイムアウトの設定を延長していない場合は、非アクティブな状態が 60 分続くと、現行セッションのダイアログ・フローは再始動されます。 つまり、ユーザーがアシスタントとの対話を止めてから 60 分後に、それまでの会話で設定されたコンテキスト変数の値はすべてヌルに設定されるか、初期値に戻されます。

開発者は API を使用して、Web チャットのスタイルにより高度なカスタマイズを適用できます。 詳しくは、「拡張カスタマイズの適用」を参照してください。

ランチャーの外観と動作

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

最初のランチャーの例

15 秒後にランチャーが展開され、ユーザーに挨拶メッセージが表示されます。 この展開状態でも、お客様はランチャーをクリックして Web チャットを開くことができます。 (ランチャーが展開される前に、お客様がページを再ロードしたり、別のページにナビゲートしたりすると、15 秒のタイマーが再始動します。) ユーザーがデスクトップ・ブラウザーを使用しているか、モバイル・ブラウザーを使用しているかによって、この拡張状態には 2 つのやや異なる外観があります。

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

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

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

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

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

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

ランチャーの色は、Web チャット設定の「スタイル」タブの「アクセント色」のフィールドによって指定されます。 色を変更するには、標準の 16 進数 RGB 値を使用して新しい色を指定します。

Web チャット設定の「ランチャー」タブでランチャーによって表示される挨拶メッセージをカスタマイズできます。 この設定には、ランチャーのデスクトップ・バージョンとモバイル・バージョンの別個のグリーティング・メッセージが含まれます。

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

ホーム画面の構成

デフォルトでは、Web チャット・ウィンドウにホーム画面が表示されます。この画面では、ユーザーを歓迎し、アシスタントとの対話方法をユーザーに伝えることができます。 ホーム画面では、ダイアログ・スキルの Welcome ノード、またはアクション・スキルの「お客様を迎える (Greet customer)」システム・アクションによって送信されるあいさつが置き換えられます。 (ホーム画面の代わりにウェルカム・ノードまたは「お客様を迎える」システム・アクションを使用する場合は、「ホーム画面」タブでホーム画面を無効にすることができます。)

ホーム画面の例を示します。

  1. アシスタントとの対話にユーザーを招き入れるあいさつを追加します。 挨拶する必要があります。

  2. 会話スターター・メッセージを 3 つ追加します。

    これらのメッセージは、顧客が尋ねることができる質問のタイプの例として Web チャットに表示されます。 顧客はいずれか 1 つをクリックして、アシスタントに送信することができます。

    会話スターターとして追加するすべてのメッセージについてテストする必要があります。 アシスタントが理解して正しく答えることができる質問のみを使用してください。

    アシスタントに複数のスキルが関連付けられている場合は、対話スキルが着信メッセージを振り分けます。 作成したアクションで会話スターター・メッセージに応答するには、そのアクションを呼び出すようにダイアログをセットアップしてください。 詳しくは、ダイアログからのアクション・スキルの呼び出しを参照してください。

    3 つの会話スターターがすべて必要です。

開発者は、ホーム画面をさらにカスタマイズすることができます。

  • **「始めに (Get started)」**見出しが、会話スターター・メッセージのリストの前に表示されます。 開発者は、Web チャットの言語ストリング・ファイル内の homeScreen_conversationStarterLabel を置き換えることによって、見出しテキストを変更できます。 詳しくは、 instance.updateLanguagePack()メソッド の資料を参照してください。
  • Web チャット API を使用して、ホーム画面ページに他の要素を追加することができます。 詳しくは、 instance.writeableElements()メソッド の資料を参照してください。
  • ホーム画面のスタイルを変更するために使用できる CSS ヘルパー・クラスについては、 事前作成テンプレート の資料を参照してください。

追加の提案の表示

提案 を使用すると、アシスタントとの現在の対話では期待している結果が得られないという場合に、顧客が別の方法を試せるようになります。 疑問符アイコン「疑問符アイコン」が Web チャットに表示されます。顧客はこのアイコンをいつでもクリックして、関心のある可能性がある他のトピックを表示したり、サポートを要求したり (構成されている場合) できます。 顧客は、提案されたトピックをクリックして、入力データとして送信したり、X アイコンをクリックして提案リストを閉じたりすることができます。

Web チャットのバージョン 3.1 以降、ある提案を選択して、その応答が役に立たなかった場合、顧客は提案リストをもう一度開いて別の提案を試すことができます。 最初の選択で生成された入力は、送信された後、会話の一部として記録されます。 ただし、次の提案が送信されると、最初の提案で生成されたコンテキスト情報はリセットされます。

提案は、提案を表示しないと顧客が不満を感じそうな状況で自動的に表示されます。 例えば、顧客が言い回しを変えながら何度も連続して同じ質問を行い、毎回、同じダイアログ・ノードがトリガーされた場合には、トリガーされたノードの応答に加えて、関連するトピックの提案が表示されます。 表示される提案によって、顧客が簡単に会話を元の軌道に戻せるようになります。

提案リストには、一致したインテントにある程度関連するインテントを条件とするダイアログ・ノードが取り込まれます。 それらのインテントは、AI モデルで代替候補と見なされたものの、ノードが明確化オプションとしてリストされるための高信頼度のしきい値を満たしていなかったインテントです。 ダイアログ・ノードの**「ノード名の表示 (Show node name)」設定をオフ**に設定しない限り、ダイアログ・ノードとノード名 (または外部ノード名)が、提案として表示されることがあります。

提案をカスタマイズするには、以下の手順を実行します。

  1. *「提案」*タブを開きます。

    新しい Web チャット統合では提案機能が自動的に有効になります。 有効になっていない場合は、提案のスイッチを**「オン (On)」**に設定してください。

    「サポートへの連絡を含める (Include a connection to support)」 セクションが表示されます。ここで、顧客からサポートに連絡できるようにするかどうかと、その連絡方法を構成できます。

  2. いつ、サポートへの連絡オプションを提案リストに表示するかを指定します。 次の項目から選択します。

    • 常時 (Always): サポートに連絡するオプションを提案リストに常に表示します。
    • 表示しない (Never): サポートに連絡するオプションを提案リストに表示しません。
    • 試行が 1 回失敗した後 (After one failed attempt): 顧客が直前の会話ターンで anything_else 条件のノードに到達した場合、または 2 回連続で同じダイアログ・ノードに到達した場合にのみ、オプションをリストに追加します。

  3. **「オプションのラベル (Option label)」**フィールドに、オプションのラベルを追加します。

    **「オプションのラベル (Option label)」**フィールドのテキストには、次の 2 つの機能があります。

    • このテキストは、顧客が選択できるオプションとして提案リストに表示されます。
    • 顧客がテキストを選択すると、新規メッセージとしてアシスタントに送信されます。 ラベルは、ダイアログで理解でき、かつ処理方法も既知である入力として機能するものでなければなりません。

    デフォルトでは、オプションのラベルとしてConnect with agentが使用されます。 Web チャットがサービス・デスクに統合されている場合は、転送要求を処理するようにダイアログが設計されている限り、このメッセージによって会話の転送が開始されます。

    Web チャットがサービス・デスクと統合されていない場合は、このオプションのラベルを、提供する何らかの形式のサポートに顧客がたどり着けるようにするメッセージに変更してください。 フリーダイヤルのサポート・ラインを提供する場合は、Get the support line phone numberを追加することができます。 また、オンライン・サポートの申請フォームを提供する場合は、Open a support ticketを追加することもできます。

    デフォルトのオプション・ラベルを使用するか、独自のラベルを追加するかにかかわらず、ダイアログがメッセージを認識し、適切に対応するように設計されていることを確認してください。 詳しくは、サポートに顧客をつなげるを参照してください。

Web チャットのバージョン 2.4 のみでは、Web チャットがサービス・デスク・ソリューションに接続されていない限り、提案を有効にすることはできません。 今後のリリースでは、ヒューマン・エージェント・サポートが構成されているかどうかに関係なく、提案を有効にすることができます。

ダイアログについての考慮事項

ダイアログに追加するリッチ応答は Web チャットに正常に表示されますが、以下の例外があります。

  • 人間のエージェントにつなげる (Connect to human agent): Web チャットでサービス・デスク・サポートを有効にした場合は、この応答タイプを使用してチャット転送をトリガーできます。 サービス・デスク・サポートを構成していない場合、この応答タイプは無視されます。
  • オプション: オプション・リストに含まれている選択肢が 4 つ以下である場合は、選択肢はボタンとして表示されます。 リストに含まれている選択肢が 5 つ以上である場合は、選択肢はドロップダウン・リスト形式で表示されます。
  • 一時停止 (Pause): この応答タイプは、チャットでのアシスタントの動作を一時停止します。 しかし、別の応答がトリガーされるまで、アクティビティーは一時停止後に再開しません。 pause 応答タイプを含める場合は、その後に必ず別の異なる応答タイプ (text など) を追加してください。

リッチ応答タイプについて詳しくは、リッチ応答を参照してください。

多様なプラットフォームにデプロイするアシスタントで同じダイアログを使用する場合は、統合タイプごとにカスタム応答を追加してください。 条件付き応答を追加して、Web チャット統合が使用されている場合にのみ特定の応答を示すようにアシスタントに指示することができます。 詳しくは、統合固有の応答の作成を参照してください。

Web チャット・セキュリティー

埋め込んだ Web チャットからユーザーを認証してプライベート・データを送信するように Web チャットを構成します。 詳しくは、Web チャットの保護を参照してください。

サービス・デスク・サポートの追加

Web チャットをサード・パーティーのサービス・デスク・ソリューションに統合して、あらゆる方向からのサポートを提供することで、顧客の満足を得ることができます。

以下のサービス・デスク・オファリングがサポートされます。

以下のサービス・デスクについては、完全に機能するリファレンス実装が提供されています。

スターター・キットのリファレンス実装は、機能はしますが例に過ぎません。実稼働環境での使用についてはまだ検証されていません。 これらの統合を実稼働環境にデプロイする前に、堅固なテストを実施する必要があります。

  • Bring your own: 独自のサービス・デスク統合を開発できるようにする Web チャット・サービス・デスク拡張スターター・キット。

サービス・デスク統合をセットアップしたら、誰かと話したいというユーザーの要求を理解して会話を正しく転送できるように、ダイアログを更新する必要があります。 詳しくは、チャット転送サポートの追加を参照してください。

Web チャット統合の制限

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

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

Web チャット・ウィジェットが MAU を追跡する方法について詳しくは、「請求」を参照してください。