Vue.js plugin for Zendesk Web Widget
This plugin allows you to configure and add Zendesk Web Widget
Zendesk Web Widget Documentation
- Add the
vue-zendesk
dependency withyarn
ornpm
to your project - Configure it:
import Vue from 'vue'
import Zendesk from 'vue-zendesk'
Vue.use(Zendesk, {
key: 'YOUR_ZENDESK_KEY',
disabled: true,
hideOnLoad: true,
settings: {
webWidget: {
color: {
theme: '#78a300'
}
}
}
})
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)
.
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.
You can view Zendesk Web Widget available settings here.
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 zendeskLoaded
event emitted on script load.
For example:
this.$on('zendeskLoaded', (event) => {
this.$zendesk.identify({
name: 'John'
})
})
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')
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
npm run dev