Home Website Live Chat How to Install the Live Chat in a Vue.js Application

How to Install the Live Chat in a Vue.js Application

Last updated on Apr 16, 2025

If you're using Vue.js for your website or application, you can easily integrate the Akece live chat widget to talk to your visitors in real time. To do so, simply add the widget script directly into your project’s index.html file.

1. Get the Widget Script

You can find the widget script in the settings of your Website inbox.

To access it:

  • Go to Settings → Inboxes

  • Click the Configure link for the Website inbox

  • Open the Configuration tab

If you haven't created a Website inbox yet, follow this guide to learn how to set one up.

2. Copy the Generated Script

Copy the script shown in the configuration tab. It should look similar to this:

<script>
  (function(d, t) {
    var BASE_URL = "https://dash.akece.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.akeceSDK.run({
        websiteToken: "YOUR_TOKEN_HERE",
        baseUrl: BASE_URL
      });
    };
  })(document, "script");
</script>

Make sure to replace "YOUR_TOKEN_HERE" with the actual token from your Website inbox.

3. Paste the Script into index.html

Open your Vue project and edit the file located at:
/public/index.html

Paste the script just before the closing </body> tag, like this:

<body>
  <noscript>
    <strong>Please enable JavaScript to view this site properly.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->

  <!-- Akece Widget Script -->
  <script>
    (function(d, t) {
      var BASE_URL = "https://dash.akece.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.akeceSDK.run({
          websiteToken: "YOUR_TOKEN_HERE",
          baseUrl: BASE_URL
        });
      };
    })(document, "script");
  </script>
</body>

Again, replace "YOUR_TOKEN_HERE" with your actual token.

4. Confirm the Installation

After saving your changes, publish your project or reload your site locally. The Akece widget should now appear automatically on every page.


Need help configuring the widget in your Vue.js project?
We’re here to help:
📩 [email protected]
📱 @akece.ai