Skip to main content
Fully automated. The CLI creates a LucentInit.astro component and wires it into your main layout.

​
Install with the CLI

npx @lucenthq/cli init luc_pk_...
Pick Astro when prompted.

​
Manual setup

1

Environment variable

.env:
PUBLIC_LUCENT_PUBLIC_KEY=luc_pk_...
2

LucentInit component

src/components/LucentInit.astro:
<script>
  import { LucentTracker } from "@lucenthq/sdk";

  const tracker = new LucentTracker({
    publicKey: import.meta.env.PUBLIC_LUCENT_PUBLIC_KEY,
  });
  tracker.start();
</script>
3

Render it from your main layout

src/layouts/Layout.astro:
---
import LucentInit from "../components/LucentInit.astro";
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <slot />
    <LucentInit />
  </body>
</html>

​
Notes

  • Astro runs <script> tags in .astro components on the client by default, which is exactly what the recorder needs.
  • The PUBLIC_ prefix is required by Astro to expose an env var to client scripts. Without it, import.meta.env.PUBLIC_LUCENT_PUBLIC_KEY will be undefined in the browser.
  • If you use multiple layouts, include <LucentInit /> in the one your tracked pages extend — or put it in a shared base layout.