FB chat as real component

[AnarchyChampion]

Hi there!

I made a component for fb customer chat so I could use it only where I want and not a default loaded plugin. Use this snippet as you wish.

<template>
    <div id="fb-customer-chat" class="fb-customerchat" attribution="biz_inbox" v-bind="config" />
</template>

<script>
export default {
  name : 'FacebookCustomerChatComponent',
  props : {
    themeColor : {
      type : String,
      validator : value => /^#[0-9A-F]{6}$/i.test(value) && value.toLowerCase() !== '#ffffff'
    },
    loggedInGreeting : {
      type : String,
      validator : value => value.length <= 80
    },
    loggedOutGreeting : {
      type : String,
      validator : value => value.length <= 80
    },
    greetingDialogDisplay : {
      type : String,
      default : 'show',
      validator : value => ['hide', 'show', 'fade', 'icon'].indexOf(value) !== -1
    },
    greetingDialogDelay : {
      type : [Number, String],
      default : 0
    }
  },
  mounted () {
    this.script(document, 'script', 'fb-customer-chat-jssdk');
  },
  computed : {
    config () {
      return {
        page_id : this.$root.FB.pageId, // FB prop imported from .env
        theme_color : this.themeColor ?? this.$root.FB.themeColor,
        logged_in_greeting : this.loggedInGreeting,
        logged_out_greeting : this.loggedOutGreeting,
        greeting_dialog_display : this.greetingDialogDisplay,
        greeting_dialog_delay : this.greetingDialogDelay
      };
    }
  },
  methods : {
    fbAsyncInit () {
      FB.init({
        xfbml : true,
        version : this.$root.FB.version // in this case v12.0
      });
    },
    script (d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) { return; }
      this.root(d, 'fb-root');
      if (!window.fbAsyncInit) {
        window.fbAsyncInit = this.fbAsyncInit;
      }
      js = d.createElement(s); js.id = id;
      js.async = js.defer = true;
      js.src = 'https://connect.facebook.net/hu_HU/sdk/xfbml.customerchat.js';
      fjs.parentNode.insertBefore(js, fjs);
    },
    root (d, id) {
      if (d.getElementById(id)) { return; }
      var el = d.createElement('div'); el.id = id;
      d.body.appendChild(el)
    }
  }
}
</script>

[esmailbenmoussa]

appreciate it! @AnarchyChampion

[Athreyan]

How can i change language to English ?

[AnarchyChampion]

How can i change language to English ?

Change hu_HU to en_EN here: js.src = 'https://connect.facebook.net/hu_HU/sdk/xfbml.customerchat.js';

[DDGC7]

Hi do you just simply add this to your components folder and import it into the pages' template section to make it work?

[AnarchyChampion]

Hi do you just simply add this to your components folder and import it into the pages' template section to make it work?

Yes, also give them some parameters like this:

<fb-customer-chat greeting-dialog-display="hide"
    :logged-in-greeting="$t('fb.greetings.in')"
    :logged-out-greeting="$t('fb.greetings.out')" />

[DDGC7]

After clicking the messenger icon, it just keeps on loading.

Also this error comes up.

[AnarchyChampion]

After clicking the messenger icon, it just keeps on loading.

Also this error comes up.

Did you define a page_id and version number (which come from $root data and in my case from the .env file)? Also is there any adblocker or container that block fb to load?

[DDGC7]

After clicking the messenger icon, it just keeps on loading. Also this error comes up.

Did you define a page_id and version number (which come from $root data and in my case from the .env file)? Also is there any adblocker or container that block fb to load?

do i just add these on my .env?

page_id = 'my page id' version = 'v12.0'

btw the website that was whitelisted is deployed on vercel, plus theres no adblock

[AnarchyChampion]

After clicking the messenger icon, it just keeps on loading. Also this error comes up.

Did you define a page_id and version number (which come from $root data and in my case from the .env file)? Also is there any adblocker or container that block fb to load?

do i just add these on my .env?

page_id = 'my page id' version = 'v12.0'

btw the website that was whitelisted is deployed on vercel, plus theres no adblock

You can add it to your .env, and load it to $root data FB property as I did it in this code sample.

// app.js as the $root file
const appConfig = env;
const Layout = async () => await import('./layout');
new Vue({
  data () {
    return Object.assign({}, {
      isAjax : false,
      isStyleLoading : true,
      isLoading : true,
      isDark : false
    }, appConfig)
  },
  router,
  render : h => h(Layout)
}).$mount('#app');

Btw it's a vue2 example idk how to implement this in vue3 or in vercel.

// webpack.config.js
const path = require('path');
const dotenv = require('dotenv').config({
  path : path.join(__dirname, 'config/.env')
});
const config = dotenv.parsed;
for (var [key, value] of Object.entries(config)) {
  try {
    value = JSON.parse(value);
  } catch (e) {}
  config[key] = value;
}
module.exports = {
  // ... js module configuration in webpack
  plugins : [new webpack.DefinePlugin({
    env : JSON.stringify(Object.assign({}, config, {
      isProduction
    }))
  }), new VueLoaderPlugin()]
};

// config/.env file
FB = {"version":"v12.0","pageId":"your fb page ID","themeColor":"your hex color e.g. #ffffff"}