Nanotech Parading Mars

    @dansmaculotte/vue-zendesk

    0.4.6 • Public • Published

    vue-zendesk

    npm version npm downloads Dependencies Standard JS

    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.

    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

    Keywords

    none

    Install

    npm i @dansmaculotte/vue-zendesk

    DownloadsWeekly Downloads

    5,083

    Version

    0.4.6

    License

    MIT

    Unpacked Size

    8.2 kB

    Total Files

    4

    Last publish

    Collaborators

    • zevran
    • pab50
    • romaintouze-dmc