利用 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 Pro 付費版的 Content Blocks 功能，讓我們從安裝佈景主題與外掛開始！

安裝 Blocksy 佈景主題

首先，到 WordPress 後台的外觀 > 佈景主題，點選「安裝佈景主題」後搜尋 Blocksy。

並點擊「安裝」。

安裝 Blocksy Companion 外掛

因為接下來介紹的 Content Blocks 是需要購買 Blocksy Pro 才會有的 Pro Extensions 功能，所以直接登入 Blocksy 帳號下載最新版的 Blocksy Companion。

接著按照安裝外掛的方式在 WordPress 後台上傳、安裝即可。

如果想先使用免費版的人，可以到外掛 > 安裝外掛搜尋 Blocksy Companion。

並點擊「立即安裝」。

提醒：如果有購買付費版，只需要安裝 Blocksy Companion (Premium) 即可，不需安裝免費版的外掛。

Kadence Blocks 區塊編輯器

安裝 Kadence Blocks 免費版

接著到 WordPress 後台外掛 > 安裝外掛搜尋 Kadence Blocks。

並點擊「立即安裝」。

製作懸浮的聯絡客服按鈕

Blocksy Pro – Content Blocks

從 WordPress 的後台找到 Blocksy 的功能選單，可以看到 3 個選項：

• Dashboard
• Content Blocks
• Account

Content Blocks (內容區塊) 就是我們將要使用到的功能，點擊 Content Blocks 進入內容區塊管理頁面。

新增 Content Blocks

點擊 Add New 按鈕新增 Content Blocks。

選擇使用 Popup 類型的內容區塊。

Kadence Blocks – Buttons (Adv) 區塊

在剛剛建立的 Content Blocks 編輯頁面中新增 Kadence 的 Button (Adv) 區塊，利用進階的按鈕功能可以加強聯絡客服按鈕的設計感。

顯示位置、條件

我們想在頁面載入後幾秒內自動觸發顯示這個「聯絡客服按鈕」。使用 Popup 類型的內容區塊可以非常方便的指定按鈕的顯示條件、彈出的方式、顯示位置，以及裝置可見度。

• 顯示條件
  指定頁面才顯示這個「聯絡客服按鈕」，特別是服務說明頁面；當然，也可以指定為全站的頁面都顯示。
• 彈出的方式
  讓聯絡客服按鈕的出現不會太呆版。
• 顯示位置
  可指定於頁面的右下或左下角落顯示。

可見度的部分可以自行決定，只在需要提供的裝置類型中顯示，這樣一來在其他裝置瀏覽時也不會額外載入相關資源，不會影響到其他裝置瀏覽時的頁面載入效能。

對於聊天、客服小工具來說，一般都會在所有裝置上都提供這項功能。

本文中介紹的兩個主要功能都是使用 Blocksy 的 Popup 類型內容區塊進行製作，關於細節的設定教學可以參考「Blocksy 教學 – 使用強大的內容區塊製作「彈出視窗 (Popup Window)」」一文中的詳細說明。

按鈕的連結位址

訪客點擊「聯絡客服按鈕」後，我們希望能觸發彈出下面章節會提到的「聊天對話框」，所以，這個按鈕的連結位址就會是聊天對話框的內容區塊代號囉。

以 Blocksy 的 Popup 類型內容區塊來說，會是叫做 #ct-popup-xxxx。待下述章節的內容區塊設定完成之後，回到 Blocksy > Content Blocks 的管理頁面就能看到「聊天對話框」內容區塊的代號了。

當然，如果不想使用 Blocksy 的 Popup 類型內容區塊，這裡也可以簡化設計為懸浮的小圖示。

這部分的教學可以參考「如何製作適合手機閱讀的文章目錄、內容大綱？」一文，文中觸發文章目錄彈出顯示的就是一個 SVG 圖示，可以運用類似的技巧將懸浮小圖示固定顯示在頁面的角落位置。

製作聊天對話框的彈出視窗

接著，我們來到訪客點擊「聯絡客服按鈕」後會彈出顯示的「聊天對話框」，一樣是運用 Blocksy 的 Content Blocks (內容區塊)，選擇使用 Popup 類型的內容區塊來進行設計。

我們的聊天對話框使用到了 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 聊天式表單

在「聊天對話框」的對談/聊天頁籤下，將設計好的「聊天式表單」嵌入其中。

步驟式、詢問式的表單填寫方式，可以引導訪客一步步地整理問題、進行提問。

這部分可能會用運到一些基礎的 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 佈景主題編輯器，利用 Blocksy Pro 的 Content Blocks 功能，製作懸浮的聯絡客服按鈕 (Chat Button) 以及彈出視窗內的對話框 (Chat Box)。
• 如何使用免費版 Kadence Blocks 區塊編輯器外掛，利用其 Info Box、Tabs 區塊，自訂聊天對話框的設計與呈現樣式。
• 使用 Fluent Forms Pro 表單外掛，利用其聊天式表單 (Conversational Form) 嵌入聊天對話框中，創造訪客留言、詢問時的聊天情境。
• 如何使用「自訂 HTML」區塊，將 Tabs 區塊中的頁籤各自連結到對應的社群聊天功能。

希望透過這個教學大家也能製作出美觀、方便的聊天小工具，有什麼心得、想法或建議，也歡迎大家加入社團一起討論唷！

如果需要我們協助製作的話，歡迎填寫聯絡表單~

---

對了，想實際看看我們製作的聊天、客服小工具嗎？

我們確實是為了 Quants Note 的新服務網站分析工具才設計這個小工具，目前只在「網站分析工具」的說明頁面顯示唷 ^_^

如果有網站數據分析的需求，也歡迎考慮使用我們提供的服務！