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

Vue.js plugin for Zendesk Web Widget
https://github.com/dansmaculotte/vue-zendesk

vue vue-plugin zendesk zendesk-web-widget

Last synced: 3 days ago
JSON representation

Vue.js plugin for Zendesk Web Widget

• Host: GitHub
• URL: https://github.com/dansmaculotte/vue-zendesk
• Owner: dansmaculotte
• License: mit
• Created: 2019-04-24T06:55:22.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-11-18T20:43:07.000Z (about 1 month ago)
• Last Synced: 2024-12-13T10:05:23.096Z (10 days ago)
• Topics: vue, vue-plugin, zendesk, zendesk-web-widget
• Language: JavaScript
• Homepage:
• Size: 1.36 MB
• Stars: 35
• Watchers: 4
• Forks: 18
• Open Issues: 6
• Metadata Files:
  • Readme: ReadMe.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# vue-zendesk

[![npm version][npm-version-src]][npm-version-href]

[![npm downloads][npm-downloads-src]][npm-downloads-href]

[![Dependencies][david-dm-src]][david-dm-href]

[![Standard JS][standard-js-src]][standard-js-href]

> Vue.js plugin for Zendesk Web Widget

This plugin allows you to configure and add Zendesk Web Widget

[Zendesk Web Widget Documentation](https://developer.zendesk.com/embeddables/docs/widget/introduction)

## Setup

1. Add the `@dansmaculotte/vue-zendesk` dependency with `yarn` or `npm` to your project

2. Configure it:

```js

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](https://developer.zendesk.com/embeddables/docs/widget/settings).

#### `nonce`

Allows you to set script tag `nonce` attribute to support CSP. See [zendesk doc](https://developer.zendesk.com/documentation/classic-web-widget-sdks/web-widget/integrating-with-google/csp/).

## Usage

You can use any method coming from the official documentation.

Every methods are accessible from `$zendesk` object.

For example:

```js

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:

```js

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:

```js

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](./LICENSE.md)

[npm-version-src]: https://img.shields.io/npm/dt/@dansmaculotte/vue-zendesk.svg?style=flat-square

[npm-version-href]: https://npmjs.com/package/@dansmaculotte/vue-zendesk

[npm-downloads-src]: https://img.shields.io/npm/v/@dansmaculotte/vue-zendesk/latest.svg?style=flat-square

[npm-downloads-href]: https://npmjs.com/package/@dansmaculotte/vue-zendesk

[david-dm-src]: https://david-dm.org/dansmaculotte/vue-zendesk/status.svg?style=flat-square

[david-dm-href]: https://david-dm.org/dansmaculotte/vue-zendesk

[standard-js-src]: https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square

[standard-js-href]: https://standardjs.com