Vue.js Integration
Learn how to integrate the Chatwik live chat widget into your Vue.js application.
To integrate Chatwik with your Vue.js application, you need to paste the Chatwik widget script in your Vue.js application's index.html file.
Follow the steps below to complete the integration.
Installation & Setup
Get Your Widget Script
Your widget script can be found in your Website Inbox settings. Go to Settings → Inboxes → select your Website inbox → Configuration tab.
If you haven't created a website inbox yet, refer to the Website Live Chat Setup guide.
Copy the Widget Script Copy the script snippet provided in the Code
field of your website inbox configuration.
Paste the Script in index.html
Open your Vue project and paste the script into your 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 -->
<!-- Chatwik live chat script -->
<script>
(function (d, t) {
var BASE_URL = "https://app.chatwik.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.chatwikSDK.run({
websiteToken: "YOUR_WEBSITE_TOKEN",
baseUrl: BASE_URL,
});
};
})(document, "script");
</script>
</body>Verify Installation
Run your Vue development server and refresh your application page to verify that the Chatwik live chat widget appears.