vue-zendesk

Vue.js plugin for Zendesk Web Widget

This plugin allows you to configure and add Zendesk Web Widget

Zendesk Web Widget Documentation

Setup

1. Add the @dansmaculotte/vue-zendesk dependency with yarn or npm to your project
2. Configure it:

import Vue from 'vue'
import Zendesk from '@dansmaculotte/vue-zendesk'

Vue.use(Zendesk, {
  key: 'YOUR_ZENDESK_KEY',
  disabled: true,
  hideOnLoad: true,
  settings: {
    webWidget: {
      color: {
        theme: '#78a300'
      }
    }
  }
})

Options

disabled

disabled option allows you to prevent automatic script loading, to comply with GDPR.

You can manually load it by calling this.$zendesk.load(YOUR_ZENDESK_KEY).

hideOnLoad

When Zendesk Web Widget is initialized it automatically shows the widget, to prevent this you can set to true this option so you can manually show it after.

settings

You can view Zendesk Web Widget available settings here.

nonce

Allows you to set script tag nonce attribute to support CSP. See zendesk doc.

Usage

You can use any method coming from the official documentation. Every methods are accessible from $zendesk object.

For example:

Vue.$zendesk.hide()
// In a vue component
this.$zendesk.show()

You can also listen to loaded event emitted on script load, open on widget open and close on widget close.

For example:

this.$zendesk.$on('loaded', (event) => {
  this.$zendesk.identify({
    name: 'John'
  })
})

this.$zendesk.$on('open', () => {
  console.log('Widget is open')
})

this.$zendesk.$on('close', () => {
  console.log('Widget is closed')
})

You can access to Zendesk Web Widget instance through this.$zendesk.zE or window.zE objects.

For example:

this.$zendesk.zE('webWidget', 'hide')
window.zE('webWidget', 'hide')

Development

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Start development server using npm run dev

License

MIT License