Svelte - Lucent

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

Environment variable

.env:

PUBLIC_LUCENT_PUBLIC_KEY=luc_pk_...

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;
}

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

Environment variable

.env:

VITE_LUCENT_PUBLIC_KEY=luc_pk_...

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;
}

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.

​Install with the CLI

​SvelteKit

​Plain Svelte

​Notes

Install with the CLI

SvelteKit

Plain Svelte

Notes