A reactive wrapper for Freshchat's JavaScript API
npm install vue-freshchat
import Vue from 'vue';
import VueFreshchat from 'vue-freshchat';
Vue.use(VueFreshchat, { appToken: 'your-freshchat-token' });
vue-freshchat
handles the injection of Freshchat's script into your html and wraps calls to the Freshchat API with methods and exposes them through the $freshchat
object in your components.
new Vue({
el: '#main',
data() {
return {
userExternalId: 1,
userEmail: 'john@doe.com',
};
},
mounted() {
this.$freshchat.setExternalId(this.userExternalId);
this.$freshchat.open();
},
watch: {
userEmail() {
this.$freshchat.setUserProperties({ email: this.userEmail });
}
}
});
cd example
npm install
npm run dev
Set to true
once the Freshchat script has been loaded.
Set via the opened
/closed
events.
Calls freshchat.setExternalId
.
Calls freshchat.setProperties
.
Calls freshchat.open()
.
Calls freshchat.close()
.
Calls freshchat.open()
if the widget is closed and freshchat.close()
if the widget is open.
Will hide the widget bubble, and only show it when it's opened, use this property if you want to create your own personalized bubble
Copyright (c) 2020