Vue.js plugin implementation of the Drift chat widget with 100% browser API compatability
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!
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!
Run in Terminal:
cd demo
npm install
echo 'DRIFT_APPID="YOUR_APP_ID"' > .env
npm run serve
Wait for a browser window to open
Add an optional parameter development
when registering the component:
Vue.use(VueDrift, {
appId: 'YOUR_APP_ID',
development: true,
})
Make this call anywhere in your app:
this.$drift.config({
locale: 'SOME_LOCALE',
backgroundColor: 'SOME_BACKGROUND_COLOR',
});
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>
Make this call anywhere in your app:
this.$drift.reset();
Make this call on route change in your app:
this.$drift.page();
Make this call anywhere in your app:
this.$drift.hide();
Make this call anywhere in your app:
this.$drift.show();
Make this call anywhere in your app:
this.$drift.METHOD
where METHOD
is any browser API method (see here)