vue-drift

Vue.js plugin implementation of the Drift chat widget with 100% browser API compatability

Usage

Node-based environment

Install using npm:

npm install vue-drift

Add to index.js of your Vue application:

import Vue from 'vue'
import VueDrift from 'vue-drift'

Vue.use(VueDrift, {
  appId: 'YOUR_APP_ID',
})

Where appId is your application identifier provided by Drift

That's it! Enjoy!

Browser environment

It depends on your tooling, but the simplest way is to add this to your HTML page:

...
<div id="app"></div>
...
<script  src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>

<script src="https://unpkg.com/vue-drift@latest/dist/vue-drift.window.min.js"></script>

<script>
  Vue.component('vue-drift', VueDrift);

  Vue.use(VueDrift, {
    appId: 'YOUR_APP_ID',
  })

  new Vue({
    el: '#app',
  })
</script>
...

Where appId is your application identifier provided by Drift

That's it! Enjoy!

Demo

Run in Terminal:

cd demo
npm install
echo 'DRIFT_APPID="YOUR_APP_ID"' > .env
npm run serve

Wait for a browser window to open

Advanced Usage

Disable in development mode

Add an optional parameter development when registering the component:

Vue.use(VueDrift, {
  appId: 'YOUR_APP_ID',
  development: true,
})

Change Configuration

Make this call anywhere in your app:

this.$drift.config({
  locale: 'SOME_LOCALE',
  backgroundColor: 'SOME_BACKGROUND_COLOR',
});

Identify Users

Add to App.vue of your Vue application:

<script>
export default {
  mounted() {
    this.$drift.identify('SOME_USER_ID', {
      name: 'SOME_USER_NAME',
      email: 'SOME_USER_EMAIL'
    })
  }
}
</script>

Remove User Identification

Make this call anywhere in your app:

this.$drift.reset();

Change Page

Make this call on route change in your app:

this.$drift.page();

Hide the Widget

Make this call anywhere in your app:

this.$drift.hide();

Show the Widget

Make this call anywhere in your app:

this.$drift.show();

Other browser API

Make this call anywhere in your app:

this.$drift.METHOD

where METHOD is any browser API method (see here)

License

MIT