vue-freshchat

A reactive wrapper for Freshchat's JavaScript API

Installation

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

Usage

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 });
    },
  },
});

Example App

cd example
npm install
npm run dev

API

Parameters

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

Values

$freshchat.ready

Set to true once the Freshchat script has been loaded.

$freshchat.isOpen

Set via the opened/closed events.

Methods

$freshchat.setExternalId(externalId)

Calls freshchat.setExternalId.

$freshchat.setUserProperties(options)

Calls freshchat.setProperties.

$freshchat.open(/*optional*/ payload)

Calls freshchat.open().

$freshchat.close()

Calls freshchat.close().

$freshchat.toggle()

Calls freshchat.open() if the widget is closed and freshchat.close() if the widget is open.

$freshchat.listen(event, function)

Calls freshchat.on(event, function)

$freshchat.hideWidget()

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

$freshchat.showWidget()

Will display the widget bubble if it has already been hidden

License

MIT

Copyright (c) 2020