# AdTogether Web SDK — LLM Integration Reference
**Version:** 0.1.26
**Package:** `@adtogether/web-sdk`
**Distribution:** NPM (for React/Next.js) or CDN script tag (for plain HTML)
**Targets:** Websites, SPAs, SSR frameworks (React, Next.js, Vue, HTML)
### Option A: NPM Installation (React / Next.js)
```bash
npm install @adtogether/web-sdk
```
### Initialization
```typescript
import { AdTogether } from '@adtogether/web-sdk';
// Call once at app startup. In Next.js, guard against SSR:
if (typeof window !== 'undefined') {
AdTogether.initialize({ appId: 'YOUR_APP_ID' });
}
```
**`AdTogether.initialize()` accepts:**
```typescript
interface AdTogetherOptions {
appId?: string; // Your registered app ID (preferred)
apiKey?: string; // Alternative name for appId
baseUrl?: string; // Override API base URL (optional)
bundleId?: string; // Explicit site identifier (optional, auto-detected from window.location.hostname)
allowSelfAds?: boolean; // Show own ads as fallback (default: true)
}
```
**Auto-detected metadata:** The SDK automatically detects `bundleId` from `window.location.hostname`. Impression/click tracking payloads include `platform: "web"` and `environment: "development"|"production"` (based on `NODE_ENV`).
### React Components
**Import path:** `@adtogether/web-sdk/react`
```tsx
"use client"; // Required for Next.js App Router
import { useState } from 'react';
import { AdTogether } from '@adtogether/web-sdk';
import { AdTogetherBanner, AdTogetherInterstitial } from '@adtogether/web-sdk/react';
if (typeof window !== 'undefined') {
AdTogether.initialize({ appId: 'YOUR_APP_ID' });
}
export default function MyComponent() {
const [showAd, setShowAd] = useState(false);
return (
{/* Banner Ad */}
console.log('Ad loaded!')}
onAdClosed={() => console.log('User closed the ad')}
/>
{/* Interstitial Ad */}
setShowAd(false)}
onAdLoaded={() => console.log('Interstitial loaded')}
/>