hichina2023/hichina-main-front-mobile-first/src/pages/ContactPage.vue

<template>
  <q-page
    ><div style="margion: 0 auto; min-height: 50px">
      <div class="text-center text-h5">
        You need help from our customer serivce?
      </div>
      <div class="text-center text-h6 text-subtitle text-grey-13">
        Please send your demands to
      </div>
      <div class="text-center">
        <a href="mailto:customerservice@hichinatrip.com"
          >customerservice@hichinatrip.com</a
        >
      </div>
      <div class="text-center text-subtitle1">
        Our co-workers will will response ASAP
      </div>
      <div class="text-center text-h5 text-grey-13">
        Also, add us on Wechat/WhatsAPP!
      </div>
      <div class="text-center">
        <q-img
          style="width: 300px"
          src="https://photoprism.hichinatravel.com/api/v1/t/d68ee79239386b14869f548a423de4bcc7e3cb31/32mcf2k4/fit_2048"
          alt=""
        />
      </div>
    </div>
    <!-- Messenger Chat Plugin Code -->
    <div id="fb-root"></div>

    <!-- Your Chat Plugin code -->
    <div id="fb-customer-chat" class="fb-customerchat"></div>
  </q-page>
</template>

<script>
import { ref, onMounted, onBeforeMount, getCurrentInstance } from "vue";
import { useQuasar } from "quasar";
import { api } from "boot/axios";
import Qs from "qs";
export default {
  name: "ContactPage",
  setup() {
    function setupChat() {
      var chatbox = document.getElementById("fb-customer-chat");
      chatbox.setAttribute("page_id", "1534271790187013");
      chatbox.setAttribute("attribution", "biz_inbox");
    }
    function initFacebookSDK() {
      window.fbAsyncInit = function () {
        FB.init({
          xfbml: true,
          version: "v17.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");
    }
    onMounted(() => {
      setupChat();
    });

    onBeforeMount(() => {
      initFacebookSDK();
    });
  },
};
</script>