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

# Getting Started

> Learn how to integrate Adrop Web SDK into your React project.

## Overview

Integrate Adrop Web SDK into your React project to display banner ads and native ads.

### Supported Ad Formats

* Banner Ads
* Native Ads (with custom UI support)

### Requirements

* React 16.8 or higher
* Node.js 14 or higher

***

## Installation

Install the SDK using NPM or Yarn.

<CodeGroup>
  ```bash npm theme={null}
  npm install @adrop/ads-web-sdk
  ```

  ```bash yarn theme={null}
  yarn add @adrop/ads-web-sdk
  ```
</CodeGroup>

***

## Initialization

Initialize the SDK at your app's entry point (`main.tsx` or `index.tsx`). The SDK works as a singleton, so you only need to initialize it once.

```tsx title="main.tsx" theme={null}
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Adrop } from '@adrop/ads-web-sdk';
import App from './App';

// Initialize SDK before rendering the app
Adrop.observe({
  appId: 'YOUR_APP_ID',
  debug: import.meta.env.DEV  // true only in development
});

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

### Initialization Options (AdropConfig)

<ParamField body="appId" type="string" required>
  App ID issued from Ad Control Console
</ParamField>

<ParamField body="uid" type="string">
  User identifier (used for targeting)
</ParamField>

<ParamField body="appKey" type="string">
  API authentication key (required for updating user properties)
</ParamField>

<ParamField body="debug" type="boolean" default={false}>
  Enable debug logging
</ParamField>

<ParamField body="backfillMode" type="'responsive' | 'fixed'" default="responsive">
  Publisher-wide backfill rendering mode. Per-slot overrides take precedence. See the [Backfill Rendering Mode](/sdk/web/backfill) guide for details. (SDK 1.2.3+)
</ParamField>

<Warning>
  Set `debug: false` in production environments.
</Warning>

### Instance Access

After initialization, you can access the SDK from anywhere using `Adrop.instance()`.

```tsx theme={null}
import { Adrop } from '@adrop/ads-web-sdk';

function MyComponent() {
  const handleClick = () => {
    const adrop = Adrop.instance();
    // Use SDK
  };

  return <button onClick={handleClick}>Load Ad</button>;
}
```

### Dynamic Configuration Updates

You can change settings at runtime, such as setting a user ID after login.

```tsx theme={null}
// Using setConfig
Adrop.instance().setConfig({
  uid: 'USER_ID',
  appKey: 'YOUR_APP_KEY'
});
```

<Note>
  For targeted ads to work properly, set `uid` before entering the ad placement.
</Note>

***

## WebView Setup (For Backfill Ads)

If your web app runs in a WebView and you want to display backfill ads, you need to configure the native app. See the platform-specific guides below.

<CardGroup cols={2}>
  <Card title="Android Setup" icon="android" href="/sdk/android/webview">
    Android WebView setup guide
  </Card>

  <Card title="iOS Setup" icon="apple" href="/sdk/ios/webview">
    iOS WebView setup guide
  </Card>
</CardGroup>

***

## Table of Contents

<CardGroup cols={2}>
  <Card title="Banner Ads" href="/sdk/web/banner">
    Implement banner ads
  </Card>

  <Card title="Native Ads" href="/sdk/web/native">
    Implement native ads
  </Card>

  <Card title="Targeting" href="/sdk/web/targeting">
    Audience/Contextual targeting
  </Card>

  <Card title="Reference" href="/sdk/web/reference">
    Classes, interfaces, constants
  </Card>

  <Card title="Examples" href="/sdk/web/examples">
    React, CDN example code
  </Card>
</CardGroup>