saradesk

SaraDesk widget loader — embed AI support chat and ticket tracking in any web app.

SaraDesk is a multi-product support desk by Saravonix with AI-powered L1/L2 triage and human agent L3 escalation.

Install

npm install saradesk
# or
yarn add saradesk
# or
pnpm add saradesk

Quick start

import { loadChat, loadTickets, reset } from 'saradesk'

// Load the AI support chat widget
await loadChat({
  productKey: 'sk_xxxx',                                  // from SaraDesk portal
  apiUrl:     'https://saradesk-production.up.railway.app',
  userEmail:  user.email,   // pass from your auth session
  userName:   user.name,
  userId:     user.id,
})

// Load the My Tickets panel
await loadTickets({
  productKey:  'sk_xxxx',
  apiUrl:      'https://saradesk-production.up.railway.app',
  userEmail:   user.email,
  productName: 'My App',
})

// On logout — reset the widget session
reset()

Functions

loadChat(config) → Promise<void>

Loads sara-support.js — floating chat button with AI L1/L2 and human L3 escalation.

loadChat({
  productKey:  string           // required
  apiUrl:      string           // required
  userId?:     string
  userEmail?:  string
  userName?:   string
  position?:   'bottom-right' | 'bottom-left'   // default: bottom-right
  brandColor?: string                            // default: #6C47FF
  buttonLabel?: string                           // default: Support
})

loadForm(config) → Promise<void>

Loads sara-form.js — human-mode contact form, no AI, creates L3 ticket directly.

loadForm({
  productKey:   string          // required
  apiUrl:       string          // required
  userId?:      string
  userEmail?:   string
  userName?:    string
  position?:    'bottom-right' | 'bottom-left'
  brandColor?:  string
  formTitle?:   string          // default: Contact Support
  buttonText?:  string          // default: Support
  categories?:  string[]        // e.g. ['Billing', 'Technical']
  inlineTarget?: string         // CSS selector — renders inline instead of floating
})

loadTickets(config) → Promise<void>

Loads sara-tickets.js — floating 'My Tickets' button. Customers see all their tickets and can reply to open ones.

loadTickets({
  productKey:   string          // required
  apiUrl:       string          // required
  userId?:      string
  userEmail?:   string
  userName?:    string
  productName?: string          // shown in widget header
  position?:    'bottom-right' | 'bottom-left'
  brandColor?:  string
  buttonText?:  string          // default: My Tickets
  inlineTarget?: string         // CSS selector — embed inline
})

reset() → void

Reset the chat session. Call on user logout so the next open starts fresh.

updateUser(user) → void

Update user identity after login (SPAs).

import { updateUser } from 'saradesk'
updateUser({ userEmail: '[email protected]', userName: 'Jane' })

Framework examples

Vue 3

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { loadChat, reset } from 'saradesk'
import { useAuth } from '@/composables/auth'

const { user } = useAuth()

onMounted(() => {
  loadChat({
    productKey: import.meta.env.VITE_SARADESK_KEY,
    apiUrl:     import.meta.env.VITE_SARADESK_URL,
    userEmail:  user.value?.email,
    userName:   user.value?.name,
  })
})

onUnmounted(() => reset())
</script>

Svelte

<script>
  import { onMount, onDestroy } from 'svelte'
  import { loadChat, reset } from 'saradesk'
  import { user } from '$lib/stores/auth'

  onMount(() => {
    loadChat({
      productKey: import.meta.env.PUBLIC_SARADESK_KEY,
      apiUrl:     import.meta.env.PUBLIC_SARADESK_URL,
      userEmail:  $user?.email,
    })
  })

  onDestroy(() => reset())
</script>

Vanilla JS / script tag (no bundler)

<script type="module">
  import { loadChat } from 'https://esm.sh/saradesk'
  loadChat({ productKey: 'sk_xxxx', apiUrl: 'https://...' })
</script>

TypeScript

Full TypeScript types are included. No @types/saradesk needed.

import { loadChat, type SaraDeskChatConfig } from 'saradesk'

const config: SaraDeskChatConfig = {
  productKey: 'sk_xxxx',
  apiUrl:     'https://saradesk-production.up.railway.app',
  userEmail:  user.email,
  brandColor: '#6C47FF',
}

await loadChat(config)

Getting a product key

1. Sign up at saravonix.com/saradesk
2. Create a product in the SaraDesk portal
3. Copy the API key from the product settings

Links

• SaraDesk portal
• Documentation
• PyPI package — Streamlit + Python client
• Issues

License

MIT © Saravonix Technologies