# 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](https://docs.fuul.xyz/developer-guide/api-key-management) 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](https://docs.fuul.xyz/developer-guide/tracking-referrals-in-your-app)         |
| Let users create affiliate links or codes    | [Affiliate Links & Codes](https://docs.fuul.xyz/developer-guide/creating-affiliate-links-or-codes) |
| Display leaderboard rankings                 | [Leaderboard Data](https://docs.fuul.xyz/developer-guide/getting-leaderboard-data)                 |
| Show individual user rewards                 | [Individual Rewards](https://docs.fuul.xyz/developer-guide/getting-individual-rewards)             |
| Build a claiming page for onchain rewards    | [Claiming Onchain Rewards](https://docs.fuul.xyz/developer-guide/claiming-onchain-rewards)         |

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.fuul.xyz/developer-guide/getting-started-with-fuul-web-sdk.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.