!!! Important !!!

On May 9, 2024, you will no longer be able to access any of the functionality of the Chat Plugin. Effective immediately, Chat Plugin in guest mode is no longer available. Other features like m.me links will still be available for you to use. https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin/

!!! Important !!!

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 }
],