@desklync/svelte

Svelte SDK for the DeskLync chat widget.

Installation

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

Quick Start

Option 1: Global Stores (Simplest)

<!-- +layout.svelte or App.svelte -->
<script>
  import { onMount } from 'svelte'
  import { initDeskLync } from '@desklync/svelte'

  onMount(() => {
    initDeskLync({
      businessId: 'your-business-id'
    })
  })
</script>

<slot />

<!-- Any component -->
<script>
  import { deskLyncReady, deskLyncOpen, deskLyncActions } from '@desklync/svelte'
</script>

<button on:click={deskLyncActions.open} disabled={!$deskLyncReady}>
  {$deskLyncOpen ? 'Close Chat' : 'Open Chat'}
</button>

Option 2: Context API (Recommended for larger apps)

<!-- +layout.svelte -->
<script>
  import { setDeskLyncContext } from '@desklync/svelte'

  setDeskLyncContext({
    businessId: 'your-business-id'
  })
</script>

<slot />

<!-- Child component -->
<script>
  import { getDeskLync } from '@desklync/svelte'

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

<button on:click={open} disabled={!$isReady}>
  {$isOpen ? 'Close Chat' : 'Open Chat'}
</button>

Configuration

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

Global Stores

<script>
  import {
    deskLyncReady,     // Readable<boolean>
    deskLyncOpen,      // Readable<boolean>
    deskLyncIdentified, // Readable<boolean>
    deskLyncActions    // { open, close, toggle, identify, clearUser }
  } from '@desklync/svelte'
</script>

{#if $deskLyncReady}
  <button on:click={deskLyncActions.toggle}>
    {$deskLyncOpen ? 'Close' : 'Chat'}
  </button>
{/if}

Context API

<script>
  import { getDeskLync } from '@desklync/svelte'

  const {
    isReady,      // Readable<boolean>
    isOpen,       // Readable<boolean>
    isIdentified, // Readable<boolean>
    open,         // () => void
    close,        // () => void
    toggle,       // () => void
    identify,     // (user) => void
    clearUser,    // () => void
  } = getDeskLync()
</script>

User Identification

<script>
  import { deskLyncActions } from '@desklync/svelte'

  function handleLogin(user) {
    deskLyncActions.identify({
      email: user.email,
      name: user.name,
      userHash: user.deskLyncHash, // From your server
    })
  }

  function handleLogout() {
    deskLyncActions.clearUser()
  }
</script>

Listening for Messages

<script>
  import { onMount } from 'svelte'
  import { onDeskLyncMessage } from '@desklync/svelte'

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

SvelteKit SSR

The SDK handles SSR automatically. Initialization only runs on the client.

<!-- +layout.svelte -->
<script>
  import { browser } from '$app/environment'
  import { initDeskLync } from '@desklync/svelte'

  if (browser) {
    initDeskLync({
      businessId: 'your-business-id'
    })
  }
</script>

License

MIT