Framework Integration

Using Adventory in React, Next.js, Vue, and more.

HTML Snippet Approach

The script tags work in any framework that supports raw HTML. In React and Next.js, use dangerouslySetInnerHTML or inject the script in a useEffect. In Vue, use a v-html directive or mount the script in onMounted.

// React / Next.js example
import { useEffect, useRef } from "react";

function AdBanner({ placementId }: { placementId: string }) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://adventory.to/ad.banner.js";
    script.dataset.placement = placementId;
    ref.current?.appendChild(script);
    return () => { script.remove(); };
  }, [placementId]);

  return <div ref={ref} />;
}

Dedicated Components