Nuxt.jsでFacebook Customer Chatを導入

思ったより情報が落ちてなかったので、残しておきます。

Customer Chat Pluginとは名の通りFacebookページに顧客からチャットが飛ばせるよっていう仕組みで、こんな感じのMessengerアイコンがサイトに表示されるようになります。

FBページからCustomer Chatの設定

最近UIが変更されたので、ちょっとわかりやすくなったかもしれません。

ページの左側にあるメニューから、設定を選択

メッセージを選択

半分より下くらいに、 ウェブサイトにMessengerを追加 とのメニューが表示されるので、利用を開始ボタンを押します。

そうすると、stepダイアログみたいな表示になるので最後まで進めます。
最後にスニペットがでてくるので、コピペしておきましょう。

Nuxt側の設定

ぺたっとスニペットを貼り付けるだけだと楽なんですけど、実際にフレームワーク使ってるとそうはいかなかったりしますよね。

ここではPluginとして読み込んでいきたいと思います。

pluginファイルの作成

さっきのスニペットを以下のように書きます。

ここはVueインスタンスで利用できるようにしてますが、Injectしても良さそうですね。

  import Vue from = 'vue'

  const vueFb = {}
  vueFb.install = function install(Vue, options) {
    (function (d, s, id) {
      var js
      var 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'))

    window.fbAsyncInit = () => {
      window.FB.init(options)
      Vue.FB = window.FB

      // ここでEventのSubscribeしておくと、ハンドリングがやりやすかったりします
      // FB.Event.subscribe ~
    }
    Vue.FB = undefined
  }

  Vue.use(vueFb, {
    appId: YOUR FACEBOOK ID,
    autoLogAppEvents: true,
    xfbml: true, // ここをfalseにすると任意のタイミングでParseすることができます (表示) 
    version: Graph API Version (v3.3 etc)
  })  

nuxt.config.jsの追加

clientだけでいいと思うので、modeはclientで指定しています。

plugins: [
    { src: "~/plugins/fb.js", mode: 'client' },

任意の場所にhtmlを追加

Ex. default.vue

<template>
  <div id='app'>
    <nuxt/>
    <div class="fb-customerchat"
      :page_id="YOUR PAGE ID"
      theme_color="#0084ff">
    </div>
  </div>
</template>

これで終わりです。

まとめ

導入はめちゃくちゃ簡単ですね！

まだ安定していませんが、無料でChatサポートができるので個人で開発している方とかはかなりいいんじゃないかなと思います。
もし何かできない、動かないってなった場合はお気軽にDMで質問してください。