用Chatfuel來做自己的聊天機器人吧!

Miki Fan
MorrisDesign
Published in
7 min readMay 24, 2017

來吧!這次要體驗的是不需要寫程式就能親手創造一個Facebook專用的聊天機器人(chatbot)!使用的是號稱七分鐘可以建立一隻聊天機器人的Chatfuel,免費!連結在此

https://dashboard.chatfuel.com/#/bots

做chatbot很簡單,但要做出小聰明就不簡單了

一開始只是看到chatfuel的網頁,好奇心驅使下就建立了一個測試的chatbot,沒想到在AI設置不夠完全、不夠聰明的狀況下,第一天就惹怒了使用者(悲劇 _(´ཀ`」 ∠)_)。

抱著「總不能放著不管吧!」的心情硬著頭皮把它做完,接下來就來分享步驟跟心得!有興趣的人也來建一隻吧~

我的chatbot叫做「吃點什麼好」,它可以告訴你附近的美食在哪裡,主要的問答只要設定基本AI就能有模有樣,但比較實際用途的功能就會使用到Chatfuel Plugins,在這個例子我用到三個插件, 分別是user input、share location、google site search, 結果就會像下面的對話這樣。

吃點什麼好

製作步驟如下

1.申請一個Facebook粉絲團

因為是建立在Facebook messenger的聊天機器人, Chat Bot需要粉絲團當媒介,之後任何人來粉絲團開始訊息對話就能跟你的機器人聊天

2. 申請chatfuel帳號,並連結到你的Facebook粉絲團

點擊右上角CONNECT TO FACEBOOK

3.設定Bot Structure及Blocks

Chatfuel的主要介面

(1) Welcome Message:是開啟對話就會顯示的訊息,將主功能做成按鈕就可以讓用戶輕鬆的選擇所需要的功能。我製作的功能非常簡單,就是餓了好無聊兩種。

餓了→詢問想吃什麼→請求用戶地點→搜尋附近用戶指定的美食

好無聊→推薦最近的新活動

(2) Default Answer:當bot無法辨識詞彙時會顯示的訊息,其實回答什麼都可以,但因為出現的機率非常高,所以還是老老實實的承認聽不懂,才能讓bot與用戶雙方都能快速理解狀況。

永遠存在的主要兩個架構Block

4.增加人性化的設定

有兩種方法可以增加人性化,讓chatbot更像真人

(1) 設定typing card:也就是所謂的跳動點點點,用在需要花費數秒,或是假裝思考的時候,讓用戶等一下,而不是急著跳出答案。

Typing card

(2) 設定AI:左方綠色是用戶可能會說的話,右方就是chatbot會吐出的回應,可以設定回應字串或是前面設置的block。這裡的字串是模糊比對,所以只要用戶說出類似的詞彙,系統也會自動比對並回答。

Set up AI的回應

除了主要功能,其他互動我都設定三個random的字串,這是反覆參考用戶的feedback才慢慢建立出來的,這時候就發現AI的個性很重要,若一直謙卑下去也不是辦法,所以我在回答中會穿插AI的小劇場,偶爾觸發就能得到更多用戶有趣的feedback。

其中我覺得很重要的一定要設定的面向: (1)針對負面、正面的情緒 (2)肯定句 (3)與主要功能相反的詞彙

很重要的一定要設定的面向

(1)針對負面、正面的情緒

只要不如預期,用戶就會噴發負面情緒的詞彙,此時我採用的方式是道別並停止對話。

(2)肯定句

一旦用戶丟出肯定句,身為好朋友的chatbot也要給予肯定,是很好的達到同理心的方式。

(3)與主要功能相反的詞彙

如果用戶本來就不是你的目標,那也許是時候跟他say goodbye了!

另外有趣的事情是…台灣不虧是水果王國,也有很多人提到水果,因此把我想到的先列了上去。其實很想要針對季節自動抓對應的水果列表,不曉得做不做得到(徵求高手分享~)

5. 重頭戲-Chatfuel Plugins

設定與實際對照圖

(1) User input

可以蒐集用戶輸入的資料當作一個屬性{{text}},原本是用來蒐集電話、信箱等聯絡資料,我拿來問用戶想吃什麼,當作google搜尋的關鍵字。

(2) Share location

要求用戶分享當前位置,當然也可以請用戶輸入地點,就再新增一個user input即可。**跪求高手分享怎麼判別用戶”已分享”,不用每次都重新詢問。

(3) Google site search

Custom Search API

照提示要拿到Google API key及Search engine ID很簡單,但這步驟我卡了非常之久,之前只大概知道API的用途,但第一次使用容易霧煞煞,所以用下面這張圖來解釋。

Chatfuel自動生成的是Custom Search API,我的理解是把App+Key+API(上圖的google service)串聯一起就通了,按下ENABLE後可以拿到Google API key

Custom Search API
Google API key

接著是Search engine ID

設定要搜尋的網站(我設定google),右方就能預覽結果

自訂搜尋網站

通通拿到以後,最後再設定下列兩個屬性,就完成了!

(1) Search request:搜尋的關鍵字,可以用屬性搜尋,不會在介面顯示。

(2) Subscription:出現的卡片群中,最後一張卡片顯示的字樣。

最後

悲劇總發生在每天下午,每天開始反覆測試一個小時後,才發現原來一天只能發出一百個requests,超過之後就會需要付費(悲劇 _(´ཀ`」 ∠)_)。但沒關係!作為一個小小prototype表現已經不錯了!

如果要了解其他可使用的api用途,請參考Google的介紹。有困難時可以翻翻Chatfuel社群,留言給我也可以。

這段體驗就到此告一個段落:)

2017/7/25 更新,找到最接近的理想的樣本-可記憶使用者地址、用戶講完餐點時以gallery的方式吐出訊息。不過必須使用JSON,下面有原始檔的Github網址,參考看看囉。

https://github.com/MedRist/Facebook-Bot-chat--NearBy-

--

--

Miki Fan
MorrisDesign

An Interaction designer. Sharing something learned from life.