僕は知らなかったのでテンション上がってしまいました。
タイトル文言読んだだけだと「ん？」って感じだと思うのですが、こんな感じです。
分からなかった方のために無駄に集中線を追加。
最近スクールを作った(↑)のですが、そのWebサイトにチャットを組み込んで問い合わせなどを増やせないかなぁと調べていたところ見つけたのでつけてみました。↑のWebサイトでどんな感じか見てみて下さい。効果測定はこれからです。
カスタマーチャットプラグイン
というものらしいです。
Facebookを開かなくてもFacebookページアカウントに直接ユーザーが話しかけることが出来ます。
便利。
https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin#localization
日本語の記事も設置方法とかで試してみた系は調べると出てきますけどまだそこまで量は多くない印象。
ちなみにどこかでモバイルは対応してないって感じの文言を見かけた気がしたけど、iPhone Safariで試したら、ちゃんとブラウザ内でメッセンジャーチャットが開かれました。
Facebookページアカウントの設定からコード生成
設置の仕方です。
Facebookのページアカウントの設定からMessengerプラットフォームの項目を選択し、
下の方にあるカスタマーチャットプラグインを選択します。
あとはこんな感じで表示させる文言や色とかを設定してコードを生成します。この時に利用するドメインを設定します。
この時生成されるこんな雰囲気のコードを利用したいページのhtmlに追記。
body開始直後に書いてねってアナウンスになってます。
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v3.2'
});
};
(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/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your customer chat code -->
<div class="fb-customerchat"
attribution=setup_tool
page_id="xxxxxxxxxxxxxx">
</div>
Customer Chat SDKである程度のJavaScript制御が出来そう
カスターマーチャットプラグインを制御するためのCustomer Chat SDKってのがあるみたいです。
ちょっとはハンドリングできそうでした。
まだベータだからだと思うのですが、ドキュメントは少なさそうです。ここのページくらいかも
- プラグインがロードされたタイミングのハンドリング
と書いてあるけど、使ってみてもタイミングがよくわからなかった。。。
FB.Event.subscribe('customerchat.load', function(){
console.log('プラグインがロードされたら発火');
});
- チャット部分が表示されたタイミングのハンドリング
FB.Event.subscribe('customerchat.dialogShow', function(){
console.log('ダイアログが表示されたら発火');
});
ただなんか思ったようなタイミングで取れてないような......そんな怪しい挙動を感じたりしましたが、ベータだし深掘りはやめておこうと思ってそんなに触ってません苦笑
ローカル開発したいときはngrokが良いかも
公式の情報によると、 https必須とlocalhostは利用できないらしいのですが、ローカルで開発したいですよね。
ngrokでトンネリングして、そのアドレスを管理画面で指定してあげるとローカル開発ができるのでオススメです。
$ npm i -g ngrok #インストール
$ ngrok http 3000 #起動
生成されたngrokのドメインをこんな感じで管理画面に設定してあげればOKです。
起動時にチャットウィンドウを開かせない
デザイン的にちょっとパーツが被ってしまいそうだったのでチャットウインドウをデフォルトで開かないようにしてみました。
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v3.2'
});
FB.Event.subscribe('customerchat.dialogShow', function(){
FB.CustomerChat.hideDialog();
});
};
こんな感じでできます。
右下固定しかできないのか
パッとみた感じ出来なさそうでした。
iframeが展開されてるのでそれを囲っているdivにJSで無理やりスタイル当てたりは出来そうですが、しんどい気がしてるので公式っぽいやり方を見つけたいなぁ
まとめ
Facebookメッセンジャーのカスターマーチャットプラグイン(と必要であればCustomer Chat SDK)を使うことで、ウェブサイトにFacebookメッセンジャーを埋め込むことが出来ました。
情報がまだ少ないですが新体験で（僕は）テンション上がったので試してみると楽しいかもしれません。