> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tappd.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Tappd Web SDK: JavaScript Analytics and Messaging SDK

> A lightweight JavaScript library for tracking behavior, managing sessions, delivering in-app messages, and sending web push notifications.

The Tappd Web SDK gives you everything you need to understand your users and communicate with them — directly inside your web application. Drop it into any JavaScript project to start capturing events, managing sessions, displaying in-app messages, and sending push notifications, all without compromising on performance or flexibility.

## Key features

<CardGroup cols={2}>
  <Card title="Automatic Session Management" icon="rotate" href="/web-sdk/sessions">
    Uses a hybrid browser and time-based approach to track sessions accurately across page reloads and tab switches.
  </Card>

  <Card title="Anonymous User Tracking" icon="user-secret" href="/web-sdk/anonymous-tracking">
    Tracks users before they identify themselves, then automatically merges anonymous data when they log in.
  </Card>

  <Card title="Auto Page View Tracking" icon="eye" href="/web-sdk/getting-started">
    Records every page visit out of the box, including navigation in single-page applications via the History API.
  </Card>

  <Card title="Manual Event Tracking" icon="bullseye" href="/web-sdk/api-reference">
    Send custom events with any properties you choose — purchases, clicks, signups, and more.
  </Card>

  <Card title="In-App Messages" icon="comment" href="/web-sdk/in-app-messages">
    Display banners, popups, and modals built in the Tappd dashboard, triggered automatically or on demand.
  </Card>

  <Card title="Web Push Notifications" icon="bell" href="/web-sdk/push-notifications">
    Reach users with browser-level push notifications even when they're not actively on your site.
  </Card>

  <Card title="Auto-Capture" icon="magnet" href="/web-sdk/configuration">
    Optionally capture every link click and form submission without writing a single tracking call.
  </Card>

  <Card title="UTM & Duration Tracking" icon="chart-line" href="/web-sdk/getting-started">
    Automatically extracts UTM parameters from URLs and records how long users spend on each page.
  </Card>
</CardGroup>

## Supported frameworks

The Web SDK works with any JavaScript environment. You don't need a specific framework — if it runs JavaScript, it works with Tappd.

| Framework          | Supported |
| ------------------ | --------- |
| React              | ✅         |
| Vue.js             | ✅         |
| Next.js            | ✅         |
| Nuxt.js            | ✅         |
| Angular            | ✅         |
| Vanilla JavaScript | ✅         |
| Any JS framework   | ✅         |

## Install the SDK

Choose the installation method that fits your project. Use the CDN option for a fast proof-of-concept or simple sites; use NPM for production applications with a build step.

<CodeGroup>
  ```html CDN theme={null}
  <script src="https://cdn.gotappd.com/web-sdk/v1/tappd-sdk.min.js"></script>
  <script>
    const tappd = new TappdSDK.TappdSDK({
      appId: 'YOUR_APP_ID',
      apiUrl: 'https://sdk.gotappd.com/api/v1/sdk'
    });
  </script>
  ```

  ```bash NPM theme={null}
  npm install @tappd/web-sdk
  ```

  ```javascript ES Module (NPM) theme={null}
  import { TappdSDK } from '@tappd/web-sdk';

  const tappd = new TappdSDK({
    appId: 'YOUR_APP_ID',
    apiUrl: 'https://sdk.gotappd.com/api/v1/sdk'
  });
  ```

  ```javascript CommonJS (NPM) theme={null}
  const { TappdSDK } = require('@tappd/web-sdk');

  const tappd = new TappdSDK({
    appId: 'YOUR_APP_ID',
    apiUrl: 'https://sdk.gotappd.com/api/v1/sdk'
  });
  ```
</CodeGroup>

## Next steps

<CardGroup cols={3}>
  <Card title="Quickstart" icon="rocket" href="/web-sdk/getting-started">
    Follow the step-by-step guide to go from zero to tracking in minutes.
  </Card>

  <Card title="Configuration" icon="sliders" href="/web-sdk/configuration">
    Explore every configuration option and tune the SDK to your needs.
  </Card>

  <Card title="API Reference" icon="code" href="/web-sdk/api-reference">
    Browse the full method documentation for the Web SDK.
  </Card>
</CardGroup>