The Zendesk integration for Vue Storefront

README.md

Need only register this module in src/modules/client.ts and add a Zendesk key in your local.json:

"zendesk": {
  "key": "ZENDESK_KEY"
}

Based on https://github.com/dansmaculotte/vue-zendesk

index.ts

import Zendesk from '@dansmaculotte/vue-zendesk'
import { Logger } from '@vue-storefront/core/lib/logger'
import { once, isServer } from '@vue-storefront/core/helpers'
import { StorefrontModule } from '@vue-storefront/core/lib/modules';
import Vue from 'vue';

const zendeskStore = {
  namespaced: true,
  state: {
    key: null
  }
}

export const ZendeskModule: StorefrontModule = function ({ store, router, appConfig }) {
  if (appConfig.zendesk.key && !isServer) {
    once('__VUE_EXTEND_ZENDESK__', () => {
      Vue.use(Zendesk, {
        key: appConfig.zendesk.key || '',
        disabled: true,
        hideOnLoad: true,
        settings: {
          webWidget: {
            color: {
              theme: '#78a300'
            }
          }
        }
      })
    })
  } else {
    Logger.warn(
      'Zendesk extension is not working. Ensure Zendesk account ID is defined in config',
      'Zendesk'
    )()
  }

  store.registerModule('zendesk', zendeskStore)

  if (appConfig.zendesk.key && !isServer) {
    Vue.$zendesk.show()
    // or we can improve a time for display via subscribe on any VSF events:
    /*
      Vue.prototype.$bus.$on('any-custom-event-name', event => {
        Vue.$zendesk.show()
      }); 
    */
  }
}