SquareHub

Cách cài đặt live chat trên ứng dụng Vue.js?

Mở trong
Xem dạng MarkdownMở trong ChatGPTMở trong Claude
TA

Tami

Cập nhật lần cuối ngày 10 thg 4, 2024

Để tích hợp SquareHub với ứng dụng Vue.js của bạn, bạn cần dán script widget SquareHub vào file index.html của ứng dụng Vue.js.

Đây là cách thực hiện:

Bước 1. Lấy script widget của bạn​

Script widget của bạn có thể được tìm thấy trong cài đặt Website Inbox. Đi đến Cài đặt -> Inbox -> Chọn kênh Website của bạn > tab Configuration.

Nếu bạn chưa tạo website inbox, bạn có thể tìm hướng dẫn từng bước tại đây.

Bước 2. Sao chép script​

Sao chép script được tạo trong trường code của kênh.

Bước 3. Dán script vào đây​

Mở dự án Vue của bạn và dán script vào file index.html, ngay trước thẻ đóng </body>.

<body>
  <noscript>
    <strong
      >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
      properly without JavaScript enabled. Please enable it to continue.</strong
    >
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->

  <!-- SquareHub script goes here -->
  <script>
    (function (d, t) {
      var BASE_URL = "https://example.com";
      var g = d.createElement(t),
        s = d.getElementsByTagName(t)[0];
      g.src = BASE_URL + "/packs/js/sdk.js";
      g.defer = true;
      g.async = true;
      s.parentNode.insertBefore(g, s);
      g.onload = function () {
        window.squarehubSDK.run({
          websiteToken: "yZ7USzaEs7hrwUAHLGwjbxJ1",
          baseUrl: BASE_URL,
        });
      };
    })(document, "script");
  </script>
  <!-- SquareHub script goes here -->
</body>

Bước 4. Kiểm tra​

Bây giờ bạn sẽ thấy widget SquareHub xuất hiện trên trang. Trông sẽ như thế này:

Module Vue.js, Nuxt.js​

Một module được cộng đồng duy trì (Được tạo bởi những người tuyệt vời tại @huntersofbook) để tích hợp SquareHub vào các dự án Vue 3 và Nuxt 3 của bạn đã có sẵn. Bạn có thể xem bản demo tại đây.