SvelteKit

import type { LayoutServerLoad } from './$types'

export const load: LayoutServerLoad = ({ locals }) => ({
  user: locals.user
    ? { id: String(locals.user.id), email: locals.user.email, name: locals.user.name }
    : null
})

<script lang="ts">
  import { onMount } from 'svelte'
  import { Ticketping } from '@ticketping/chat-widget/svelte'

  let { data, children } = $props()

  // The adapter is browser-only. Rendering it during SSR throws effect_orphan (a 500 on every page).
  let mounted = $state(false)
  onMount(() => {
    mounted = true
  })

  async function getToken() {
    const res = await fetch('/api/ticketping-token', { method: 'POST' })
    if (!res.ok) throw new Error(`Ticketping token request failed (${res.status})`)
    return res.text()
  }
</script>

{#if mounted}
  <Ticketping publishableKey="pk_..." user={data.user} {getToken} />
{/if}

{@render children()}

import { env } from '$env/dynamic/private'
import { SignJWT } from 'jose'
import type { RequestHandler } from './$types'

export const POST: RequestHandler = async ({ locals }) => {
  const user = locals.user
  if (!user) return new Response('Unauthorized', { status: 401 })

  const profile: Record<string, string> = {}
  if (user.email) profile.email = user.email
  if (user.name) profile.name = user.name

  const token = await new SignJWT(profile)
    .setProtectedHeader({ alg: 'HS256' })
    .setSubject(String(user.id))
    .setExpirationTime('5m')
    .sign(new TextEncoder().encode(env.TICKETPING_IDENTITY_SECRET))

  return new Response(token, { headers: { 'Content-Type': 'text/plain' } })
}

import { PUBLIC_API_URL } from '$env/static/public'

async function getToken() {
  const res = await fetch(`${PUBLIC_API_URL}/api/ticketping-token/`, {
    method: 'POST',
    // Send whatever your API already accepts, for example `Token <key>` or `Bearer <jwt>`.
    headers: { Authorization: `Token ${apiToken}` }
  })
  if (!res.ok) throw new Error(`Ticketping token request failed (${res.status})`)
  return res.text()
}

TICKETPING_IDENTITY_SECRET=tpis_...

import { createTicketping } from '@ticketping/chat-widget/svelte'

// Safe to create during SSR: nothing touches the page until <Ticketping> mounts.
export const ticketping = createTicketping()

<Ticketping client={ticketping} publishableKey="pk_..." user={data.user} {getToken} />

<script lang="ts">
  import { ticketping } from '$lib/ticketping'
</script>

<button onclick={() => ticketping.showNewMessage('Question about order 1234')}>Contact support</button>

<!-- +layout.svelte -->
<Ticketping client={ticketping} publishableKey="pk_..." user={data.user} {getToken}>
  {@render children()}
</Ticketping>

<script lang="ts">
  import { useTicketping } from '@ticketping/chat-widget/svelte'

  const ticketping = useTicketping()
</script>

<button onclick={() => ticketping.toggle()}>
  Help {#if ticketping.unreadCount}({ticketping.unreadCount}){/if}
</button>

Add the Ticketping chat widget (v2) to this SvelteKit app (Svelte 5).

Docs index: https://ticketping.com/llms.txt
This page as Markdown: https://ticketping.com/docs/svelte.md

1. Install the exact beta: @ticketping/chat-widget@2.0.0-beta.12 (no ^, not @next) and jose.
   If package.json has svelte older than 5.57.1, upgrade it first (the adapter is compiled with 5.57;
   older versions fail vite build with "only_child" is not exported).
2. In src/routes/+layout.server.ts, return user: { id: String(id), email, name } for the signed-in user from
   locals (or this app's existing session code), or null.
3. In src/routes/+layout.svelte, render
   <Ticketping publishableKey="pk_..." user={data.user} {getToken} /> from '@ticketping/chat-widget/svelte'
   before {@render children()}, inside {#if mounted} where mounted is set to true in onMount.
   Do not drop the guard: the adapter is browser-only and SSR returns 500 (effect_orphan) without it.
   getToken POSTs to /api/ticketping-token and returns res.text(); throw if !res.ok. Never cache the token.
   Ask me for the publishable key (starts with pk_). It's public.
4. Create src/routes/api/ticketping-token/+server.ts exactly as on the docs page, adapting only the user lookup:
   401 when signed out, otherwise a text/plain JWT from jose,
   new SignJWT({ email, name }).setProtectedHeader({ alg: 'HS256' }).setSubject(String(user.id)).setExpirationTime('5m'),
   signed with the TICKETPING_IDENTITY_SECRET from $env/dynamic/private.
   If this app's API is a separate backend (another origin, token auth), skip this route: sign the token in that
   backend instead and point getToken at it, as in "If your API runs on another origin" on the docs page.
5. Add TICKETPING_IDENTITY_SECRET= to .env (not committed). Never import it from $env/static/public or $env/dynamic/public.
6. Run the production build and load a few pages with the preview server; they must return 200.
7. Tell me how to verify: sign in on localhost, fetch a token from the console, and paste it into the
   token validator at Settings → API → Identity secret.