【Azure】チャットボットをWebサイトに置く

# 前のステップ
[Bot Serviceを作る](https://qiita.com/vicugna-pacos/items/adeab5caf0c438c46041)

# とりあえず利用する
Azureポータルでチャットボット作成後、Webサイトのチャネルで埋め込み用コードを取得できる。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/20b50f05-5023-89e1-b793-64e09a6f4aa7.png)

シークレットを置き換えた後、これを任意のHTMLに貼りつければボットを使えるようになる。

↓先ほどのタグを貼り付けた結果
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/84f7cede-06ff-aa98-d5da-4d4eb3106d09.png)

# Webチャットのカスタマイズ色々
先ほどの外観では、自社環境の雰囲気に合わなかったりして、カスタマイズしたくなるかもしれない。その場合、下記のサンプルサイトを参考にカスタマイズできる。

[microsoft/BotFramework-WebChat (MS製Webチャットのサンプル集)](https://github.com/microsoft/BotFramework-WebChat)

# JavaScriptを使ってWebチャットを挿入する
JavaScript(またはReact)を使用して、WebサイトにWebチャットを挿入することもできる。

```html
<!DOCTYPE html>
<html>
   <body>
      <div id="webchat" role="main"></div>
      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
      <script>
         window.WebChat.renderWebChat(
            {
               directLine: window.WebChat.createDirectLine({
                  token: 'YOUR_DIRECT_LINE_TOKEN'
               })
            },
            document.getElementById('webchat')
         );
      </script>
   </body>
</html>
```

https://github.com/microsoft/botframework-webchat/blob/master/README.md#integrate-with-javascript より。

上記サンプルの`YOUR_DIRECT_LINE_TOKEN`をiframe版で使ったシークレットキーに置き換えれば動作する。`YOUR_USER_ID`は削除してOKぽい。
ただ、見た目はiframe版と比較するとおそろしくシンプルになる。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/c8093bea-c276-0c3f-2a50-61e4471972c3.png)

# スタイルのカスタマイズ
ある程度の見た目は、JavaScriptで呼び出している`renderWebChat`メソッドに、`styleOptions`という引数を追加することで変更できる。

```javascript:カスタマイズのサンプル
const styleOptions = {
    botAvatarImage : 'image/chatbot-avatar2.png' // ボットのアイコン
    ,avatarSize: 60     // アイコンを少し大きく
    ,hideUploadButton: true     // ファイルアップロードを不可にする
};

window.WebChat.renderWebChat(
    {
        directLine: window.WebChat.createDirectLine({
            token: 'xxxx'
        }),
        styleOptions
    },
    document.getElementById('webchat')
);
```

↓実行結果
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/5320e193-7408-c2b1-8028-11a022a6537c.png)

参考：スタイルのカスタマイズ
https://github.com/microsoft/BotFramework-WebChat/blob/master/SAMPLES.md

参考：styleOptionsに指定できる値と既定値
https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/component/src/Styles/defaultStyleOptions.js

# 挨拶をページロード時に表示する
Azureから提供されるサンプルを使ってBot Serviceを作った場合、チャットボットとの会話の最初に挨拶を返す。
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/ba42d085-20bd-f0e1-3160-4d2deec6c156.png)

Webチャットで提供されるサンプルでは、チャットボットに話しかけて初めて挨拶が返されるので、これをページロード時に挨拶するように変更する。

```javascript
// 追加する部分　はじまり
const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
  if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
    dispatch({
      type: 'WEB_CHAT/SEND_EVENT',
      payload: {
        name: 'webchat/join',
        value: { language: window.navigator.language }
      }
    });
  }
  return next(action);
});
// 追加する部分　終わり

window.WebChat.renderWebChat({
  directLine: window.WebChat.createDirectLine({ token }),
  store  // 追加。styleOptionsも使用している場合、storeを第2引数にして、styleOptionsは第3引数にする。
}, document.getElementById('webchat'));
```