Documentation

Visly SDK

Zero-dependency, privacy-friendly analytics. Drop a single script tag into your website to start tracking pageviews, clicks, and custom events instantly. No npm install required.

Getting Started

Add the Visly script to the <head> of your website. That's it. It will automatically initialize and start tracking pageviews.

index.html

<script 
  defer 
  src="https://oyoxrtpspyfxsndrdzvm.supabase.co/storage/v1/object/public/visly%20script/visly-v1.js"
  data-project-id="YOUR_PROJECT_ID"
></script>

💡

Performance Tip: The script is loaded asynchronously with defer, so it won't block your page load or affect your Core Web Vitals.

Configuration

Configure Visly by adding data- attributes directly to the script tag.

Attribute	Type	Default	Description
data-project-id	string	—	Required. Your unique project identifier.
data-endpoint	string	(default)	Custom ingestion endpoint (if self-hosting).
data-debug	boolean	false	Enable verbose console logging for development.
data-capture-text	boolean	false	If true, captures the inner text of clicked elements.

Auto-Tracking (No-Code)

Visly can automatically track clicks on specific elements without writing any JavaScript. Just add the data-va attribute to any HTML element.

Example

HTML

<button data-va="signup_btn">
  Get Started
</button>

<a href="/pricing" data-va="nav_pricing">Pricing</a>

Manual Tracking

Once the script loads, it exposes a global window.visly object. Use this to track custom events or identify users.

Track Custom Events

app.js

// Track a simple event
window.visly.track("purchase_completed");

// Track with custom properties
window.visly.track("add_to_cart", {
  item_id: "sku_123",
  price: 49.99,
  currency: "USD"
});

Identify Users

Link anonymous sessions to a specific user ID when they log in.

app.js

// Call this after successful login
window.visly.identify("user_555");

Framework Guides

Next.js (App Router)

Add the script in your root layout. Using the native <script> tag inside <head> is often simplest for external scripts.

app/layout.tsx

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <script 
          defer 
          src="https://oyoxrtpspyfxsndrdzvm.supabase.co/storage/v1/object/public/visly%20script/visly-v1.js" 
          data-project-id="YOUR_PROJECT_ID"
        ></script>
      </head>
      <body>
        {children}
      </body>
    </html>
  )
}

React (SPA)

Simply add the script tag to your public/index.html file.

public/index.html

<head>
  <script 
    defer 
    src="https://oyoxrtpspyfxsndrdzvm.supabase.co/storage/v1/object/public/visly%20script/visly-v1.js"
    data-project-id="YOUR_PROJECT_ID">
  </script>
</head>

TypeScript Support

If you are using TypeScript, add this type definition to your global.d.ts or types.d.ts to avoid window errors.

global.d.ts

export {};

declare global {
  interface Window {
    visly: {
      track: (name: string, props?: Record<string, any>) => void;
      identify: (id: string) => void;
    };
  }
}

API Reference

window.visly.track(name, props?)

Parameter	Type	Required	Description
`name`	string	Yes	The name of the event (e.g., 'click', 'signup').
`props`	object	No	A flat JSON object with additional metadata.

window.visly.identify(userId)

Parameter	Type	Required	Description
`userId`	string	Yes	The unique ID of the user from your database.

Built by Nikhil Sai Ankilla

Full Stack Developer • Open for SDE roles.

Twitter LinkedIn Portfolio