> For the complete documentation index, see [llms.txt](https://docs.fuul.xyz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fuul.xyz/developer-guide/getting-started-with-fuul-web-sdk.md).

# SDK Setup & Installation

The Fuul Web SDK gives you access to all the functions needed to integrate Fuul into your website — tracking referrals, displaying leaderboards, managing affiliate codes, claiming rewards, and more.

{% hint style="info" %}
This guide assumes you have already created a Fuul account and generated an API key. See [API Key Management](/developer-guide/api-key-management.md) for details.
{% endhint %}

## 1. Install the SDK

```bash
npm install @fuul/sdk
```

```bash
# or using yarn
yarn add @fuul/sdk
```

## 2. Initialize

Before using any SDK method, initialize it with your API key at the root of your app:

```typescript
import { Fuul } from '@fuul/sdk';

Fuul.init({ apiKey: 'your-api-key' });
```

{% hint style="warning" %}
When using **Next.js App Router**, initialize the SDK in a client-rendered component (`'use client'`).
{% endhint %}

## Which API key should I use?

The API key you pass to `Fuul.init()` depends on what your app needs to do:

| Use case                                          | Key type              |
| ------------------------------------------------- | --------------------- |
| Display leaderboards, rewards, or user data       | `read-only`           |
| Track pageviews and wallet connections (frontend) | `send:tracking_event` |
| Send custom trigger events (backend only)         | `send:trigger_event`  |
| Manage audiences programmatically (backend only)  | `service_role`        |

{% hint style="info" %}
Most frontend integrations use the `send:tracking_event` key, which covers both reading data and sending tracking events.
{% endhint %}

## What's next?

After initializing the SDK, the typical integration steps are:

| Step                                         | Page                                                                             |
| -------------------------------------------- | -------------------------------------------------------------------------------- |
| Track referral visits and wallet connections | [Tracking Referrals](/developer-guide/tracking-referrals-in-your-app.md)         |
| Let users create affiliate links or codes    | [Affiliate Links & Codes](/developer-guide/creating-affiliate-links-or-codes.md) |
| Display leaderboard rankings                 | [Leaderboard Data](/developer-guide/getting-leaderboard-data.md)                 |
| Show individual user rewards                 | [Individual Rewards](/developer-guide/getting-individual-rewards.md)             |
| Build a claiming page for onchain rewards    | [Claiming Onchain Rewards](/developer-guide/claiming-onchain-rewards.md)         |

{% hint style="info" %}
For a high-level overview of which features require SDK integration, see [Build Your Incentives Hub](/developer-guide/build-your-incentives-hub.md).
{% endhint %}