Nuxt.js에서 Facebook Customer Chat 소개

생각보다 정보가 떨어지지 않았기 때문에 남겨 둡니다.

Customer Chat Plugin이란 이름 그대로 Facebook 페이지에 고객으로부터 채팅을 날릴 수 있다고 하는 구조로, 이런 느낌의 Messenger 아이콘이 사이트에 표시되게 됩니다.

FB 페이지에서 Customer Chat 설정

최근 UI가 변경되었으므로 조금 알기 쉬워졌을지도 모릅니다.

페이지 왼쪽의 메뉴에서 설정 선택


메시지 선택


절반 이하로 ウェブサイトにMessengerを追加 와의 메뉴가 표시되므로 이용 시작 버튼을 누릅니다.


그러면, step 다이얼로그와 같은 표시가 되므로 끝까지 진행합니다.
마지막으로 스 니펫이 나오므로, 복사 해 둡시다.

Nuxt 측 설정

ぺたっ 스니펫을 붙이는 것만으로는 편합니다만, 실제로 프레임워크 사용하고 있으면 그렇게 되지 않거나 하는군요.

여기에서는 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으로 질문하십시오.