Vue.js plugin for Zendesk Web Widget
This plugin allows you to configure and add Zendesk Web Widget
Zendesk Web Widget Documentation
@dansmaculotte/vue-zendesk
dependency with yarn
or npm
to your projectimport 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'
}
}
}
})
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.
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')
yarn install
or npm install
npm run dev