watsonx Assistantの導入オプションをやってみた!「ページインタラクション」編

はじめに

watsonx Assistantの機能を体験できるデモサイトがあるのをご存知でしょうか。
この記事を見ることでwatsonx Assistantを簡単に体験することができます。

ただ、この記事を見てもっと自分でwatsonx Assistantをカスタマイズして使ってみたいと思った方もたくさんいらっしゃると思います。
そんな方にはデモ画面左下にあります導入オプションを試してみることがおすすめです。

この記事では導入オプションの中でもお客様対応( 回答する/実行する/見せる )の「ページインタラクション」を使ってどんなことができるかについて実際のカスタム例も示しながら、書きたいと思います。

また、同様のwatsonx Assistantの導入オプションシリーズが以下のようにありますので、ぜひ気になった導入オプションの記事をご覧になって試していただけると幸いです。

• watsonx Assistantの導入オプションをやってみた「iframe応答の追加」「ロケーションの共有」編

事前準備

この記事で紹介するカスタマイズでは前提としてwatsonx Assistantのセットアップが必要です。
この記事が参考になります。

ページインタラクション

ページインタラクションでは、watsonx Assistantのwebチャットとwebサイトとの間で通信することができます。
参考記事のデモサイトでは、クレジットカードの申請に必要な個人情報入力をwebチャットだけで済ますことができました。

それでは導入オプションをやってみましょう。

「お客様対応( 回答する/実行する/見せる )」のデモの3ページ目にて、左下の「ページインタラクション」を選択すると次のような画面が表示されます。

表示された画面は英語ですが、ここに書かれている内容を要約すると、webチャットが、設置されたwebページと通信する方法をガイドしています。
具体的には、例えばwatsonx Assistantのチャット欄のボタンをクリックすると、設置されたwebページの特定のフィールドをある値で埋めることができます。

では実際に体験してみましょう。

Runnning the JavaScript Example( ページインタラクションの実行例 )

はじめに、自分でカスタムしたチャットボットを動かす前に、事前に設定されたwatsonx Assistantで試しに触ってみましょう。

Runnning the JavaScript Exampleの下にあるリンクをクリックします。

表示されたhtmlファイルをダウンロードします。画面左端のダウンロードマークを選択します。

インストールされたindex.htmlというファイルをダブルクリック or Firefoxなどのブラウザの検索窓に貼り付けることで以下のような画面がブラウザに表示されます。

右下のチャットボットを開くと次のような画面が出てきます。

チャットボットを触る前に、先にこのチャットボットの目的を説明します。

このチャットボットの目的はwatsonx Assistantのチャットボットを操作するだけで、画面左上のテキスト欄を簡単に埋めることとなっております。
また、ここでのwatsonx Assistantからのチャットボット操作方法は２パターンでa. ボタンクリックとb. チャット欄入力の２パターンです。それぞれ見ていきます。

a. ボタンクリック
まずはwatsonx Assistantのボタンクリック操作で左上のテキスト欄の口座番号を入力します。
watsonx Assistantに表示されている「Fill in account number」をクリックしましょう。

すると以下のように左の口座番号の欄が自動で入力されました。

b. チャットテキスト入力
次に左上のテキスト欄の電話番号をwatsonx Assistantのチャット操作で入力します。
チャット欄に「fill phone number」と入力してみましょう。

テキストを送信すると画面左の電話番号の入力欄が自動で埋まりました。

このようにwebページを直接操作することなく、チャットボット内だけの操作でwebページの要素を操作することができました。

この機能を使うことで、例えばクレジットカードの申請において、個人情報の入力のためにチャットボットとwebサイトを行き来せずにチャットボットの中だけで完結できるようなユーザー体験を作ることができます。デモサイトのシナリオがこれでした。

また、今回の例ではユーザーは口座番号や電話番号を直接入力する必要はありませんでした。「電話番号を埋めて」とメッセージを打つだけで事前に登録された電話番号などの情報を呼び出して使うことができました。

watsonx Assistantはイライラしないチャットボットであると言われますが、この辺りの機能もその理由の一つだと言えそうです。

Setting up your own assistant( watsonx Assistantのカスタマイズ )

それでは次にこの機能を使ってwatsonx Assisntantを独自にカスタマイズしてみましょう。

先ほどのgithubの画面に戻りましょう。

ここからカスタマイズできます。リンクを開きます。

先ほどと同様にファイルをダウンロードします。

それでは独自のカスタマイズをしてみましょう。
元々のデモでは口座番号と電話番号を自動で入力するデモでした。独自のカスタマイズでは自動入力のボタンとテキスト入力のイベントを１つずつ追加しましょう。

まずはwatsonx Assistantの設定をします。
先ほどダウンロードしたactionファイルを使ってwatosnx Assistantを構築します。アクションファイルのアップロードについてはこの記事が参考になります。

次に先ほどの章でダウンロードしたHTMLファイルを変更します。
先ほど構築したwatsonx Assistantを設定します。変更する点は以下の箇所です。(98行〜100行目)

ここに入力する値はwatsonx Assistantの画面から探します。
まず左のタブから「Environments」を選択します。

Web chatを選択します。

「Embed」を選択します。

ここにintegrationIDとregion、serviceInstanceIDがあるので、それぞれHTMLファイルに適用します。

次にイベントハンドラーを追加します。
ボタンを押すことでメールアドレス、テキストの入力で日付が追加されるようにしましょう。

HTMLを引き続き編集します。

メールアドレスと日付が入力されるフィールドを追加します。上記28行目以降に以下を追記します。

index.html

<p>
    <label>
        Mail address
        <input id="mail-address" type="text">
    </label>
</p>
<p>
    <label>
        date
        <input type="date" name="example" id="date">
    </label>
</p>

ブラウザで表示する場合は以下のようになるはずです。(ブラウザによって少し変わります)

次にJavascriptを編集します。
クリックするとwebページ上の要素と対話できるカスタムボタンを表示するために、CustomeResopnseイベントハンドラーを設定します。詳しい設定方法はこちらです。

HTMLファイルに戻ります。

HTMLファイルの96行目以降に追記します。

index.html

mailaddressResponseHandler(event, instance);

user_defined_typeなどでイベントを詳しく設定することもできますが、今回のターゲットから外れますので、ここでは条件はつけずに設定しています。

次にmailaddressResponseHandlerの設定を作成します。

HTMLファイルの65行目以降に追記します。

index.html

function mailaddressResponseHandler(event) {
  const { element } = event.data;

  const button = document.createElement('button');
  button.type = 'button';
  button.innerHTML = 'Fill in mail address';
  button.addEventListener('click', () => {
    // Look for the account number element in the document and fill in the account number. You could get this value
    // from a context variable in the message.
    document.querySelector('#mail-address').value = '[e-mail]';
  });

  const container = document.createElement('div');
  // This class name will allow our button to look like the default buttons used in web chat.
  container.classList.add('ibm-web-chat--default-styles');
  container.appendChild(button);

  element.appendChild(container);
}

ここではwebチャットへのボタンの設置、ボタンを押した時の挙動を設定しています。

ここまでの編集の結果をwebサイトで確認します。

新たに追加された「fill in mail address」をクリックするとメールアドレスが記入されます。

次にテキスト入力による日付の入力ですが、まずwatsonx AssistantのAction設定から始めます。
watsonx Assistantに戻ります。

この記事を参考にwatsonx AssistantのActionを設定します。
interactionは「fill date of today」にしておきます。

次にこのアクションのステップ１のAssistant saysを設定します。
「本日の日付を入力しました」にしましょう。

次にこのステップのuser_defined_typeを設定します。この値をイベントのトリガーにします。
＜/＞をクリックします。

下の画像のようにコードを変更します。

記入したコードは以下です。

"user_defined": {
    "user_defined_type": "fill_date_time"
},

続いてHTMLファイルを編集します。

97行目以降にfill_date_timeを受け取った際の挙動をJavascriptで記入します。

記入するコードは以下です。

if (message.output.generic && message.output.generic[0].user_defined && message.output.generic[0].user_defined.user_defined_type === 'fill_date_time') {
    var today = new Date();
    const formatted = today
    .toLocaleDateString("ja-JP", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
    })
    .split("/")
    .join("-");
    document.querySelector('#date').value = formatted;
}

今日の日付をフォーマットを正した状態で値に代入しています。

これでカスタマイズは終了です！
HTMLファイルをダブルクリック or Firefoxなどのブラウザの検索窓に貼り付けることでチャットボットを試すことができます。

最後に

今回示しましたは、webチャットと設置されたwebサイトの通信を行う方法についてでした。これにより、webチャットのやり取りの中で、webサイトへの記入が必要な場合にもwebサイトとwebチャットをわざわざ行き来せずに、webチャットのみでやり取りを完結させることができます。
watsonx Assistantはユーザーにイライラさせない顧客体験を実現するチャットボットとして有名ですが、こういった機能がその要素であることを私自身理解することができました。

以上です、ここまで読んでいただきありがとうございました。