📦 Installation

Detailed installation guides for different frameworks and platforms.

📝 Script Tag (Universal)

The simplest way to add Sypnia to any website. Add this to your <head>:

<script src="https://sypnia.com/api/sdk/sk_your_api_key"></script>

Replace sk_your_api_key with your project's API key from the Settings page.

▲ Next.js

For Next.js App Router (13+), use the Script component:

app/layout.tsx

import Script from 'next/script';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <Script
          src="https://sypnia.com/api/sdk/sk_your_api_key"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

For Pages Router:

pages/_app.tsx

import Script from 'next/script';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Script
        src="https://sypnia.com/api/sdk/sk_your_api_key"
        strategy="afterInteractive"
      />
      <Component {...pageProps} />
    </>
  );
}

⚛️ React (Vite, CRA)

Add the script to your index.html:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My React App</title>
    
    <!-- Sypnia Analytics -->
    <script src="https://sypnia.com/api/sdk/sk_your_api_key"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

🟢 Vue / Nuxt

For Nuxt 3, add to your config:

nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://sypnia.com/api/sdk/sk_your_api_key',
          async: true
        }
      ]
    }
  }
})

For Vue 3 with Vite, add to index.html:

index.html

<head>
  <script src="https://sypnia.com/api/sdk/sk_your_api_key"></script>
</head>

🅰️ Angular

Add to your src/index.html:

src/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyAngularApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!-- Sypnia Analytics -->
  <script src="https://sypnia.com/api/sdk/sk_your_api_key"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

🔥 SvelteKit

Add to your src/app.html:

src/app.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    %sveltekit.head%
    
    <!-- Sypnia Analytics -->
    <script src="https://sypnia.com/api/sdk/sk_your_api_key"></script>
  </head>
  <body>
    <div>%sveltekit.body%</div>
  </body>
</html>

📰 WordPress

Add to your theme's functions.php:

functions.php

function add_sypnia_analytics() {
  echo '<script src="https://sypnia.com/api/sdk/sk_your_api_key"></script>';
}
add_action('wp_head', 'add_sypnia_analytics');

Or use a plugin like "Insert Headers and Footers" to add the script without editing code.

✅ Verify Installation

After adding the script, open your browser's Developer Tools (F12) and check:

Console Tab

Look for the Sypnia initialization message:

🔮 Sypnia SDK Loaded

Network Tab

Look for requests to /api/track with status 200

Dashboard

Check your Sypnia dashboard for incoming events

Quick Start Event Tracking