@mineiros/vue-drift-widget
TypeScript icon, indicating that this package has built-in type declarations

0.0.7 • Public • Published

CI Pipeline

vue-drift-widget

A cheap (~ 3kb) Vue 3 plugin for the drift.com widget.

Features

  • Strongly-typed API: Full typescript support and strongly typed drift API
  • Tiny: < 3kb minified & compressed>

Requirements

  • Vue.js >= 3.0.0
  • Drift.com account to receive a drift widget id.

Installation

To install the latest version:

npm install --save @mineirosio/vue-drift-widget
yarn add @mineirosio/vue-drift-widget

Usage

To load the drift widget in your app, load the plugin and set your widget id.

main.ts:

import { createApp } from 'vue'
import App from './App.vue'
import { createDriftPlugin } from '@mineirosio/vue-drift-widget'

const driftID = 'XXXXXX'

createApp(App)
  .use(
    createDriftPlugin({
      widgetId: driftId,
    }),
  )
  .mount('#app')

The config is a reactive object that will be injected into the app in the plugins install method. This allows us to dynamically enable and disable the widget, which is helpful when you e.g., need to handle GDPR consents.

main.ts:

import { createApp } from 'vue'
import App from './App.vue'
import { createDriftPlugin } from '@mineirosio/vue-drift-widget'

const driftID = 'XXXXXX'

createApp(App)
  .use(
    createDriftPlugin({
      widgetId: driftId,
      enabled: false, // Don't enable the widget per default
    }),
  )
  .mount('#app')

App.vue:

<template>
  <div>
    drift configuration {{ driftConfig }}
  </div>
  <button @click="initDrift()" :disabled="driftConfig.enabled">Initalize Drift</button>
</template>

<script lang="ts">
import { defineComponent, inject} from 'vue'
import { useDriftPluginConfig } from '/drift/index'

export default defineComponent({
  name: 'App',
  setup() {
    const driftConfig = useDriftPluginConfig() // this is a wrapper around inject()

    const initDrift = (): void => {
      if(driftConfig) {
        driftConfig.enabled = true
      }
    }

    return { driftConfig, initDrift }
  }
})
</script>

Interact with Drifts API

This plugin currently supports most of the API endpoints provided by the widget. For further information on how to interact with the widget, please read the https://devdocs.drift.com/docs/widget-start.

<template>
  <p>drift.com example</p>
</template>

<script lang="ts">
import { useDrift } from '/drift/index'
import { defineComponent} from 'vue'

export default defineComponent({
  setup() {
    const drift  = useDrift()
    if(drift) {

      // api and payload are stronly typed
      drift.on('ready', (api, payload) => {
        api.openChat();
        console.log(api);
        console.log(payload);
      })

      drift.on('message', (data) => {
        console.log(data);
      })
    }
  }
})
</script>

Examples

For a fully functional example please find example

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
0.0.70latest

Version History

VersionDownloads (Last 7 Days)Published
0.0.70
0.0.60
0.0.50
0.0.40
0.0.30
0.0.20
0.0.10

Package Sidebar

Install

npm i @mineiros/vue-drift-widget

Weekly Downloads

0

Version

0.0.7

License

Apache-2.0

Unpacked Size

39.1 kB

Total Files

11

Last publish

Collaborators

  • soerenmartius