Quick Start

Add Haya to your website in under 5 minutes.

Step 1 — Create a project

Log in to your Haya dashboard, go to Projects → New Project, and enter your website name and domain.

After creating the project you'll receive your SDK Key — copy it, you'll need it in the next step.

Step 2 — Add the SDK

Choose your preferred installation method:

npm / yarn

npm install @haya/analytics

Then initialize in your app entry point:

import haya from '@haya/analytics';

haya.init('YOUR_SDK_KEY', {
  sessionReplay: true,
  heatmaps: true,
  autoTrack: {
    clicks: true,
    scrolls: true,
    pageviews: true,
  },
  maskInputs: true,
});

CDN (script tag)

Add this snippet before the closing </body> tag on every page you want to track:

<script src="https://cdn.usehaya.io/haya.min.js"></script>
<script>
  haya.init('YOUR_SDK_KEY', {
    sessionReplay: true,
    heatmaps: true,
    autoTrack: {
      clicks: true,
      scrolls: true,
      pageviews: true,
    },
    maskInputs: true,
  });
</script>

Replace YOUR_SDK_KEY with the key from your dashboard.

Step 3 — Verify it's working

Open your website in a browser, click around, scroll the page, then go to your Haya dashboard and open the project. Within a few seconds you should see:

• Events appearing in the Overview
• A session created under Sessions
• Click data building up under Heatmaps

That's it — Haya is tracking.

---

What's tracked by default

When you call haya.init() with the config above, the SDK automatically tracks:

• Clicks — every click on the page, with coordinates and target element
• Scrolls — scroll depth as a percentage of page height
• Pageviews — initial load and every client-side navigation (SPA-friendly)
• Form interactions — field focus/blur events (values are never captured)
• Session replay — DOM recording for the first 40 seconds of each session

:::info No secret required Your SDK key is a public identifier. Unlike some analytics providers, you do not need a secret key in your frontend code. See Security for details. :::