@media (max-width: 1200px) {
}body .novashare-buttons.novashare-inline .novashare-button-icon { width: 100%; }
之前介紹過 WhatsHelp.io 在網站加入 Facebook、LINE 按鈕，讓讀者可與你保持聯絡的小工具，類似免費服務還有 MsgUs.io 和 Chat by KeyReply，選擇不少，這些服務共通點是能充分利用版面空間，讓我們在網站角落顯示一個有提示功能但又不過於搶眼的線上聯絡按鈕。本文要來介紹一款更精緻、能呈現更多資訊的聯絡小工具。
Pepper 是我最近發現的全新免費聯絡工具，它會在網站右下角（或左下角）顯示小按鈕，顏色跟圖示可讓使用者自訂，點擊後出現你設定的社群網路帳號，也能設定其他傳統聯繫方式，例如電話、Email 或網址，非常適合各種型態網站、部落格使用。
目前 Pepper 只有英文語系，即使不是顯示中文應該也能輕鬆上手。只要將產生的程式碼複製到網站任何位置，就能在網站加入這個小功能。
網站名稱：Pepper
網站鏈結：https://pepper.swat.io/
使用教學
STEP 1
開啟 Pepper 網站後，會有一個設定好的範例讓你預覽，你可以直接從左側來進行選項調整，例如 Intro 就是點擊按鈕後會看到的說明，出現在資料最上方，預設有 Facebook 和 Twitter 兩種社群網站鏈結，也能設定手機號碼、Email 和網站網址。
STEP 2
調整設定後，會在網站右側直接顯示預覽，例如我在 Intro 加入中文說明，一樣會正常顯示。此外，在下方 Add More… 選擇更多社群網站網址，加入後還能設定要顯示的排列順序。Pepper 在使用上還算簡單，樣式設計也很優雅，適合任何網站使用。
STEP 3
將網頁往下拖曳，會看到語言設定、按鈕位置及圖示標誌和顏色切換，預設情況下使用英文，顯示於網站右下角。可惜目前 Pepper 還未提供中文語系，不過就如同文章前半段所述，其實並不影響一般使用，中文也能夠正常顯示。
STEP 4
最後，點選「Copy Embed Code」快速複製產生的程式碼，將它貼到你的網站或部落格裡就能使用（一般建議貼在 </body> 標籤前）。可別看程式碼那麼長一串，其實它就只是載入 JavaScript 程式而已。
由於現在很多使用者是透過手機或平板電腦來瀏覽網站，Pepper 也能在這些行動裝置上正常顯示，且會自動調整圖示大小，不過度影響訪客瀏覽體驗。這項服務是完全免費的！無須註冊、下載或處理複雜程式，只要將產生的內嵌程式碼貼到網站，重新整理就能看到效果。
相關文章
- WhatsHelp.io 在網站加入 FB、LINE、WhatsApp App 按鈕，讓讀者與你保持聯絡
- mssg.me 將即時通訊按鈕集中在單一頁面，可建立 QR Code 及個性化網址
- StackWhats 將 WhatsApp 線上交談加入你的網站，點選開啟網頁聊天功能
- Messengerify 為網站加入臉書 Messenger 按鈕，更好用的即時傳訊功能
Ten articles before and after
Telegraph：Telegram 推出免費線上發佈平台，支援 Markdown 嵌入功能 – Telegram简体版
mssg.me 將即時通訊按鈕集中在單一頁面，可建立 QR Code 及個性化網址 – Telegram简体版
Telegram X 以 Swift 重新編寫應用程式 iOS、macOS 版免費下載 – Telegram简体版
Telegreat 非官方 Telegram 應用程式下載，台灣網友開發改進多種功能 – Telegram简体版
Telegram 推出免費留言系統 Comments for Websites 整合網站部落格教學 – Telegram简体版
WhatsHelp.io 在網站加入 FB、LINE 等 App 按鈕，讓讀者與你保持聯絡 – Telegram简体版
KUKU.io 貼文排程、自動同步多社群平台，支援臉書、推特、Google+ – Telegram简体版
All-in-One Messenger 同時用 WhatsApp、Messenger 等27種即時通訊服務 – Telegram简体版
Franz 整合 Slack、Facebook、WhatsApp 等八種即時通訊平台的免費軟體 – Telegram简体版
