> ## 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 via CDN.

## Overview

You can integrate Adrop Web SDK via CDN script without build tools. Suitable for static websites or simple HTML pages.

### Supported Ad Formats

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

### Requirements

* Modern browsers (Chrome, Firefox, Safari, Edge)

***

## Installation

Add the script to the `<head>` section of your HTML document.

```html theme={null}
<script src="https://cdn.jsdelivr.net/npm/@adrop/ads-web-sdk@latest/dist/adrop-ads.min.js"></script>
```

<Note>
  To lock to a specific version, specify the version number instead of `@latest`.
  Example: `@adrop/ads-web-sdk@1.0.1`
</Note>

***

## Initialization

Initialize the SDK after the script loads.

```html theme={null}
<script>
  const adrop = Adrop.observe({
    appId: 'YOUR_APP_ID',
    debug: true  // true only in development
  });
</script>
```

### 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()`.

```javascript theme={null}
const adrop = Adrop.instance();
// Use SDK
```

### Dynamic Configuration Updates

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

```javascript theme={null}
// Using setters
Adrop.instance().uid = 'USER_ID';
Adrop.instance().appKey = 'YOUR_APP_KEY';

// Or using setConfig
Adrop.instance().setConfig({
  uid: 'USER_ID',
  appKey: 'YOUR_APP_KEY'
});
```

<Note>
  For targeted ads to work properly, set `uid` before rendering 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/cdn-banner">
    Implement banner ads
  </Card>

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

  <Card title="Targeting" href="/sdk/web/cdn-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>
