ShowEasyFrontEnd/FrontEnd/components/fb-messenger/customMessenger.vue

<template>
  <div>
    <div id="fb-root"></div>
    <div id="fb-customer-chat" class="fb-customerchat"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      page_id: "100918545835171", //  1126866797415176
    };
  },
  mounted() {
    if (process.browser && process.env.ENV !== "local") {
      var chatbox = document.getElementById("fb-customer-chat");
      chatbox.setAttribute("page_id", this.page_id);
      chatbox.setAttribute("attribution", "biz_inbox");
      window.fbAsyncInit = function () {
        FB.init({
          xfbml: true,
          version: "v14.0",
        });
      };
      (function (d, s, id) {
        var js,
          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");
    }
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
:deep() {
  #fb-root .fb_dialog_content.hasBar>iframe:first-child {
    bottom: 120px !important;

    @media screen and (min-width: 768px) {
      bottom: 100px !important;
    }
  }
}
</style>