@adviverse/react

React components for Adviverse ad slots. One import — no dangerouslySetInnerHTML, no document.currentScript workarounds, no manual script loading.

npm i @adviverse/react

Quick start

import { AdSlot } from '@adviverse/react';

export function Sidebar() {
  return <AdSlot tag="tk_80f77ad8d23bdbd927" sizes="300x600" style={{ width: 300, height: 600 }} />;
}

Size the slot with style/className (or pass sizes) — the ad matches the box. That's the whole integration. The SDK loads once, lazily; slots tear down on unmount.

Next.js (App Router)

Refill slots on client-side navigation with <AdRefresh>:

'use client';
import { usePathname } from 'next/navigation';
import { AdRefresh } from '@adviverse/react';

// render once in app/layout.tsx
export function Ads() { return <AdRefresh routeKey={usePathname()} />; }

API

| Export | Purpose | | --- | --- | | <AdSlot tag sizes? style? /> | A single ad slot. sizes: "300x250", a list "160x600,300x600", or "fluid". | | <AdRefresh routeKey /> | Refill slots when routeKey changes (SPA route change). Idempotent. | | <AdScript endpoint? /> | Load the SDK once, explicitly (optional — AdSlot loads it lazily). | | loadSdk(endpoint?) | Promise that resolves when the SDK is ready. |

Content Security Policy

If you run a CSP, allow the Adviverse hosts:

script-src  https://serve.adviverse.com
img-src     https://cdn.adviverse.com https://serve.adviverse.com data:
connect-src https://serve.adviverse.com

Versioning

By default the components load the pinned /sdk/v1.js, so a breaking SDK change can never silently alter your integration — the package major tracks the SDK major (@adviverse/react@2 → v2). Escape hatches:

<AdSlot tag="tk_…" version="v2" />                 // canary a newer line
<AdSlot tag="tk_…" src="https://serve.adviverse.com/sdk/1.2.3.js" />  // exact pin / self-host
<AdScript version="" />                            // unversioned latest

loadSdk() also accepts { endpoint, version, src } (the string form loadSdk("https://…") still works).

Debugging

Add ?adviverse_debug=1 to the URL (or set window.ADVIVERSE_DEBUG = true) to console-log each request, the resolved size, and any no-fill reason. Use the reserved tag tk_test to render a labeled test ad that always fills — verify your integration before a campaign is live.