Getting Started with the Statisfy SDK

npm install @statisfy/digital-workers-react

import '@statisfy/digital-workers-react/styles.css'

// YOUR BACKEND — the secret never leaves your server.
import jwt from 'jsonwebtoken'

app.get('/statisfy-token', requireYourOwnAuth, (req, res) => {
  const token = jwt.sign(
    { email: req.user.email },
    process.env.STATISFY_JWT_SECRET,     // your workspace's JWT secret
    { algorithm: 'HS256', expiresIn: '1h' }
  )
  res.json({ token })
})

// YOUR FRONTEND — fetch from your own endpoint; no Statisfy secret here.
async function fetchStatisfyToken(): Promise<string> {
  const res = await fetch('/statisfy-token')
  if (!res.ok) throw new Error(`Token mint failed: ${res.status}`)
  const { token } = await res.json()
  return token
}

async function mintStatisfyToken(userJwt: string): Promise<string> {
  const res = await fetch('https://api.statisfy.app/sdk/auth', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${userJwt}`,
      'X-Statisfy-Publishable-Key': 'pk_live_your_key',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ entity_type: 'portal', entity_id: 'your-portal-uuid' })
  })
  if (!res.ok) throw new Error(`Statisfy auth failed: ${res.status}`)
  const { token } = await res.json() // { token, token_type, expires_in, portal? }
  return token
}

import { StatisfyProvider } from '@statisfy/digital-workers-react'
import { useCallback } from 'react'

function Root() {
  // Return the current session token; re-mint when needed. Memoize so the
  // provider doesn't re-render its subtree on every render.
  const getToken = useCallback(async () => {
    return await getCachedOrFreshStatisfyToken() // your caching around the step-2 token source
  }, [])

  return (
    <StatisfyProvider
      baseUrl="https://api.statisfy.app"
      publishableKey="pk_live_your_key"
      getToken={getToken}
    >
      <YourApp />
    </StatisfyProvider>
  )
}

import { DigitalWorkerChat } from '@statisfy/digital-workers-react'

function SupportPanel() {
  return (
    <DigitalWorkerChat
      workerId="your-digital-worker-uuid"
      workerName="Onboarding Assistant"
      greeting="Hi! How can I help with your onboarding?"
      className="dw-h-[600px]"
    />
  )
}

import { ProjectModule } from '@statisfy/digital-workers-react'

// Omit projectId to auto-resolve the signed-in customer's onboarding project.
<ProjectModule />

:root {
  --dw-primary: #4f46e5;        /* accent / buttons */
  --dw-radius: 12px;            /* corner rounding */
  /* …see the rendered widget for the full set of --dw-* variables */
}