Web Chat カスタマイジング (カスタム・ボタンの作成)

<img src="https://i.ibb.co/XjvptS4/2022-12-23-16-59-51.png" alt="2022-12-23-16-59-51" border="0">

Actions を使用すれば、ユーザーへの追加質問を選択肢として提示し、選んでもらうことが簡単にできます。
選択肢を**オプション**として定義すると、Web Chat 画面上は、**ボタン**として表示されます。
(ステップでのオプション定義イメージ)
<img src="https://i.ibb.co/NjBJ4GY/2022-12-23-9-28-00.png" alt="2022-12-23-9-28-00" border="0">
(オプション定義が反映された Web Chat 画面イメージ)
<img src="https://i.ibb.co/3zwh73Y/2022-12-23-9-30-56.png" alt="2022-12-23-9-30-56" border="0">

標準ではこんな感じで表示されます。
今回は、このボタンの形状をカスタマイズしてみます。

# いざ、カスタマイズ！

一からカスタマイズするのは、ちょっと大変なので、IBM が公開しているサンプルを使います。
サンプルのおかげであっという間にカスタマイズを体験できます。

### 前提条件

index.html の中で完結できるので、特に前提条件はありません。

### カスタマイズ手順
サンプル・コードは、Watson Developer Cloud の一部として公開されている [assistant-toolkit](https://github.com/watson-developer-cloud/assistant-toolkit) を使用します。
ソースコードをダウンロードします。zip 形式でダウンロードした場合は展開してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/fa0e8ba5-50e9-7b17-80fc-9015a24d56f2.png)

### サンプルコード

サンプルコードは、Watson Developer Cloud の一部として公開されている [webchat/examples/speetch-to-text](https://github.com/watson-developer-cloud/assistant-toolkit/tree/master/integrations/webchat/examples/speech-and-text)います。

場所は  ```assistant-toolkit/integrations/webchat/examples/custom-buttons/client``` です。
```shell:
cd assistant-toolkit/integrations/webchat/examples/custom-buttons/client
```

**JavaScript** 用と **React** 用のコードがあります。今回は、**JavaScript** 用を使用します。

```shell:
cd javascript
```

そうすると、**index.html** ファイルが 1 つあります。

218 - 220 行目を Web Chat のスニペットで置き換えます。
```Javascript:index.html 内の Javascript パート
149     window.watsonAssistantChatOptions = {
150       integrationID: "***ここを修正する***",
151       region: "***ここを修正する***",
152       serviceInstanceID: "***ここを修正する***",
153       onLoad: onLoad,
154     };
```
:::note info
[Web Chat のスニペットの探し方のリンク](https://qiita.com/yanagih/items/4ab4bbf5077f90ef73bf#web-chat-%E7%94%A8%E3%82%B9%E3%83%8B%E3%83%9A%E3%83%83%E3%83%88%E3%81%AE%E5%8F%96%E5%BE%97)です。
このようなイメージです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/63c99d1d-2e0c-c95d-0452-50fd8329efdb.png)
:::

修正したら、**index.html** を開きます。

(コマンドラインから起動したい方向け)

```shell: Macの方
open index.html
```
```shell: Windowsの方
start index.html
```

**『ピザの注文』** と入れてみます。
選択肢のボタンが大きく表示されました。
<img src="https://i.ibb.co/yn26kKT/2022-12-23-17-34-21.png" alt="2022-12-23-17-34-21" border="0">
ボタンの形状を変えるだけで印象が随分と変わりますね。
スマフォで表示する場合は**タッチしやすくなる印象**です。

# コードの解説

**index.html** の中で何を記述しているのか、概要をご説明いたします。

```#WACContainer.WACContainer``` プリフィックスを必ずつけてください。

:::note info
詳しくは、[User-defined responses](https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=api-render#user_defined_responses) を参照ください。
:::

カスタム・ボタンを CSS を使用して定義(9 行目から 38 行目)していきます。
**CardButton クラス**として作成しています。

<img src="https://i.ibb.co/wz9V30b/2022-12-23-17-47-19.png" alt="2022-12-23-17-47-19" border="0">

**pre:receive** イベントを使用して、**アクション**から送信されたきた内容をチェックし、メッセージのレスポンス・タイプが**option**だったら、**ユーザー定義レスポンス**を使用するように指示します。
<img src="https://i.ibb.co/1q5B17T/2022-12-23-17-51-38.png" alt="2022-12-23-17-51-38" border="0">

**customResponse** イベントを使用して、使用するレスポンスとして CSS を使って定義した **CardButton** を指定します。
<img src="https://i.ibb.co/FxsqQnN/2022-12-23-17-55-46.png" alt="2022-12-23-17-55-46" border="0">

# いかがでしたでしょうか

選択肢のボタンを CSS を使用してカスタマイズできるのは便利ですね。

# 参考情報

https://github.com/watson-developer-cloud/assistant-toolkit

https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=api-overview