veue-zen 办公桌

Zendesk Web 部件的 Vue.js 插件

此插件允许您配置并添加 Zendesk Web 部件

Zendesk 网络部件文档

设置

1. 添加数据 @dansmaculotte/vue-zendesk 依赖关系 yarn 或者说 npm 给您的项目
2. 配置它 :

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'
      }
    }
  }
})

选项

disabled

disabled 选项允许您防止自动加载脚本,以遵守 GDPR.

你可以打电话手动装入 this.$zendesk.load(YOUR_ZENDESK_KEY)。 。 。 .

hideOnLoad

Zendesk Web 部件初始化后, 它会自动显示部件, 为了防止它, 您可以设置为 true 此选项可以让您在之后手动显示 .

settings

您可以查看 Zendesk 网络部件可用设置 这里。 。 。 .

使用量

您可以使用官方文档中的任何方法. 每一种方法都可以从 $zendesk 对象.

例如:

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

你们也可以听 loaded 脚本加载时释放的事件, open 打开部件 close 关闭部件.

例如:

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')
})

您可以通过 Zendesk 网页部件实例访问 this.$zendesk.zE 或者说 window.zE 对象.

例如:

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

发展

1. 克隆此寄存器
2. 使用 yarn install 或者说 npm install
3. 开始使用开发服务器 npm run dev

许可证

MIT 许可证