Vue Fb Customer Chat

Facebook Customer Chat Plugin for Vue.js

Demo

https://dmnCodes.github.io/vue-fb-customer-chat/

Installation

Install using npm

$ npm install vue-fb-customer-chat

Install using yarn

$ yarn add vue-fb-customer-chat

Usage

Setting up the Messenger

For the messenger to work, you need to enable it on Facebook first:

1. Go to your Page on Facebook
2. Go to About and copy the Page ID (https://www.facebook.com/help/1503421039731588)
3. Go to Settings > Messaging
4. Complete the setup in the Add Messenger to your website, do not forget to add both production and local URLs

For Vue.js projects.

import Vue from 'vue'
import VueFbCustomerChat from 'vue-fb-customer-chat'

Vue.use(VueFbCustomerChat, {
  page_id: null, //  change 'null' to your Facebook Page ID,
  theme_color: '#333333', // theme color in HEX
  locale: 'en_US', // default 'en_US'
})

For Nuxt.js projects.

Create 'plugins/vue-fb-customer-chat.js'

import Vue from 'vue'
import VueFbCustomerChat from 'vue-fb-customer-chat'

Vue.use(VueFbCustomerChat, {
  page_id: null, //  change 'null' to your Facebook Page ID,
  theme_color: '#333333', // theme color in HEX
  locale: 'en_US', // default 'en_US'
})

Add plugin in nuxt.config.js file for plugins section

plugins: [
  { src: '~/plugins/vue-fb-customer-chat.js', ssr: false }
],