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

> 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[​](https://docs.squareomni.com/docs/product/channels/live-chat/integrations/vue#1-get-your-widget-script "Direct link to heading")

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](https://docs.squareomni.com/hc/squarehub-user-guide-cloud-version/en/website-live-chat/474).

## Bước 2. Sao chép script[**​**](https://docs.squareomni.com/docs/product/channels/live-chat/integrations/vue#2-copy-the-script "Direct link to heading")

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

![](/assets/images/cd9a0d79_script_for_a_website_inbox.png)

## Bước 3. Dán script vào đây[​](https://docs.squareomni.com/docs/product/channels/live-chat/integrations/vue#3-paste-the-script-here "Direct link to heading")

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![​](/assets/other/6d7abf42_vue.bin "Direct link to heading")

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

![](/assets/images/4db14a26_vue.png)

### Module Vue.js, Nuxt.js[​](https://docs.squareomni.com/docs/product/channels/live-chat/integrations/vue#vuejs-nuxtjs-module "Direct link to heading")

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](https://github.com/huntersofbook/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](http://vue-squarehub-plugin.vercel.app/).

-   Xem [module Vue 3](https://github.com/huntersofbook/huntersofbook/tree/main/projects/squarehub/packages/vue).
    
-   Xem [module Nuxt 3](https://github.com/huntersofbook/huntersofbook/tree/main/projects/squarehub/packages/nuxt).
