@adland/embed

Framework-free <adland-slot> web component for embedding AdLand ad slots on any site — no React required.

Copy & paste

<script src="https://cdn.adland.space/v1/adland.js" async></script>

<adland-slot slot="0xYourSlotAddress"></adland-slot>

That renders a polished ad card in a sandboxed iframe (render-mode="isolated", the safe default). Nothing else to configure.

For Farcaster Mini Apps, use the Mini App bundle instead — same element, Farcaster click routing:

<script src="https://cdn.adland.space/v1/adland-farcaster.js" async></script>

Attributes

| Attribute | Description | | --------------- | ------------------------------------------------------------------ | | slot | Slot contract address (required unless data-ad is set) | | chain | Chain id (default 8453) | | render-mode | isolated (default, sandboxed iframe) or inline (shadow DOM) | | placement | Label sent with events (e.g. sidebar) | | gateway | IPFS gateway origin | | endpoint | Analytics API base URL | | consent | pending | granted | denied (gates the beacon) | | rpc-url | Read RPC override | | base-link-url | Base URL for the empty-slot CTA | | data-ad | Inline ad JSON to render without an on-chain read |

Styling

Three levels, pick what you need:

1. Nothing — the default card looks good out of the box.

2. Quick theming — set --adland-* custom properties on the element. These apply in both render modes (they're copied into the isolated iframe):

   <adland-slot
     slot="0x…"
     style="--adland-bg:#111;--adland-fg:#fff;--adland-radius:16px"
   ></adland-slot>

3. Deep control — use render-mode="inline" and style the exposed parts:

   adland-slot::part(card) { border: 2px solid hotpink; }
   adland-slot::part(title) { font-family: "Georgia"; }

   Parts: card, media, body, title, description, badge, label.

React users wanting full control should use the compound components in @adland/react instead.

Programmatic use

import { registerAdlandSlot, WebActionAdapter } from "@adland/embed";
// Auto-registered with the web adapter on import; call again to customize.
registerAdlandSlot(WebActionAdapter);