Pepper 為網站加入免費小工具,顯示社群網站、Email、電話等聯絡資訊

Pepper 為網站加入免費小工具,顯示社群網站、Email、電話等聯絡資訊

之前介紹過 WhatsHelp.io 在網站加入 Facebook、LINE 按鈕,讓讀者可與你保持聯絡的小工具,類似免費服務還有 MsgUs.ioChat by KeyReply,選擇不少,這些服務共通點是能充分利用版面空間,讓我們在網站角落顯示一個有提示功能但又不過於搶眼的線上聯絡按鈕。本文要來介紹一款更精緻、能呈現更多資訊的聯絡小工具。

Pepper 是我最近發現的全新免費聯絡工具,它會在網站右下角(或左下角)顯示小按鈕,顏色跟圖示可讓使用者自訂,點擊後出現你設定的社群網路帳號,也能設定其他傳統聯繫方式,例如電話、Email 或網址,非常適合各種型態網站、部落格使用。

Pepper

目前 Pepper 只有英文語系,即使不是顯示中文應該也能輕鬆上手。只要將產生的程式碼複製到網站任何位置,就能在網站加入這個小功能。

網站名稱:Pepper
網站鏈結:https://pepper.swat.io/

使用教學

STEP 1

開啟 Pepper 網站後,會有一個設定好的範例讓你預覽,你可以直接從左側來進行選項調整,例如 Intro 就是點擊按鈕後會看到的說明,出現在資料最上方,預設有 Facebook 和 Twitter 兩種社群網站鏈結,也能設定手機號碼、Email 和網站網址。

Pepper

STEP 2

調整設定後,會在網站右側直接顯示預覽,例如我在 Intro 加入中文說明,一樣會正常顯示。此外,在下方 Add More… 選擇更多社群網站網址,加入後還能設定要顯示的排列順序。Pepper 在使用上還算簡單,樣式設計也很優雅,適合任何網站使用。

Pepper

STEP 3

將網頁往下拖曳,會看到語言設定、按鈕位置及圖示標誌和顏色切換,預設情況下使用英文,顯示於網站右下角。可惜目前 Pepper 還未提供中文語系,不過就如同文章前半段所述,其實並不影響一般使用,中文也能夠正常顯示。

Pepper

STEP 4

最後,點選「Copy Embed Code」快速複製產生的程式碼,將它貼到你的網站或部落格裡就能使用(一般建議貼在 </body> 標籤前)。可別看程式碼那麼長一串,其實它就只是載入 JavaScript 程式而已。

Pepper

由於現在很多使用者是透過手機或平板電腦來瀏覽網站,Pepper 也能在這些行動裝置上正常顯示,且會自動調整圖示大小,不過度影響訪客瀏覽體驗。這項服務是完全免費的!無須註冊、下載或處理複雜程式,只要將產生的內嵌程式碼貼到網站,重新整理就能看到效果。

分享本文
Pseric
Pseric

學生時代成立網站以來堅持每日更新,在挖掘資料的過程中慢慢找出自己經營網站的方法,最開心的是有一群一起長大的讀者。

文章: 6251