ウェブサイトにFacebookメッセンジャーを埋め込むことが出来るって知ってた？ - カスタマーチャットプラグイン


僕は知らなかったのでテンション上がってしまいました。
タイトル文言読んだだけだと「ん？」って感じだと思うのですが、こんな感じです。

![スクリーンショット 2019-04-17 23.07.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/82e4172c-e8b0-492c-20ca-38dcaa5d461a.png "スクリーンショット 2019-04-17 23.07.52.png")

分からなかった方のために無駄に集中線を追加。

![](https://i.gyazo.com/b35b084f189c04d49509dc2235a90c45.png)

> * [https://protoout.studio](https://protoout.studio?utm_source=qiita&utm_campaign=customerchatsdk)
> * [プログラミング学習はもう古い。「令和」時代のイノベーションを担う日本初のプロトタイピング専門スクールを開校
](https://prtimes.jp/main/html/rd/p/000000005.000020328.html)

最近スクールを作った(↑)のですが、そのWebサイトにチャットを組み込んで問い合わせなどを増やせないかなぁと調べていたところ見つけたのでつけてみました。↑のWebサイトでどんな感じか見てみて下さい。効果測定はこれからです。

## カスタマーチャットプラグイン

というものらしいです。

**Facebookを開かなくてもFacebookページアカウントに直接ユーザーが話しかけることが出来ます。**

**便利**。

> <img src="https://i.gyazo.com/41dc3ff9d7ccd9c1265b27bbdedb7636.jpg" width="400px">
> https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin#localization


日本語の記事も設置方法とかで試してみた系は調べると出てきますけどまだそこまで量は多くない印象。

ちなみにどこかでモバイルは対応してないって感じの文言を見かけた気がしたけど、iPhone Safariで試したら、ちゃんとブラウザ内でメッセンジャーチャットが開かれました。

## Facebookページアカウントの設定からコード生成

設置の仕方です。

Facebookのページアカウントの設定から`Messengerプラットフォーム`の項目を選択し、

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/c162bfdb-a958-ba91-6dee-31d64b803a0e.png" width="400px">

下の方にある`カスタマーチャットプラグイン`を選択します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/ad108a57-15c0-5aac-ff54-42c17169441b.png" width="400px">

あとはこんな感じで表示させる文言や色とかを設定してコードを生成します。この時に利用するドメインを設定します。

<img src="https://i.gyazo.com/271d3975124134393be2e1f7ed774eb8.gif" widht="400px">

この時生成されるこんな雰囲気のコードを利用したいページのhtmlに追記。
body開始直後に書いてねってアナウンスになってます。

```html
<!-- 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ってのがあるみたいです。

ちょっとはハンドリングできそうでした。

まだベータだからだと思うのですが、ドキュメントは少なさそうです。ここのページくらいかも

> https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/sdk#show_plugin

* プラグインがロードされたタイミングのハンドリング

と書いてあるけど、使ってみてもタイミングがよくわからなかった。。。

```javascript
FB.Event.subscribe('customerchat.load', function(){
  console.log('プラグインがロードされたら発火');
});
```

* チャット部分が表示されたタイミングのハンドリング

```javascript
FB.Event.subscribe('customerchat.dialogShow', function(){
  console.log('ダイアログが表示されたら発火');
});
```

ただなんか思ったようなタイミングで取れてないような......そんな怪しい挙動を感じたりしましたが、ベータだし深掘りはやめておこうと思ってそんなに触ってません苦笑


## ローカル開発したいときはngrokが良いかも

公式の情報によると、 **https必須とlocalhostは利用できないらしい**のですが、ローカルで開発したいですよね。

> <img src="https://i.gyazo.com/f7a0ab814ed1f668d4fa4c5b4d4ed05b.png" width="400px">

ngrokでトンネリングして、そのアドレスを管理画面で指定してあげるとローカル開発ができるのでオススメです。

```bash
$ npm i -g ngrok #インストール
$ ngrok http 3000 #起動
```

生成されたngrokのドメインをこんな感じで管理画面に設定してあげればOKです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/a6788ea1-a29e-0e5c-d69a-f1fb99e5b0a2.png" width="400px">

## 起動時にチャットウィンドウを開かせない

デザイン的にちょっとパーツが被ってしまいそうだったのでチャットウインドウをデフォルトで開かないようにしてみました。

```javascript
  window.fbAsyncInit = function() {
    FB.init({
      xfbml            : true,
      version          : 'v3.2'
    });

    FB.Event.subscribe('customerchat.dialogShow', function(){
      FB.CustomerChat.hideDialog();
    });
  };
```

こんな感じでできます。

## 右下固定しかできないのか

パッとみた感じ出来なさそうでした。<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/e1070aeb-37ba-f1dd-889c-75467febf331.png" width="100px">


iframeが展開されてるのでそれを囲っているdivにJSで無理やりスタイル当てたりは出来そうですが、しんどい気がしてるので公式っぽいやり方を見つけたいなぁ

## まとめ

Facebookメッセンジャーのカスターマーチャットプラグイン(と必要であればCustomer Chat SDK)を使うことで、ウェブサイトにFacebookメッセンジャーを埋め込むことが出来ました。

情報がまだ少ないですが新体験で（僕は）テンション上がったので試してみると楽しいかもしれません。