Adding live chat feature in your website is made easy with using Chatra. Live chat or live support is commonly used in the website where the visitors can engage or ask some questions or additional info about the website and an agent or support will directly reply on your inquiry (if there's an available agent). Before we begin, let's discuss about what Chatra is. "Chatra is a live chat messenger app for your website. It is made to increase online sales but in a friendly, helpful way." - source. Chatra is also quite popular & available in different CMS (Content Management Systems) platforms like WordPress, WooCommerce, Shopify etc.
Some of the good things I've found in using Chatra are: Easy to setup, a friendly admin portal where you can track all the chats made through your site and it's free if you're only using one agent account. If you want more than one agent, then you can visit: Chatra Plans & Features.
Okay, enough with the intro and let's get started on how we can setup 3rd-party chat feature, powered by Chatra, in your Vue.JS, React.JS or Angular app.
Begin we begin, make sure you already have a Chatra account, if not then you should create one first athttps://app.chatra.io/.
If you want to add your chat name, logo and other additional settings, then you can go to https://app.chatra.io/settings/account.
2.1 Go to Chat Widget section. and copy all the codes. It should be something like this:
<!-- Chatra {literal} -->
<script>
(function(d, w, c) {
w.ChatraID = 'YOUR_CHATRA_ID';
var s = d.createElement('script');
w[c] = w[c] || function() {
(w[c].q = w[c].q || []).push(arguments);
};
s.async = true;
s.src = 'https://call.chatra.io/chatra.js';
if (d.head) d.head.appendChild(s);
})(document, window, 'Chatra');
</script>
<!-- /Chatra {/literal} -->Go to src/main.js and paste the code (See sample below).
import Vue from 'vue'
import App from './App.vue'
// CHATRA
(function (d, w, c) {
w.ChatraID = 'YOUR_CHATRA_ID';
var s = d.createElement('script');
w[c] = w[c] || function () {
(w[c].q = w[c].q || []).push(arguments);
};
s.async = true;
s.src = 'https://call.chatra.io/chatra.js';
if (d.head) d.head.appendChild(s);
})(document, window, 'Chatra');
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
Go to src/App.js and paste the code (See sample below).
import './App.css';
// CHATRA
(function (d, w, c) {
w.ChatraID = 'YOUR_CHATRA_ID';
var s = d.createElement('script');
w[c] = w[c] || function () {
(w[c].q = w[c].q || []).push(arguments);
};
s.async = true;
s.src = 'https://call.chatra.io/chatra.js';
if (d.head) d.head.appendChild(s);
})(document, window, 'Chatra');
function App() {
return (
<div className="App">
<header className="App-header">
React.JS App
</header>
</div>
);
}
export default App;
Go to src/index.html and paste the code inside the header tag (See sample below).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NgApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Chatra {literal} -->
<script>
(function (d, w, c) {
w.ChatraID = 'YOUR_CHATRA_ID';
var s = d.createElement('script');
w[c] = w[c] || function () {
(w[c].q = w[c].q || []).push(arguments);
};
s.async = true;
s.src = 'https://call.chatra.io/chatra.js';
if (d.head) d.head.appendChild(s);
})(document, window, 'Chatra');
</script>
<!-- /Chatra {/literal} -->
</head>
<body>
<app-root></app-root>
</body>
</html>
Chats can be viewed in the Chat page.
You can explore and adjust the settings of the chat widget at the portal based on your preferences.
Well, that's it. I hope you like this post.
If you have some questions or comments, please drop it below 👇 :)
About the author
Mark Deanil Vicente is passionate in sharing to the community by means of writing article & speaking about development technologies especially for web, cloud and mobile. He's also an active Microsoft Most Value Professional (MVP). Read more...
