# Typescript Web SDK

The Adhese TypeScript SDK simplifies ad integration across web environments by handling the underlying request and response logic, allowing you to implement ad placements without dealing with low-level API calls.

At the same time, the SDK remains flexible: it allows you to plug in custom logic where needed, giving you full control for more advanced or tailored integrations.


The [getting started guide](https://adhese.github.io/sdk_typescript/) walks you through:

- Installing the SDK
- Initialising a client
- Making ad requests
- Rendering ad responses

<p class="callout info">The full documentation can be found on [https://adhese.github.io/sdk\_typescript/](https://adhese.github.io/sdk_typescript/)</p>

### Integration options

The SDK supports multiple integration approaches, depending on your environment:

#### NPM 

Install the SDK via NPM and integrate it into modern JavaScript or TypeScript projects.

#### React

Use the SDK within React applications to manage ad slots and lifecycle in a component-based way.

#### Standalone JS script

Include the SDK as a standalone script for simple integrations without a build step. Ideal for quick setups or environments where bundling is not available.

<p class="callout info">The standalone script could be hosted and maintained by the Adhese team. Contact support if you wish to discuss this option in more detail. </p>

### Key Features

#### **Slot Management**

Slots are the fundamental units for ad placement. The SDK supports three slot registration methods:

- **Automatic DOM detection** - scan for elements with `adunit` class
- **Pre-initialization slots** - declare slots before page load for early ad fetching
- **Manual registration** - dynamically add slots via API

Additional slot capabilities include:

- Device-specific format selection (responsive ads via media queries)
- Lazy loading with viewport detection
- Dual render modes (iframe or inline)
- Custom setup hooks for advanced control

##### **Configuration &amp; Parameters**

At initialization, you can set:

- Account ID (required)
- Targeting parameters (2-character prefixes matching your adserver configuration)
- URL and referrer logging preferences
- Lazy loading settings
- Device type detection rules (customizable media queries)

##### **Event System**

Subscribe to lifecycle events:

- Slot lifecycle (add, remove, dispose)
- Request/response events
- Consent &amp; parameter changes
- Debug mode toggles
- Impressions &amp; viewable tracking

##### **Consent Management**

Supports regulatory compliance via:

- Binary consent (yes/no)
- TCF API v2 integration

##### **React Integration**

Dedicated React SDK provides:

- `AdheseProvider` context wrapper
- `useAdhese` hook for instance access
- `useAdheseSlot` hook for slot creation
- `AdheseSlot` component with JSX rendering support
- Placeholder support during ad loading

### SDK Repository

The SDK is actively maintained on GitHub and publicly available: [https://github.com/adhese/sdk\_typescript](https://github.com/adhese/sdk_typescript)