在 Axshare 上加入聊天按鈕,原生+第三方教學

Jerry Kitty Hsu
Axure Geek
Published in
4 min readMay 22, 2019

本功能使用 AxureRP 8 示範,AxureRP 9 能不能用還沒決定。

文章已搬至 AxureGeeks

範例頁面看這裡

這篇教學文可以整合並取代 在 Axure 加入發送郵件按鈕 的功能,如果學會這個功能就不用再看上面的教學文了,除非有更特殊的用途。

All in One 聊天按鈕 複雜度 ★★☆☆☆

由於大部分嵌入 ChatBot 都是使用 javascript 製作,我比較推薦這種無腦的ChatBot 整合器 —— keyreply

keyreply 服務的優勢在於簡單、沒有複雜後台,雖然沒有中文不過馬上就能產生一組程式碼放進網頁。

可以串接的服務有很多,常用的就是 Email、Line、Telegram、Slack、Facebook Messenger…甚至連電話、Facetime都OK

顏色甚至可以客製化(icon就沒辦法了)

常用客製化修改語法:<data align>決定按鈕在頁面左方還是右方、<data-color>圖案顏色

接者我們要將 聊天按鈕 加入到我們的Axshare中。首先進到網頁端Axshare管理介面,找到已經上傳的專案,點開小齒輪>Plugins

plugins 這個功能很容易被忽略

在還沒有加入語法的時候我們先點擊 『New Plugin』加入一段JS語法

將剛剛按鈕語法貼進Content就完成了,Plugin Name是識別管理,Location記得選擇建議的『End of the Body』,點選 Save 後進行下個步驟

這個畫面主要是管理Plugin會出現在哪些頁面,右下角勾選後未來的Plugin 都會在每個頁面出現,一樣點選 Save 後就完成了!

我們就可以在我們的網址上看見 Chat 的 icon 出現,不需要再 Upload 一次

以上是很基本的加入 Chat 功能在 Axshare上,同時因為是 Pin 在網頁上,所以同時適用手機網頁與App設計的 Prototype 中。

同場加映 —— Facebook 原生 Messenger 嵌入 複雜度 ★★☆☆☆

Facebook 粉絲專頁去年開放外掛程式,不過稍微複雜了一點,如果手上有粉絲專頁權限的人可以進行嘗試:

首先在粉絲專頁>設定>Messenger 開放平台中,找到顧客洽談外掛程式,並開始進行設定

步驟流程都是中文,相信沒有人看不懂XD,一直點繼續就可以了!

介紹本功能
設定問候語
設定品牌形象色彩

接下來是最重要的步驟,要把 https://xxxxxx.axshare.com 的網址加入到上方後儲存,聊天按鈕才可以顯示成功。

最後就是把語法用同樣的方式置入 Plugin 中,聊天按鈕就會出現了。

如果喜歡 Axure Geek 的內容,請用 👏 給我們支持與鼓勵,能分享更好!
最多可以 👏 50下哦!

--

--