@desklync/react

React SDK for the DeskLync chat widget.

Installation

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

Quick Start

import { DeskLyncProvider, useDeskLync } from '@desklync/react'

// Wrap your app with the provider
function App() {
  return (
    <DeskLyncProvider businessId="your-business-id">
      <YourApp />
    </DeskLyncProvider>
  )
}

// Use the hook in any component
function ChatButton() {
  const { open, isReady } = useDeskLync()

  return (
    <button onClick={open} disabled={!isReady}>
      Chat with us
    </button>
  )
}

Provider Configuration

<DeskLyncProvider
  businessId="your-business-id"
  position="bottom-right"
  primaryColor="#6366f1"
  welcomeMessage="Hi there! 👋"
  welcomeSubtext="We usually reply within a few minutes."
>
  <App />
</DeskLyncProvider>

Hooks

useDeskLync()

Access all DeskLync functionality.

function MyComponent() {
  const {
    isReady,      // Widget is loaded and ready
    isOpen,       // Widget is currently open
    isIdentified, // User has been identified
    open,         // Open the widget
    close,        // Close the widget
    toggle,       // Toggle widget visibility
    identify,     // Identify a user
    clearUser,    // Clear user (on logout)
  } = useDeskLync()

  // Identify user after login
  const handleLogin = (user) => {
    identify({
      email: user.email,
      name: user.name,
      userHash: user.deskLyncHash, // From your server
    })
  }

  // Clear on logout
  const handleLogout = () => {
    clearUser()
  }

  return (
    <button onClick={toggle}>
      {isOpen ? 'Close Chat' : 'Open Chat'}
    </button>
  )
}

useDeskLyncMessages(callback)

Listen for new messages.

function NotificationHandler() {
  useDeskLyncMessages((message) => {
    console.log('New message:', message.content)
    // Show notification, play sound, etc.
  })

  return null
}

Components

<DeskLyncButton />

Pre-built button component.

import { DeskLyncButton } from '@desklync/react'

function Footer() {
  return (
    <DeskLyncButton className="my-button-class">
      Need help? Chat with us
    </DeskLyncButton>
  )
}

Server-Side Identity Verification

For secure user identification, generate the userHash on your server:

// Node.js example
const crypto = require('crypto')

function generateUserHash(email, secretKey) {
  return crypto
    .createHmac('sha256', secretKey)
    .update(email)
    .digest('hex')
}

Then pass it to identify():

identify({
  email: '[email protected]',
  name: 'John Doe',
  userHash: hashFromServer,
})

License

MIT