Skip to main content
Version: Svelte SDK

Svelte SDK

npm versionLicense: MITminzipped sizedownloads

CI environments

Deactivate the Screeb SDK during CI execution to avoid creating anonymous users and exceeding your MTU limit.

Prerequisites​

  • Node.js 14 or later
  • Svelte 4.0 or later

Add Screeb as a dependency​

npm install @screeb/sdk-svelte --save
# or
yarn add @screeb/sdk-svelte

Setup — provide Screeb in your root component​

Call setScreebContext once in the top-level component that wraps the rest of your app.

<!-- App.svelte -->
<script lang="ts">
  import { setScreebContext } from "@screeb/sdk-svelte";
  import YourApp from "./YourApp.svelte";

  setScreebContext({
    websiteId: "<YOUR-CHANNEL-ID>",
    autoInit: true,
    userId: "<USER-ID>",
    userProperties: {
      firstname: "<user-firstname>",
      plan: "<user-plan>",
      last_seen_at: new Date(),
      authenticated: true,
    },
  });
</script>

<YourApp />
tip

You can find your channel id in your workspace settings.

Avoid anonymous users

If your user is already authenticated when the app loads, pass userId directly in the provider config. This prevents Screeb from creating an anonymous visitor before identifying them.

Use the useScreeb context helper​

Access all Screeb methods via useScreeb() in any component:

<script lang="ts">
  import { useScreeb } from "@screeb/sdk-svelte";

  const { eventTrack } = useScreeb();
</script>

<button on:click={() => eventTrack("button-clicked")}>
  Track event
</button>

SDK lifecycle​

const { close } = useScreeb();

// Disable the Screeb SDK
await close();

Identify after login​

If your app boots before the user is authenticated, initialize Screeb with autoInit: true, then identify the user after login:

<!-- App.svelte -->
<script lang="ts">
  import { setScreebContext } from "@screeb/sdk-svelte";

  setScreebContext({
    websiteId: "<YOUR-CHANNEL-ID>",
    shouldLoad: true,
    autoInit: true,
  });
</script>
<script lang="ts">
  import { useScreeb } from "@screeb/sdk-svelte";

  const { identity } = useScreeb();

  async function onUserLogin(userId: string) {
    await identity(userId, { plan: "pro" });
  }
</script>

CI environments​

Prevent Screeb from loading in test or CI environments:

<script lang="ts">
  import { setScreebContext } from "@screeb/sdk-svelte";

  setScreebContext({
    websiteId: "<YOUR-CHANNEL-ID>",
    shouldLoad: import.meta.env.PROD,
    autoInit: true,
  });
</script>

Example app​

See the example-svelte for a complete working integration.