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", config: { } }); // config object is optional
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: "[email protected]",
};
},
mounted() {
this.$freshchat.setExternalId(this.userExternalId);
this.$freshchat.open();
},
watch: {
userEmail() {
this.$freshchat.setUserProperties({ email: this.userEmail });
},
},
});
cd example
npm install
npm run dev
appToken: (Required) Your freshchat auth token
host: (Optional) Add a custom url to fetch the freshchat script from
config: (Optional) Additional configuration for initializing freshchat
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.
Calls freshchat.on(event, function)
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
Will display the widget bubble if it has already been hidden
Copyright (c) 2020