利用 Blocksy 的彈出視窗、Fluent Forms 建立便捷的聊天小工具 Chat Widget
對於提供服務與商品銷售的網站來說,站長們勢必要提供能與客戶、潛在顧客們方便溝通的管道,最好的方式就是在網頁的下方角落使用可以與站長、客服直接溝通的按鈕、氣泡或聊天室。
這類的功能我們一般稱為聊天室 (Chat Box)、聊天小工具 (Chat Widget)、客服小工具 (Support Widget),常見的會是小圖示、按鈕懸浮在頁面右下或左下角落,當訪客點擊小圖示、按鈕之後會跳出對話框,訪客可以直接與客服溝通或是填寫問題之後再送出。
使用這類工具一般都需要支付額外費用,採取月或年訂閱的方式付費,尤其是具備「即時聊天」與「統計分析」功能的聊天室;而大多數的聊天小工具則是不夠輕量,嵌入網頁後容易影響頁面載入效率。
這篇文章將與大家分享如何製作便捷的聊天小工具,方便訪客快速找到與站長、客服人員溝通的管道,只需要使用到少數工具就能製作出美觀、輕巧的聊天小工具。
- 透過 Blocksy 佈景主題編輯器,利用 Blocksy Pro 的 Content Blocks 功能,製作懸浮的聯絡客服按鈕 (Chat Button) 以及聊天對話框 (Chat Box) 的彈出視窗。
- 使用免費版 Kadence Blocks 區塊編輯器外掛,利用其 Info Box、Tabs 區塊,可以自訂聊天對話框的設計與呈現樣式。
- 使用 Fluent Forms Pro 表單外掛,利用其聊天式表單 (Conversational Form) 嵌入聊天對話框中,創造訪客留言、詢問時的聊天情境。
- 使用「自訂 HTML」區塊,將 Tabs 區塊中的頁籤各自連結到對應的社群聊天功能。
Blocksy 佈景主題編輯器
Blocksy 是快速崛起、頗受網頁設計社群青睞的輕量佈景主題編輯器,除了彈性、美觀的 UI、UX 設計之外,Blocksy 還提供了 37 種不同主題的 Starter Sites 範本 (陸續增加中) 讓大家可以快速建立網站。
Blocksy 目前提供的網站主題範本有:
- Furniture – 家俱類電商網站
- E-Bike – 電動自行車電商網站
- Pottery – 陶藝作品電商網站
- Smile Dent – 牙醫診所
- Smart Home – 智能家庭 (產品解決方案)
- Daily News – 每日新聞
- Cosmetic – 彩妝
- Real Estate – 房地產
- Photo Studio – 攝影工作室
- Restaurant – 餐廳
- Wood – 木工工作室
- Renovation – 裝修
- Beverr – 網站設計工作室
- Catering – 外燴
- Barber Shop – 美容、理髮
- Bizonsult – 商業諮詢顧問
- Gadgets – 科技小物電商網站
- Home Decor – 室內設計
- Cleaning Service – 清潔、打掃服務
- Car Service – 汽車維修、美容服務
- Floreo – 植栽、花藝
- Garderobe – 時尚選品
- Petsy – 寵物
- Justice – 專業服務
- Wedding – 婚禮
- Web Agency – 網路服務 (Saas、WordPress 外掛等) 創業、開發
- Persona – 個人網站
- Yogi – 瑜珈工作室
- Homi – 生活風格、居家選物
- Tasty – 食譜分享
- Business – 商業服務
- Review Hub – 產品推薦、評論
- Charity – 慈善、NGO
- Travel – 旅遊風格
- App – 應用程式、網路服務
- Modern Shop – 線上購物
- News – 新聞
可以到官網看看這些 Starter Sites 範本的實際樣貌,做為網站設計的參考唷。
在這篇文章中我們會使用 Blocksy Pro 付費版的 Content Blocks 功能,讓我們從安裝佈景主題與外掛開始!
安裝 Blocksy 佈景主題
首先,到 WordPress 後台的外觀 > 佈景主題,點選「安裝佈景主題」後搜尋 Blocksy。
![利用 Blocksy 的彈出視窗、Fluent Forms 建立便捷的聊天小工具 Chat Widget - blocksy theme builder install blocksy-theme-builder-install](https://www.quantsnote.com/wp-content/uploads/2021/08/blocksy-theme-builder-install.png)
並點擊「安裝」。
安裝 Blocksy Companion 外掛
因為接下來介紹的 Content Blocks 是需要購買 Blocksy Pro 才會有的 Pro Extensions 功能,所以直接登入 Blocksy 帳號下載最新版的 Blocksy Companion。
接著按照安裝外掛的方式在 WordPress 後台上傳、安裝即可。
![利用 Blocksy 的彈出視窗、Fluent Forms 建立便捷的聊天小工具 Chat Widget - blocksy companion premium download blocksy-companion-premium-download](https://www.quantsnote.com/wp-content/uploads/2021/08/blocksy-companion-premium-download.png)
如果想先使用免費版的人,可以到外掛 > 安裝外掛搜尋 Blocksy Companion。
![利用 Blocksy 的彈出視窗、Fluent Forms 建立便捷的聊天小工具 Chat Widget - blocksy companion plugin blocksy-companion-plugin](https://www.quantsnote.com/wp-content/uploads/2021/08/blocksy-companion-plugin.png)
並點擊「立即安裝」。
提醒:如果有購買付費版,只需要安裝 Blocksy Companion (Premium) 即可,不需安裝免費版的外掛。
Kadence Blocks 區塊編輯器
安裝 Kadence Blocks 免費版
接著到 WordPress 後台外掛 > 安裝外掛搜尋 Kadence Blocks。
![WooCommerce 小技巧 - 自訂「我的帳號」頁面、善用區塊編輯器 13 kadence-blocks-install](https://www.quantsnote.com/wp-content/uploads/2021/08/kadence-blocks-install.png)
並點擊「立即安裝」。
製作懸浮的聯絡客服按鈕
Blocksy Pro – Content Blocks
從 WordPress 的後台找到 Blocksy 的功能選單,可以看到 3 個選項:
- Dashboard
- Content Blocks
- Account
![如何製作適合手機閱讀的文章目錄、內容大綱? - Blocksy admin menu Blocksy-admin-menu](https://www.quantsnote.com/wp-content/uploads/2024/01/Blocksy-admin-menu.png)
Content Blocks (內容區塊) 就是我們將要使用到的功能,點擊 Content Blocks 進入內容區塊管理頁面。
新增 Content Blocks
點擊 Add New 按鈕新增 Content Blocks。
![如何製作適合手機閱讀的文章目錄、內容大綱? - Blocksy Pro Content Blocks Blocksy Pro-Content Blocks](https://www.quantsnote.com/wp-content/uploads/2023/12/Blocksy-Pro-Content-Blocks.png)
選擇使用 Popup 類型的內容區塊。
![利用 Blocksy 的彈出視窗、Fluent Forms 建立便捷的聊天小工具 Chat Widget - Chat button content block popup Chat-button-content-block-popup](https://www.quantsnote.com/wp-content/uploads/2024/06/Chat-button-content-block-popup.png)
Kadence Blocks – Buttons (Adv) 區塊
在剛剛建立的 Content Blocks 編輯頁面中新增 Kadence 的 Button (Adv) 區塊,利用進階的按鈕功能可以加強聯絡客服按鈕的設計感。
![利用 Blocksy 的彈出視窗、Fluent Forms 建立便捷的聊天小工具 Chat Widget - Chat button design Chat-button-design](https://www.quantsnote.com/wp-content/uploads/2024/06/Chat-button-design.png)
顯示位置、條件
我們想在頁面載入後幾秒內自動觸發顯示這個「聯絡客服按鈕」。使用 Popup 類型的內容區塊可以非常方便的指定按鈕的顯示條件、彈出的方式、顯示位置,以及裝置可見度。
- 顯示條件
指定頁面才顯示這個「聯絡客服按鈕」,特別是服務說明頁面;當然,也可以指定為全站的頁面都顯示。 - 彈出的方式
讓聯絡客服按鈕的出現不會太呆版。 - 顯示位置
可指定於頁面的右下或左下角落顯示。
![利用 Blocksy 的彈出視窗、Fluent Forms 建立便捷的聊天小工具 Chat Widget - Chat button blocksy page settings Chat-button-blocksy-page-settings](https://www.quantsnote.com/wp-content/uploads/2024/06/Chat-button-blocksy-page-settings.png)
可見度的部分可以自行決定,只在需要提供的裝置類型中顯示,這樣一來在其他裝置瀏覽時也不會額外載入相關資源,不會影響到其他裝置瀏覽時的頁面載入效能。
對於聊天、客服小工具來說,一般都會在所有裝置上都提供這項功能。
![利用 Blocksy 的彈出視窗、Fluent Forms 建立便捷的聊天小工具 Chat Widget - Blocksy Page Settings Condition Popup Visibility Blocksy-Page Settings-Condition-Popup Visibility](https://www.quantsnote.com/wp-content/uploads/2023/12/Blocksy-Page-Settings-Condition-Popup-Visibility.png)
本文中介紹的兩個主要功能都是使用 Blocksy 的 Popup 類型內容區塊進行製作,關於細節的設定教學可以參考「Blocksy 教學 – 使用強大的內容區塊製作「彈出視窗 (Popup Window)」」一文中的詳細說明。
按鈕的連結位址
訪客點擊「聯絡客服按鈕」後,我們希望能觸發彈出下面章節會提到的「聊天對話框」,所以,這個按鈕的連結位址就會是聊天對話框的內容區塊代號囉。
以 Blocksy 的 Popup 類型內容區塊來說,會是叫做 #ct-popup-xxxx。待下述章節的內容區塊設定完成之後,回到 Blocksy > Content Blocks 的管理頁面就能看到「聊天對話框」內容區塊的代號了。
當然,如果不想使用 Blocksy 的 Popup 類型內容區塊,這裡也可以簡化設計為懸浮的小圖示。
這部分的教學可以參考「如何製作適合手機閱讀的文章目錄、內容大綱?」一文,文中觸發文章目錄彈出顯示的就是一個 SVG 圖示,可以運用類似的技巧將懸浮小圖示固定顯示在頁面的角落位置。
製作聊天對話框的彈出視窗
接著,我們來到訪客點擊「聯絡客服按鈕」後會彈出顯示的「聊天對話框」,一樣是運用 Blocksy 的 Content Blocks (內容區塊),選擇使用 Popup 類型的內容區塊來進行設計。
![利用 Blocksy 的彈出視窗、Fluent Forms 建立便捷的聊天小工具 Chat Widget - Chat box design Chat-box-design](https://www.quantsnote.com/wp-content/uploads/2024/06/Chat-box-design.png)
我們的聊天對話框使用到了 Kadence 區塊編輯器的一些區塊種類:
- Info Box 區塊 – 製作具有 Logo 圖示 (或客服大頭照) 的對話框標頭。
- Tabs 區塊 – 製作不同聯絡方式的選項,在頁籤中使用圖示。
- Row Layout / Section – 調整各個區塊的排版、外觀設計,以及彼此之間的關係。
- 自訂 HTML – 將 Tabs 區塊中的頁籤各自連結到對應的社群聊天功能。
可以參考我們的區塊排版方式,設計聊天對話框的時候大家可以按照自己的喜好、客戶的屬性去調整並使用相對應的區塊功能。
以下是一些需要特別注意的部分。
頁籤對應的社群聊天平台
使用 Tabs 區塊可以讓訪客明確的知道有那些聯絡管道,大家可以使用臉書的 Messenger、Line、WhatsApp、電話,以及聊天式表單的 Icon 圖示。
做為另開視窗、App 的頁籤 (例如:Messenger、Line、WhatsApp、電話等),在頁籤內容 Tab 的部分不需要放置任何東西,保持空白即可。後續會運用「自訂 HTML」中的 JS 程式碼將點擊頁籤的功能改變為點擊網址連結。
聊天式表單 (Conversational Form) 的部分則可以利用具備進階表單功能的 Fluent Forms Pro 或是 WP Forms Pro,不僅可以製造訪客留言、詢問時的聊天情境,也因為具備進階的後台統計數據功能,方便管理者快速回應客戶的詢問。
Fluent Forms 聊天式表單
在「聊天對話框」的對談/聊天頁籤下,將設計好的「聊天式表單」嵌入其中。
步驟式、詢問式的表單填寫方式,可以引導訪客一步步地整理問題、進行提問。
![利用 Blocksy 的彈出視窗、Fluent Forms 建立便捷的聊天小工具 Chat Widget - chat box layout2 chat-box-layout2](https://www.quantsnote.com/wp-content/uploads/2024/06/chat-box-layout2.png)
這部分可能會用運到一些基礎的 CSS 樣式修改的技巧,因為「聊天式表單」一般會作為單頁式收集客戶意見、調查、統計時的表單應用,所以不管是字體 (太大)、樣式可能都不適合嵌入到小小的聊天對話框之中。
所以也會需要使用 Code Snippets 外掛來調整表單上的 CSS 樣式。
調整 Tabs 頁籤的連結功能
最後,來到關鍵的部分了。
為了呈現簡潔的樣貌,充分利用了 Kadence 的 Tabs 區塊的功能,並加入了少少的 JS 程式碼,讓我們有辦法自訂部分頁籤將其點選功能調整為開啟連結網址。
這樣一來,我們就有辦法讓訪客在點擊 Messenger 圖示的時候,直接開啟 Messenger 功能讓訪客可以直接與我們在線上對話了。
document.addEventListener('DOMContentLoaded', function() {
function updateTabLinks(container) {
const tab1 = container.querySelector('#tab-tab1 a');
if (tab1) {
tab1.href = 'https://m.me/QuantsNote/';
}
}
function handleTabClick(event) {
const tar = event.currentTarget;
const href = tar.getAttribute('href');
if (href) {
event.preventDefault();
window.location.href = href;
}
}
// Initialization
updateTabLinks(document);
// Event Listener
document.querySelector('#tab-tab1 a').addEventListener('click', handleTabClick);
});
注意事項:第七行的 Messenger 連結記得改為自己的社群聊天連結唷!
結語
這樣就完成了在網站頁面,當上下捲動畫面時可以懸浮在角落的聯絡客服按鈕,點擊按鈕會彈出顯示聊天對話框!
![利用 Blocksy 的彈出視窗、Fluent Forms 建立便捷的聊天小工具 Chat Widget - chat box layout1 chat-box-layout1](https://www.quantsnote.com/wp-content/uploads/2024/06/chat-box-layout1.png)
綜合以上的說明,我們知道了:
- 如何使用 Blocksy 佈景主題編輯器,利用 Blocksy Pro 的 Content Blocks 功能,製作懸浮的聯絡客服按鈕 (Chat Button) 以及彈出視窗內的對話框 (Chat Box)。
- 如何使用免費版 Kadence Blocks 區塊編輯器外掛,利用其 Info Box、Tabs 區塊,自訂聊天對話框的設計與呈現樣式。
- 使用 Fluent Forms Pro 表單外掛,利用其聊天式表單 (Conversational Form) 嵌入聊天對話框中,創造訪客留言、詢問時的聊天情境。
- 如何使用「自訂 HTML」區塊,將 Tabs 區塊中的頁籤各自連結到對應的社群聊天功能。
希望透過這個教學大家也能製作出美觀、方便的聊天小工具,有什麼心得、想法或建議,也歡迎大家加入社團一起討論唷!
如果需要我們協助製作的話,歡迎填寫聯絡表單~
對了,想實際看看我們製作的聊天、客服小工具嗎?
我們確實是為了 Quants Note 的新服務網站分析工具才設計這個小工具,目前只在「網站分析工具」的說明頁面顯示唷 ^_^
如果有網站數據分析的需求,也歡迎考慮使用我們提供的服務!
Blocksy Pro
使用優惠碼「QNSAVE10」獲得10%折扣!