• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

免費資源網路社群

免費資源指南,每日網路資訊與科技新知

  • 免費軟體
    • APP
      • iOS
      • Android
    • Mac
    • 瀏覽器外掛
      • Chrome
      • Firefox
    • 防毒軟體
    • 系統工具
    • 圖片處理
    • 文字編輯
  • 線上工具
    • 雲端掃毒
    • 線上翻譯
    • 線上轉檔
    • 配色工具
    • 縮網址
    • 產生器
  • 免費空間
    • 網路硬碟
    • 圖片空間
    • 影片空間
    • 網站空間
  • 熱門主題
    • Facebook
    • VPN
    • YouTube
    • 編輯精選
    • 字型下載
    • 免費圖庫
  • 網路科技
    • 個人服務
    • 電子信箱
    • 實用教學
    • 資料查詢
    • 音樂音效
  • 架站教學
    • DNS
    • WordPress
    • 搜尋引擎最佳化
    • 素材模版
    • 免費圖示
    • 網站監測

Facebook 顧客聊天外掛程式將 Messenger 嵌入網站提供即時通訊教學

Last updated 3 years ago by Pseric

Facebook 顧客聊天外掛程式將 Messenger 嵌入網站提供即時通訊教學

上個月初 Facebook 宣布即將推出官方「顧客聊天外掛程式」(Customer Chat Plugin),昨天就收到通知,目前這項功能已經進入公開測試階段,如果你的網站、部落格跟 Facebook 社群連結很深,又會經常透過 Facebook Messenger 接收顧客訊息、提供客戶服務的話,這個功能可能為你帶來更好的效果,尤其是目前有使用一些第三方聊天功能,或許可以關注接下來的資訊。

什麼是 Facebook 顧客聊天外掛程式呢?本文最上方擷圖就是實際顯示範例,透過這功能可以將臉書 Messenger 聊天工具整合到網站或部落格,直接讓顧客或使用者透過即時線上傳訊來與你聯繫,以往此功能必須透過第三方才能做到,例如:Messengerify、WhatsHelp.io,在臉書推出官方版「顧客聊天外掛程式」後勢必對市場上現有的服務造成衝擊。

如果你想在網站上顯示更多聯絡資訊,不限於 Messenger 的話,還可使用:

  • Pepper 為網站加入免費小工具,顯示社群網站、Email、電話等聯絡資訊
  • Chat by KeyReply 在網站右下角顯示即時通訊聯絡小圖示,讓訪客更容易找到你!
  • Zotabox 網站整合 Facebook 粉絲專頁即時訊息,打造免費線上支援平台

既然 Facebook 已經推出「顧客聊天外掛程式」,那麼就來寫一篇教學教站長們如何將此外掛程式整合到自己的網站或部落格,同時與 Facebook 粉絲專頁連結,步驟不會太難,只是需要動一些程式碼,而目前 Customer Chat Plugin 還在測試階段,不保證之後的操作功能及步驟會一樣。

顧客聊天外掛程式設定教學

STEP 1

首先,必須將 Facebook SDK 加入你的網站。如果你的網站目前有 Facebook Likes 按鈕、留言等相關臉書功能,那麼應該都已將 Facebook SDK 加入,或者可以直接檢查一下有沒有類似下面這一大段程式碼。

<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.11'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

view raw
Facebook-SDK.htm
hosted with ❤ by GitHub

STEP 2

接著開啟 Facebook 粉絲專頁的「設定」功能,從選單找到「Messenger 平台」,點擊後可以從右側看到一個「Whitelisted Domains」,這裡必須將你的網站首頁網址輸入,前面必須加上 http:// 或 https:// ,完成後按下「Save」來保存設定。

Facebook Customer Chat Plugin 顧客聊天外掛程式

STEP 3

要顯示時只需要在網站加入以下程式碼:

<div class="fb-customerchat"
page_id="<PAGE_ID>"
ref="<OPTIONAL_WEBHOOK_PARAM>"
minimized="<true|false>">
</div>

view raw
facebook-customer-chat-plugin.htm
hosted with ❤ by GitHub

<PAGE_ID> 部分改為你的 Facebook 粉絲專頁編號,如果不知道編號,可從粉絲專頁「關於」頁面的最下方找到「粉絲專頁編號」(管理員權限才能看到)。

「ref」設定參數可以直接省略拿掉,若要設定請參閱以下兩個鏈結說明:

  • Get Started with Customer Chat – Messenger Developer Blog
  • 顧客聊天外掛程式(測試版)- Facebook for Developers

最後「minimized」可以設定是否在開啟網頁時跳出歡迎文字,預設情況下為停用(false),也就是會自動冒出歡迎視窗,我認為對於瀏覽者來說可能會有一些干擾,如果只想顯示 Messenger 圖示在右下方,可將「minimized」設定為啟用(true)屬性。

Facebook Customer Chat Plugin 顧客聊天外掛程式

點擊「開始聊天」後會進入與 Facebook 粉絲專頁的對話視窗。

Facebook Customer Chat Plugin 顧客聊天外掛程式

其他我之前介紹過的 Facebook 站長工具:

  • 設定 Facebook「留言同步」功能教學,讓你的網站和粉絲專頁顯示相同留言
  • Facebook Quote Plugin 臉書選取文字後自動跳出「分享引文」外掛功能設定教學
  • 網賺新選擇!臉書推行動版廣告聯播網 Audience Network,網站放廣告獲取收益教學

值得一試的三個理由:

  1. Facebook 官方推出的 Messenger 顧客聊天外掛,可嵌入網站或部落格
  2. 開啟網站時自動跳出歡迎訊息,提高使用者點擊意願
  3. 捨棄第三方服務,直接選用官方版不僅速度快也更安全可靠

相關

分類: 實用教學, 熱門主題, 站長工具標籤: Customer Chat Plugin, Facebook, Facebook Chat, Facebook Messenger, Live Chat, Messenger, Widgets, 傳訊息, 即時通訊, 實用教學, 按鈕, 教學, 教學相關, 社交網站, 社群網站, 社群網路, 科技新知, 站長工具, 網站工具, 網站開發, 線上交談, 線上聊天, 臉書, 行銷相關, 通訊相關, 部落格外掛, 部落格工具, 開發, 開發工具, 顧客聊天外掛

關於 Pseric

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

Primary Sidebar

使用電子郵件訂閱網站

輸入你的電子郵件地址訂閱網站新文章,使用電子郵件接收通知。

站內搜尋

追蹤更新

最新文章

  • Wormhole 更重視隱私速度 10 GB 免空,檔案傳完前先顯示分享連結
  • 開啟 Google Chrome 即時字幕功能,播放影片 Podcast 自動產生字幕
  • Koofr 免費雲端硬碟整合 Dropbox、Google Drive 和 OneDrive
  • Fontworks 和 Google Fonts 合作釋出八款開放原始碼免費字型下載
  • 垃圾車 App:查詢垃圾車時間、清運路線地點資訊,設定通知提醒倒垃圾
  • 全家「友善食光地圖」查詢鄰近超商即期食品,享優惠價減少食物浪費
  • Facebook 超過五億個資外洩!查詢你的帳號是否在受害名單
  • Bing 圖像式搜尋支援以圖找圖,可標記特定範圍進行深度搜尋

精選主題

  • 思源黑體:Adobe 與 Google 合作開發開放原始碼中文字型
  • 思源宋體 Noto Serif CJK 字型免費下載!Google、Adobe 再次攜手推出開放原始碼字體
  • Apple Music 登陸台灣!免費三個月試用音樂串流服務,不聽音樂要幹嘛?
  • [下載] WinRAR 解壓縮軟體正式推出中文免費版,別再用盜版破解版了!
  • Mipony 白馬下載器:網路下載必裝!支援數百免空可突破下載限制
  • Outline 來自 Google 全自動自架 VPN 安裝工具,突破中國網路封鎖限制
  • Spotify 免費聆聽 4000 萬首歌,音樂串流應用 iOS、Android 版下載
  • Peggo 終止服務!5 個 YouTube 轉檔下載替代方案推薦
  • 日本亞馬遜 AmazonGlobal 線上購物直送台灣,免消費稅免找代購
  • 中華郵政 i郵箱初體驗,24 小時自助郵局寄件取件超方便
  • YouTube Music 免費音樂串流服務正式登場,升級 Premium 零廣告體驗
  • Microsoft Edge 正式版免費下載!以 Chromium 重新打造微軟瀏覽器
  • 使用 eMask 線上預購口罩,健保卡或自然人憑證驗證可信用卡繳費
  • 口罩實名制 2.0 健保卡身分認證教學,以健保快易通 APP 線上預約口罩
  • Photopea 免費圖片編輯器,堪稱 Photoshop 線上版支援 PSD 等常見格式
  • 財政部統一發票兌獎 APP 掃描發票存手機,自動記帳主動對獎超方便
  • 使用健保卡+戶號線上查詢勞保勞退年資、應繳欠繳保費和退休金核發試算
  • 跨平台 Brave 瀏覽器免費下載!兼具速度與隱私相容 Chrome 擴充功能
  • YouTube Kids 兒童專用影音頻道,手機平板應用程式免費下載

贊助商連結

實用教學

  • 46個免費圖庫網站總彙整
  • 15個免費下載高解析度圖片最佳圖庫
  • 下載高畫質相片素材的13個免費圖庫資源精選
  • 12個你應該知道的中英文假字、文章產生器
  • 20個免費下載創用 CC 授權音樂的網站彙整
  • 40個設計師必備免費資源超推懶人包
  • Google 商家被留負評該檢舉刪除?或許業主更該做的是回應疑慮
  • Facebook 全新下載資料副本功能,一次備份所有臉書記錄匯出
  • Instagram 資料下載讓使用者完整備份相片影片、留言、訊息等個人記錄
  • 7 個線上接收手機簡訊驗證碼的免費網路服務整理
  • 如何重灌 Mac 電腦?重新安裝 macOS 自動更新為最新版本教學
  • PayPal 兩步驟驗證設定教學,以手機簡訊或應用程式降低被盜用風險
  • 以 YubiKey 實體安全金鑰設定 Google 兩步驟驗證教學
  • 如何在瀏覽器不支援 Adobe Flash Player 後繼續播放 SWF 檔案?
  • Ruffle 免費 Flash Player 替代軟體下載,Adobe 停止更新後讓瀏覽器繼續支援

WordPress 架站資源

  • 搬家自架 WordPress 推薦的五個虛擬主機服務
  • 架站更上一層樓,我推薦的五個虛擬專屬主機(VPS)服務
  • WordPress Hosting 架站空間精選,最多人推薦的五個國外虛擬主機方案
  • 如何挑選一個適合你的虛擬主機服務?我參考的七個比較項目
  • 自架 WordPress 虛擬主機租用教學,將網誌備份匯出、匯入到新家
  • 在 WordPress 設定 HTTPS,強制使用 SSL 安全加密協定教學
  • 殺手級 WordPress 體檢項目:101 個建立新網站的超簡易捷徑!
  • Cloudflare 架站者必備免費 CDN、DNS 託管服務設定教學
  • 台灣用戶也能在 Google Domains 註冊購買網域名稱,詳細申請設定教學
  • 16 個免費網站速度測試工具推薦!網頁效能評比,搜尋引擎最佳化必備
  • 亞馬遜 VPS 服務 Amazon Lightsail 搭配 ServerPilot 快速架設 WordPress 教學
  • 165 個 WordPress 官方開發佈景主題設計 Jetpack 使用者免費下載
  • 使用 Google Cloud Platform 雲端主機免費版架設 WordPress 教學
  • 使用 Cloudways 架設 WordPress 網站教學,快速部屬最佳化環境
  • RunCloud 佈署最佳化主機環境,整合 DigitalOcean 架設 WordPress 教學
  • 使用 SiteGround 虛擬主機一鍵快速安裝 WordPress 教學
  • Cloudflare 變身域名註冊商,以最低價續費含免費 SSL、WHOIS 隱藏功能
  • FastComet 評價極高的虛擬主機推薦,一鍵安裝 WordPress 教學
  • VaultPress 完整備份你的 WordPress 網站,無痛搬家或回復特定時間點

贊助商連結

Managed WordPress Hosting
We Love Jetpack!
Stock Photos, Vectors and Royalty Free Images from 123RF

使用 WordPress 建置,最高級的語意化個人出版平台・關於本站・文章彙整・隱私權政策