Integrate OneChat with Vue.js

Vue.js

To integrate OneChat with a Vue.js application, you need to paste the OneChat 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 -->

  <!-- OneChat 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>
  <!-- OneChat script goes here -->
</body>

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

Updated on: 23/03/2023

Was this article helpful?

Thank you!