創造你的聊天機器人

建立 LINE@ 聊天機器人

我們將在 GOSU BAR 中透過 Messaging API 來製作 LINE@ 聊天機器人

首先我們需要先了解 LINE@ 方案

大致上分為主動發送訊息的 Push API 以及被動回覆訊息的 Reply API 兩種

line_api_type.png
 
Push API:

可隨時發送訊息給 LINE@ 的好友,會衍生出對應費用。

計算方式:

1. 針對一個好友發送一次訊息組,則為發送一次訊息

2. 針對一個群組或聊天室發送一次訊息組,若群組或聊天室成員數為 N,則為發送 N 次訊息

免費方案每月有 500 次額度
一個訊息組最多可以包含五則文字、圖片、卡片、海報等訊息

 
Reply API:

免費,當 LINE@ 收到好友主動詢問服務時,於 30 秒內有一次回覆訊息組的機會。

使用時機:與 LINE@ 好友、好友對 LINE@ 發送訊息、好友點擊訊息上的按鈕等
一個訊息組最多可以包含五則文字、圖片、卡片、海報等訊息

 

透過 GOSU BAR 一點都不複雜

透過 GOSU BAR ,你除了可以選擇是否啟用 Push API 之外

GOSU BAR 將自動以最佳的方式進行訊息傳送,也就是當可以使用免費 Reply API 時,GOSU BAR 將自動切換至 Reply API,否則才切換以 Push API 發送訊息

 

那麼接下來我們要開始建立 LINE@ 聊天機器人囉!

首先進入 GOSU BAR 機器人管理 

P1TuH8I1vKRLX81o-image-1575822407960.png

選定社群平台並點擊按鈕

KETkTndxDsSfs87l-image-1575822490459.png

 

 

按照教學進行五階段的操作

SkX004GU6P9w8ziV-image-1575822697521.png


若你尚未使用過 LINE Developers,首次登入將會進到以下頁面進行資料填寫與信箱認證

daz9ZetwhJOMnKNS-image-1575822918955.png

 

以下為操作過程的參考畫面,畫面中填寫的資料為假資料,請自行填寫實際資料

bV8MK4thTVli87ei-image-1575823755196.png

 

設定 Webhook 時,最容易遇到的問題為 LINE Developers 後台的狀況

MdHjIrjl6x9UxYLv-image-1575823963837.png

只要確定 Webhook URL 沒錯即可,當點擊 Verify 時出現 xXtRvwwtCkHpBtcL-image-1575824522537.png  訊息則不須理會

同時重新整理頁面並確保 bhYxPbJwJaGLStaY-image-1575824592184.png是啟用狀態

若重新整理後發現狀態變回關閉,請再點擊啟用並等待數秒後重新整理並檢查是否成功

此過程可能需要嘗試數次才成功

 

於 GOSU BAR 平台中建立聊天機器人成功,如下圖:

Za28Rj3cph4XlA6y-image-1575824926686.png

接下來我們將進行以下步驟來嘗試功能是否正常

1. 與 LINE@ 成為好友,並對 LINE@ 發送文字或貼圖,接著來到 GOSU BAR 1 : 1 私訊 頁面確認 GOSU BAR 是否正確收到訊息

z1ybM7opdhil4LfF-image-1575825556004.png    MTA5sHb1ugnWzgDu-image-1575825603757.png

完成以上操作無誤,代表訊息接收正常,若發現 1 : 1 私訊頁面中沒有收到訊息時,請先嘗試重新整理,若還是沒有收到訊息請檢查以下幾個設定:

2. 使用 1 : 1 私訊發送訊息並確認 LINE 是否收到透過 GOSU BAR 平台發送的訊息

HH9UeWGYv4DBNuK1-image-1575826444325.pngKhoII3SDS6zf1XmG-image-1575826412191.png

 

 

 

 

 

 

 

 

完成以上操作無誤,代表訊息發送正常,若發現 LINE 沒有收到訊息時,請檢查以下設定:

 

完成以上操作後你就擁有 LINE@ 聊天機器人囉!

 

建立 Facebook 聊天機器人

我們將在 GOSU BAR 透過 Messenger 平台 的 API 來建立 Facebook 粉絲專頁聊天機器人

首先我們要了解一下 Facebook 的平台政策與特性,Facebook 的推播政策除了訊息訂閱、訊息標籤、廣告等主動行為外,要遵守平台的 24 小時互動政策,也就是當使用者主動與粉絲專頁的 Messager 詢問服務時,粉專就有 24 小時的時間可以持續與使用者訊息來往,就聊天機器人場景而言,此政策相對於 LINE@ 的 Reply API 是靈活許多。

 

此外,Facebook 本身是一個具有擴散特性的平台,更可以透過以下幾種機制引發使用者與粉專進行互動:

透過 Customer Chat Plugin (beta) 讓使用者進入 Messager 對話

 

在初步介紹 Facebook 後,將帶大家來進行 GOSU BAR 平台上的粉絲專頁權限授權,授權 GOSU BAR 能夠透過 API 對粉絲專頁與 Messager 操作與處理。

 

首先進入 GOSU BAR 平台的機器人管理 

CRU7eAe1fHbu99bU-image-1576842613940.png

 

建立聊天機器人,平台選擇為 Facebook 並按下 『+ 開始新增機器人』按鈕,此時,若你沒有登入 Facebook,頁面會跳到

kDnaSTrbU9BqPtpw-image-1576842814224.png

 

若已經登入則會直接跳到授權頁面

建議將全部粉絲專頁授權,以免既有已授權的粉絲專頁遭取消而無法使用。


Ed6Ds1xLhvk1iLTZzkJ-image-1576842857551.pngH5rw8ZUaCXO9FgQd-image-1576843465602.png

cW4WyzksQgQ7cvCG-image-1576844624821.png3Rw9nNgkq9qXcKMt-image-1576844633724.png

Syu3xATxm0clMMHW-image-1576844645034.png

3dBqPaV32lqodlUS-image-1576844653663.png

LwzF0PpaPQGHq1Sc-image-1576844662794.png

到這邊我們就擁有一個 Facebook 聊天機器人囉!





確認授權是否有效可以點到機器人的進階管理的『聊天機器人憑證設定』

如下圖,則代表授權有效中~

jXNau5LayftxjD7g-image-1576843695586.png

 

 

 

 

 

LINE Login 設定教學

透過 LINE Login 的幫助,我能夠做到在網頁中知道,正在瀏覽網頁的使用者的 LINE 身份為何。

首先我們進到 GOSU BAR 機器人進階管理中的 LINE LOGIN 設定,可以點擊初次設定教學開始進行設定唷!

ZX6IDzO9h1INoX6R-image-1576845265135.png

 

總共有四個階段

dh9NBnfnO5TFGBXe-image-1576845806401.png

 

當你設定完成後,請注意確實將 LINE Login 從 Developing 

8Gn7IidCjiWIAWi9-image-1576845959616.png

切換成 Published,當切換成功這個 LINE Login 回從只對管理者、開發者開放的狀態,變成對所有人都開放

SAdAgw0SX0g4gwdK-image-1576845997698.png

此外需確認是否有把 Linked OA 對應到你的 LINE 官方帳號,這樣 LINE Login 時才有辦法直接引導使用者與 LINE 官方帳號成為好友

DiakLqOCcW94kZHh-image-1576846065186.png

Callback URL 確實設定為:   https://api.gosu.bar/oauth/line/logged

mPixMXuFA2HdjscG-image-1576846255131.png

 

GOSU BAR 安全性白名單設定

PT6oaQtKiqHYZan3-image-1576846522432.png

Facebook Messager 選單設定

bX2sKHNfh7RHkGaS-image-1576846709364.png

 

接下來要教大家怎麼做到選單設定,首先進到 Facebook 機器人的進階設定,點擊左下角功能選單按鈕

wDd2u2xMmrFjnlTH-image-1576846831753.png

點擊後將會看到設定介面

9WuE3vaRirzrgbNg-image-1576846878602.png

緊接著我們開始進行選單的設定,選單中有三種項目可以新增,分別為,POSTBACK、連結、資料夾

POSTBACK 設定方式如下

XJfkEtAxERzqtsrT-image-1576847106644.png

 

設定完成後,就可以在 Messager 中看到結果囉~

Q9D02P0Cu0DLzeTs-image-1576847390144.png

 

 

那麼當使用者點擊了『功能導覽』後要怎麼接續服務流程呢?

請看以下流程範例:

oxCqZ3gSsc3PA30Z-image-1576847564537.png

uflYret17AtDkhH2-image-1576847597885.png

 

那麼最後我們會達到這樣的結果

Elvy4A8elu91NSUt-image-1576847669551.png