近年、AI技術の進化により、私たちのデジタル体験が大きく変わりつつあります。そのなかでも、チャットボットはビジネスやカスタマーサービスの分野で重要な役割を果たしています。しかし、より効果的なユーザーエクスペリエンスを提供するためには、ユーザーとの会話がよりパーソナライズされ、的確になる必要があります。
watsonx Assistantを利用してWebチャットボットを作る時に、サンプルコードをプレチャットフォームを実装してみました。この記事では、手順をシェアさせたいと思います。
実装イメージ：
準備
まず最初にwatsonx Assitstantのインスタンスを持っていなければなりませんね！
watsonx Assitstantのインスタンスを作成する方法は下記の記事にご参考ください。
チャットボットを新規作成するには下記の記事をご参考ください。
プレチャットフォームサンプルコードのリンクはここです。
Step 1 Session Variable(セッション変数)を作成する
左上のホームボタンをクリックするとナビゲーションが表示され、Actionをクリックします。
「Created by you」 をクリックして、右上の「New variable」をクリックします。
下記のようにセッション変数を作成します。
変数名「Name」に入力しますとVariable IDが自動的に生成されます。「Type」は「Free text」にします。
「Save」で保存できます。
作成した様子：
Step 2 チャットボットの挨拶を編集する
Actionの「Set by assistant」をクリック、次に「Greet customer」をクリックします。
デフォルトが下記のような挨拶文になりますが、左のConversation stepsのステップ1をクリックして内容を編集できます。
Assistant saysの部分先ほど作成したUser Name変数を追加します。
挨拶を入力します：
右上の「Save」で保存することを忘れないてね！保存したら隣ろの「Close」でActionのリストに戻れます。
[Option] Step 3 会話内容を作る
このステップをスキップしてもプレチャットフォームの動作に影響がありません。
Actionsの「Created by you」はデフォルトで空白になりますが、「Create action」をクリックして最初のアクションを作成しましょう。
ここにアクションのトリーガーとなるユーザーの発話を入力します。
ステップのAssistant saysにクリスマスの挨拶を入力して、 下部の「And then」を「End the action」にします。
できたらこんな感じですね。保存しましょう。
画面の右下にプレビューボタンがあります。クリックしてチャットボットの動きを確認してみましょう。
チャットボットの挨拶にはユーザーが入力する名前が表示され、「テスト」をチャットボットに送信したら「Merry Christmas」で返事します。
ここではまだ入力内容が取得されていないので、デフォルトの値が表示されています。
Step 4 Webチャットのプレビューを設定する
ナビゲーションからPreviewに移動します。
チャットボットのデフォルト挨拶画面が画面の右側に表示する通りですが、Step2で作成した挨拶を表示させるためにカスタマイズ設定が必要です。右上の「Customize web chat」をクリックします。
「Home screen」タブに移動して、スイッチをOffにして、右上の「Save and exit」で保存します。
Step 5 接続情報を取得する
ナビゲーションから「Integrations」に移動して、「Web chat」の「Open」ボタンをクリックします。
環境はDraftのままでOKです。「Confirm」をクリックします。
「Embed」タブに移動して、integrationID、regionおよびserviceInstanceIDをメモしましょう。
サンプルコードの下記のパスにconfig.jsファイルがあります:
assistant-toolkit/integrations/webchat/examples/pre-post-chat-forms/client/react/src
integrationID、regionとserviceInstanceIDの値を自分のチャットボットの環境情報に変更して保存します。
Step 6 プレチャットフォームを編集する
チャットボットの動きに影響がありませんが、プレチャットフォームの案内文を日本語に編集して操作を分かりやすくしましょう。
config.jsと同じパスに「forms」フォルダがあります。「preChatForm.js」の27行にあるlabelTextを「お名前を入力してください。」に編集して保存します。
起動しで実装結果を確認する
assistant-toolkit/integrations/webchat/examples/pre-post-chat-forms/client/ に移動して、下記のコマンドを実行します：
npm install
npm run start
Webブラウザを開いて localhost:3000 にアクセスします。画面の右下にある下記のアイコンをクリックするとチャットを開始できます：
チャットボットがプレチャットフォームに入力された名前が含まれる挨拶文を表示します。
いかがでしたでしょうか
今回は、ここまでです。
読んでいただき、ありがとうございました。それでは、Merry Chirstmas！