---
# System prepended metadata

title: 使用 Azure 服務在網頁中加入聊天機器人

---

# 使用 Azure 服務在網頁中加入聊天機器人
[toc]
# 步驟
## 1. https://www.qnamaker.ai/
帳號：學號@O365st.cycu.edu.tw
密碼：i-touch 的密碼
## 2. Create a knowledge base
![](https://i.imgur.com/4lLvKWP.jpg)
## 3. Create a QnA Service
![](https://i.imgur.com/V5VTQ7y.jpg)
### 3.1 設定名稱、方案、地區......等
![](https://i.imgur.com/ecaXgUL.jpg)

### 3.2 不用設定，直接下一步
![](https://i.imgur.com/oW44hFT.jpg)

### 3.3 確認資訊正確→建立
![](https://i.imgur.com/ILSqOiC.jpg)

### 3.4 等它跑
![](https://i.imgur.com/IIa6N9g.jpg)

![](https://i.imgur.com/lsI4GML.png)

### 3.5 QnA Service 完成
![](https://i.imgur.com/JaAPh3y.jpg)

## 4. 回到 https://www.qnamaker.ai/Create 頁面
## 5. 建立 Knowledge Base
### 5.1 Connect your QnA service to your KB.
### 5.1.1 Refresh
![](https://i.imgur.com/UulCBAi.jpg)

### 5.1.2 選擇剛剛建立的 QnA Service
![](https://i.imgur.com/dOQaA3G.jpg)

### 5.2 自訂KB的名稱
![](https://i.imgur.com/orSYIre.png)

### 5.3 Create your KB
![](https://i.imgur.com/qTGFVGH.png)

### 5.4 等它跑
![](https://i.imgur.com/Ag8Yy2Y.png)

### 5.5 KB建立成功
![](https://i.imgur.com/Mgt1vOI.png)

## 6. 輸入 QnA
![](https://i.imgur.com/hWfA0zf.jpg)

## 7. Save and train
每次更新KB後，都要記得 Save and train
![](https://i.imgur.com/oWLtckD.jpg)
![](https://i.imgur.com/QqwNSJ3.jpg)

## 8. 測試 Test
![](https://i.imgur.com/lWUu3Jt.jpg)


## 9. 發布 Publish
### 9.1 進 PUBLISH 分頁
![](https://i.imgur.com/cJB2gx1.jpg)
### 9.2 點選 Publish
![](https://i.imgur.com/R0MSsa2.jpg)
### 9.3 等它跑
![](https://i.imgur.com/FxMOQqb.jpg)
### 9.4 發布成功
![](https://i.imgur.com/cB84uUn.png)

## 10 建立機器人
### 10.1 Creat Bot
![](https://i.imgur.com/njE2M8C.jpg)
### 10.2 使用預設值，直接「建立」
![](https://i.imgur.com/IOjeZCh.jpg)
### 10.3 等它跑...
![](https://i.imgur.com/Jdd7MCR.jpg)
![](https://i.imgur.com/OQlqMiH.jpg)
### 10.4 Bot 建立完成
![](https://i.imgur.com/u4fN63A.jpg)

## 11. 找 chatbot 的 iframe
### 11.1 前往DashBoard
![](https://i.imgur.com/dOV5Jbz.jpg)
![](https://i.imgur.com/YuNDrVe.jpg)

### 11.2 找到 Web app bot 的那一個資源
![](https://i.imgur.com/Fnb3BHw.jpg)

### 11.3 選 「頻道(channel)」
![](https://i.imgur.com/0KfbVRa.jpg)

### 11.4 選 Web Chat
![](https://i.imgur.com/hZgm7WI.jpg)

### 11.5 選 Defautl site
![](https://i.imgur.com/iZJi8If.jpg)

### 11.6 取得內嵌程式碼及密鑰
![](https://i.imgur.com/tktTE1O.jpg)

## 12. 在Jsbin中使用機器人
https://jsbin.com/
![](https://i.imgur.com/eDoDJQK.jpg)


# 進階練習1：改成popup
用w3school的範例去改
https://www.w3schools.com/howto/howto_js_popup_chat.asp
![](https://i.imgur.com/Ude2POT.jpg)


# 進階練習2: 修改default 回答
1. 進到 Dashboard
2. 找類型是 App Service 的，選名稱後面沒有 Bot 的那一個
![](https://i.imgur.com/Uh6QArh.jpg)

3. 組態 configuration → Default Answer
![](https://i.imgur.com/8ikoncb.jpg)

4. 改成你像要的Default Answer
![](https://i.imgur.com/LkRAAnn.jpg)

# 進階練習3: 把你的聊天機器人放到github page上
https://jcliang7.github.io/test0811/chatbot01.html
![](https://i.imgur.com/dYDXaHL.png)

# 寫下你的心得吧
* 你學了哪些 Azure 的應用？
* 聊天機器人可以用來與身心障礙的小朋友互動嗎？

# 參考資料
* https://susanibach.wordpress.com/2018/08/23/how-to-add-an-faq-bot-to-your-website/
* https://github.com/microsoft/BotFramework-WebChat
* https://github.com/microsoft/BotFramework-WebChat/tree/main/samples
* 範本:
https://microsoft.github.io/BotFramework-WebChat/01.getting-started/a.full-bundle/



