[{"data":1,"prerenderedAt":87},["ShallowReactive",2],{"doc:\u002Fdocs\u002Fsdks\u002Fsvelte":3},{"page":4,"toc":78,"updated":86},{"path":5,"title":6,"seoTitle":7,"description":8,"blocks":9},"\u002Fdocs\u002Fsdks\u002Fsvelte","Svelte","Svelte SDK: Runes-based Identification","Identify visitors in Svelte 5 and SvelteKit. Context-based setup, one shared identification per component tree, and reactive getters.",[10,13,18,23,26,39,42,48,50,53,58,61,63,66,71,73,76],{"type":11,"text":12},"p","`@fingerly\u002Fsvelte` exposes the [JavaScript SDK](\u002Fdocs\u002Fsdks\u002Fjavascript) through Svelte 5 runes. State lives in component context, so SvelteKit gets one identification per request tree rather than a shared module singleton.",{"type":14,"level":15,"text":16,"id":17},"heading",2,"Requirements","requirements",{"type":19,"items":20},"list",[21,22],"Svelte 5. The package ships `.svelte.js` modules that your Svelte build compiles.","A [public key](\u002Fdocs\u002Fapi-keys) with your site in its allowed origins.",{"type":14,"level":15,"text":24,"id":25},"Install","install",{"type":27,"samples":28},"code",[29,33,36],{"label":30,"lang":31,"code":32},"npm","bash","npm install @fingerly\u002Fsvelte",{"label":34,"lang":31,"code":35},"pnpm","pnpm add @fingerly\u002Fsvelte",{"label":37,"lang":31,"code":38},"yarn","yarn add @fingerly\u002Fsvelte",{"type":14,"level":15,"text":40,"id":41},"Set up the context","set-up-the-context",{"type":27,"samples":43},[44],{"label":45,"lang":46,"code":47},"src\u002Froutes\u002F+layout.svelte","svelte","\u003Cscript lang=\"ts\">\n  import { setupFingerly } from '@fingerly\u002Fsvelte'\n\n  let { children } = $props()\n  setupFingerly({ apiKey: 'fly_pk_us_production_…' })\n\u003C\u002Fscript>\n\n{@render children()}",{"type":11,"text":49},"Call `setupFingerly` during component initialisation, in a `\u003Cscript>` block, not in an event handler or an `$effect`.",{"type":14,"level":15,"text":51,"id":52},"Identify on an action","identify-on-an-action",{"type":27,"samples":54},[55],{"label":56,"lang":46,"code":57},"Checkout.svelte","\u003Cscript lang=\"ts\">\n  import { useIdentify } from '@fingerly\u002Fsvelte'\n\n  let { orderId } = $props()\n  const fingerly = useIdentify({ tag: () => 'checkout:' + orderId })\n\n  async function submit() {\n    const { requestId } = await fingerly.identify()\n    await submitOrder({ orderId, requestId })\n  }\n\u003C\u002Fscript>\n\n\u003Cbutton onclick={submit} disabled={fingerly.isLoading}>\n  {fingerly.isLoading ? 'Checking…' : 'Pay now'}\n\u003C\u002Fbutton>\n{#if fingerly.error}\u003Cp>{fingerly.error.message}\u003C\u002Fp>{\u002Fif}",{"type":14,"level":15,"text":59,"id":60},"useIdentify","useidentify",{"type":11,"text":62},"Accepts `immediate` (identify inside an `$effect`) and `tag` (a string or a getter). Returns reactive getters for the [shared state](\u002Fdocs\u002Fsdks\u002Freact#useidentify) plus `identify`, `refresh` and `client`.",{"type":14,"level":15,"text":64,"id":65},"useVerdict","useverdict",{"type":27,"samples":67},[68],{"label":69,"lang":46,"code":70},"Notice.svelte","\u003Cscript lang=\"ts\">\n  import { useVerdict } from '@fingerly\u002Fsvelte'\n  const tor = useVerdict('tor', { min: 'high' })\n\u003C\u002Fscript>\n\n{#if tor.matched}\u003Cp>This session arrives through Tor.\u003C\u002Fp>{\u002Fif}",{"type":11,"text":72},"The name and `min` accept values or getters, so they follow changing props. Verdict names are `incognito`, `shields`, `tor`, `emulator`, `automation` and `farm`.",{"type":14,"level":15,"text":74,"id":75},"Server rendering","server-rendering",{"type":11,"text":77},"`immediate` uses `$effect`, which does not run on the server. Calling `identify()` directly during server rendering rejects with `FingerlyServerError`.",[79,80,81,82,83,84,85],{"id":17,"text":16,"level":15},{"id":25,"text":24,"level":15},{"id":41,"text":40,"level":15},{"id":52,"text":51,"level":15},{"id":60,"text":59,"level":15},{"id":65,"text":64,"level":15},{"id":75,"text":74,"level":15},"2026-09-17T08:28:36.000Z",1789667797804]