Integrate OneHash Chat with Vue.js

Vue.js

To integrate OneHash Chat with a Vue.js application, you need to paste the OneHash Chat widget script in your Vue.js application's index.html file:

You can get the script from Settings > Inboxes > Select your Website channel > Click on the Configuration tab. If you haven't created a website channel yet, you can find the instructions Here
Copy the script that was created in the code field of the channel.

Open your vue project and paste the script in the index.html file, right before the closing </body> tag.

<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 -->

  <!-- OneHash Chat 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.OneChatSDK.run({
          websiteToken: "yZ7USzaEs7hrwUAHLGwjbxJ1",
          baseUrl: BASE_URL,
        });
      };
    })(document, "script");
  </script>
  <!-- OneHash Chat script goes here -->
</body>

You would be able to see the OneHash Chat widget on the page now.

Updated on: 27/09/2023

Was this article helpful?

Thank you!