Installation

Haya SDK can be added to your project in two ways.

npm / yarn / pnpm

Best for projects using a bundler (Vite, webpack, Next.js, etc.).

npm install @haya/analytics
# or
yarn add @haya/analytics
# or
pnpm add @haya/analytics

Import and initialize:

import haya from '@haya/analytics';

haya.init('YOUR_SDK_KEY', { /* options */ });

The npm package ships three formats:

File	Format	Use case
dist/haya.esm.js	ES Module	Bundlers (Vite, webpack)
dist/haya.umd.js	UMD	Node.js / older bundlers
dist/haya.min.js	IIFE	Direct <script> tag
dist/index.d.ts	TypeScript	Type definitions

Your bundler will automatically pick the right format.

CDN

Best for plain HTML sites, WordPress, Webflow, or any site where you can add a <script> tag.

<script src="https://cdn.usehaya.io/haya.min.js"></script>

This exposes a global haya object. Call haya.init() after the script loads:

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

:::tip Script placement Place the <script> tags just before </body> so they don't block page rendering. The SDK is non-blocking and uses keepalive fetch requests so closing the tab doesn't lose data. :::

TypeScript support

Full TypeScript types are included. No @types package needed:

import haya, { HayaConfig } from '@haya/analytics';

const config: Partial<HayaConfig> = {
  sessionReplay: true,
  maskInputs: true,
};

haya.init('YOUR_SDK_KEY', config);

Content Security Policy (CSP)

If your site uses a strict CSP, add these directives:

connect-src 'self' https://api.usehaya.io;
script-src 'self' https://cdn.usehaya.io;

If you're self-hosting, replace api.usehaya.io and cdn.usehaya.io with your own domain.