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 加入，或者可以直接檢查一下有沒有類似下面這一大段程式碼。

.gist table { margin-bottom: 0; }

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters

Show hidden characters

	<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」，這裡必須將你的網站首頁網址輸入，前面必須加上 https:// 或 https:// ，完成後按下「Save」來保存設定。

STEP 3

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

.gist table { margin-bottom: 0; }

Show hidden characters

	<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）屬性。