Skip to main content
Fully automated for both SvelteKit and plain Svelte.

​
Install with the CLI

npx @lucenthq/cli init luc_pk_...
Pick Svelte / SvelteKit when prompted, then choose your setup.

​
SvelteKit

1

Environment variable

.env:
PUBLIC_LUCENT_PUBLIC_KEY=luc_pk_...
2

Init module

src/lib/lucent.ts:
import { LucentTracker } from "@lucenthq/sdk";
import { PUBLIC_LUCENT_PUBLIC_KEY } from "$env/static/public";

let tracker: LucentTracker | null = null;

export function initLucent() {
  if (!tracker) {
    tracker = new LucentTracker({
      publicKey: PUBLIC_LUCENT_PUBLIC_KEY,
    });
    tracker.start();
  }
  return tracker;
}
3

Call initLucent in the root layout

src/routes/+layout.svelte:
<script>
  import { onMount } from "svelte";
  import { initLucent } from "$lib/lucent";

  onMount(() => initLucent());
</script>

<slot />

​
Plain Svelte

1

Environment variable

.env:
VITE_LUCENT_PUBLIC_KEY=luc_pk_...
2

Init module

src/lib/lucent.ts:
import { LucentTracker } from "@lucenthq/sdk";

let tracker: LucentTracker | null = null;

export function initLucent() {
  if (!tracker) {
    tracker = new LucentTracker({
      publicKey: import.meta.env.VITE_LUCENT_PUBLIC_KEY,
    });
    tracker.start();
  }
  return tracker;
}
3

Call initLucent in your root component

src/App.svelte:
<script>
  import { onMount } from "svelte";
  import { initLucent } from "./lib/lucent";

  onMount(() => initLucent());
</script>

​
Notes

  • SvelteKit uses $env/static/public for publicly‑accessible env vars that need the PUBLIC_ prefix. Plain Svelte uses the Vite VITE_ prefix.
  • onMount ensures the tracker only initializes in the browser — the init module is safe to import during SSR, but calling initLucent() at the module top level would crash on the server.