Install with npm

npm install @usertick/snippet

yarn add @usertick/snippet

pnpm add @usertick/snippet

bun add @usertick/snippet

// App.tsx: initialize once on mount
import { useEffect } from "react";
import Usertick from "@usertick/snippet";

export default function App() {
  useEffect(() => {
    Usertick.init({ site_id: "YOUR_SITE_ID" });
    return () => Usertick.destroy();
  }, []);

  return <main>{/* your app */}</main>;
}

// app/usertick.tsx: a client component rendered once in app/layout.tsx
"use client";
import { useEffect } from "react";
import Usertick from "@usertick/snippet";

export function UsertickInit() {
  useEffect(() => {
    Usertick.init({ site_id: "YOUR_SITE_ID" });
    return () => Usertick.destroy();
  }, []);
  return null;
}

// main.ts: initialize once at app start
import { createApp } from "vue";
import App from "./App.vue";
import Usertick from "@usertick/snippet";

Usertick.init({ site_id: "YOUR_SITE_ID" });
createApp(App).mount("#app");

// plugins/usertick.client.ts: the .client suffix runs it only in the browser
import Usertick from "@usertick/snippet";

export default defineNuxtPlugin(() => {
  Usertick.init({ site_id: "YOUR_SITE_ID" });
});

// app.component.ts: initialize once in the root component
import { Component, OnInit } from "@angular/core";
import Usertick from "@usertick/snippet";

@Component({ selector: "app-root", templateUrl: "./app.component.html" })
export class AppComponent implements OnInit {
  ngOnInit() {
    Usertick.init({ site_id: "YOUR_SITE_ID" });
  }
}

<!-- src/routes/+layout.svelte: add this script block to the root layout -->
<script>
  import { onMount } from "svelte";
  import Usertick from "@usertick/snippet";

  onMount(() => {
    Usertick.init({ site_id: "YOUR_SITE_ID" });
    return () => Usertick.destroy();
  });
</script>

<!-- src/layouts/Layout.astro: add this script to the layout every page uses -->
<script>
  import Usertick from "@usertick/snippet";

  Usertick.init({ site_id: "YOUR_SITE_ID" });
</script>

// app/root.tsx: add the effect to the root component
import { useEffect } from "react";
import { Outlet } from "@remix-run/react";
import Usertick from "@usertick/snippet";

export default function App() {
  useEffect(() => {
    Usertick.init({ site_id: "YOUR_SITE_ID" });
    return () => Usertick.destroy();
  }, []);

  return <Outlet />;
}

// gatsby-browser.js in the project root
import Usertick from "@usertick/snippet";

export const onClientEntry = () => {
  Usertick.init({ site_id: "YOUR_SITE_ID" });
};