@desklync/vue

Vue 3 SDK for the DeskLync chat widget.

Installation

npm install @desklync/vue
# or
yarn add @desklync/vue
# or
pnpm add @desklync/vue

Quick Start

// main.ts
import { createApp } from 'vue'
import { createDeskLync } from '@desklync/vue'
import App from './App.vue'

const app = createApp(App)

app.use(createDeskLync({
  businessId: 'your-business-id'
}))

app.mount('#app')

<!-- Component.vue -->
<script setup lang="ts">
import { useDeskLync } from '@desklync/vue'

const { open, isReady, isOpen } = useDeskLync()
</script>

<template>
  <button @click="open" :disabled="!isReady">
    {{ isOpen ? 'Close Chat' : 'Open Chat' }}
  </button>
</template>

Plugin Configuration

app.use(createDeskLync({
  businessId: 'your-business-id',
  position: 'bottom-right',
  primaryColor: '#6366f1',
  welcomeMessage: 'Hi there! 👋',
  welcomeSubtext: 'We usually reply within a few minutes.'
}))

Composables

useDeskLync()

Access all DeskLync functionality.

<script setup lang="ts">
import { useDeskLync } from '@desklync/vue'

const {
  isReady,      // Ref<boolean> - Widget is loaded
  isOpen,       // Ref<boolean> - Widget is open
  isIdentified, // Ref<boolean> - User identified
  open,         // () => void
  close,        // () => void
  toggle,       // () => void
  identify,     // (user) => void
  clearUser,    // () => void
} = useDeskLync()

// Identify user after login
function handleLogin(user: User) {
  identify({
    email: user.email,
    name: user.name,
    userHash: user.deskLyncHash,
  })
}

// Clear on logout
function handleLogout() {
  clearUser()
}
</script>

useDeskLyncMessages(callback)

Listen for new messages.

<script setup lang="ts">
import { useDeskLyncMessages } from '@desklync/vue'

useDeskLyncMessages((message) => {
  console.log('New message:', message.content)
})
</script>

Components

<DeskLyncButton />

Pre-built button component.

<script setup lang="ts">
import { DeskLyncButton } from '@desklync/vue'
</script>

<template>
  <DeskLyncButton>
    Need help? Chat with us
  </DeskLyncButton>
</template>

TypeScript

Full TypeScript support included. Types are automatically inferred.

import type { DeskLyncConfig, DeskLyncUser } from '@desklync/vue'

License

MIT