Yêu cầu thg 3 20, 2023 3:06 SA 269 0 2
  • 269 0 2
0

Hỏi về tối ưu messenger chat trong vuejs

Chia sẻ
  • 269 0 2

Chào mọi người. Mình đang muốn nhúng plugin chat messenger vào website VueJS. Mình đang dùng lib vue-fb-customer-chat nhưng đang có 1 vấn đề là nó tải ngay toàn bộ mọi thứ khi vào trang. Mình muốn nó load khi mà người dùng click vào icon mess thì phải làm như thế nào? Mong các bạn hỗ trợ.

image.png

2 CÂU TRẢ LỜI


Đã trả lời thg 3 20, 2023 3:55 SA
Đã được chấp nhận
+1

Cần gì phải phức tạp thế, bạn copy thẳng cái script embed của facebook rồi chèn vào cuối trang ấy. Xong thêm attribute này cho phần embed chatbox để nó hiện mỗi icon message, hộp chat chỉ hiện khi người dùng click vào icon.

greeting_dialog_display = icon
<!-- Messenger Chat Plugin Code -->
    <div id="fb-root"></div>

    <div id="fb-customer-chat" class="fb-customerchat"></div>

    <script>
      var chatbox = document.getElementById('fb-customer-chat');
      chatbox.setAttribute("page_id", "PAGE-ID");
      chatbox.setAttribute("greeting_dialog_display", "icon");
    </script>


    <script>
      window.fbAsyncInit = function() {
        FB.init({
          xfbml            : true,
          version          : 'API-VERSION'
        });
      };

      (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'));
    </script>

Doc: https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin/#step-2--customize-the-plugin

image.png

Chia sẻ
Avatar quang hải @sven_9x
thg 4 2, 2023 9:43 SA

@huukimit mình set chatbox.setAttribute("greeting_dialog_display", "icon"); thế nhưng vẫn thấy gg page speed báo do cái đó nên nó bị load chậm nhỉ bạn?

Đã trả lời thg 3 20, 2023 4:23 SA
0

Chỗ import bạn sử dụng dynamic import xem sao.

Chia sẻ
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí