The embed

One script tag, ~3 KB gzipped, no dependencies, no cookies. It reserves its space before loading (zero layout shift), blends into the host theme — including live dark-mode toggles — and quietly shows a fallback if anything is down.

Drop-in

Put a placeholder where the ad should render (you can have several per page), then load the script once:

<div data-devmatei-ad data-tier="text"></div>

<script async src="https://ads.devmatei.com/embed/ad.js"></script>

Single-slot shortcut — the widget renders right where the script tag sits:

<script async src="https://ads.devmatei.com/embed/ad.js" data-tier="banner"></script>

Options

All options are data attributes on the placeholder (or on the script tag as defaults):

Attribute	Values	Default	What it does
data-tier	text \| banner	text	Which tier this slot shows.
data-max-width	any CSS width	380px text · 728px banner	Maximum width of the widget.
data-align	left \| center \| right	center	Horizontal placement inside the container.
data-theme	auto \| light \| dark	auto	auto samples the host page's colors (and tracks live theme switches); light/dark force a preset.
data-radius	any CSS radius	10px	Corner rounding of the card.
data-fallback-text	text	built-in copy	Shown (as a link) when no ad is active or the API is unreachable. Set to an empty string to hide the widget instead.
data-fallback-url	URL	https://ads.devmatei.com	Where the fallback card links — e.g. your “buy this slot” page or Ko-fi.

A fallback that earns its keep

When a tier has no active ads (or the ad server is unreachable), the slot renders your fallback text as a link instead of breaking or collapsing:

<div data-devmatei-ad data-tier="banner"
     data-fallback-text="This slot is free — advertise here, or buy me a coffee."
     data-fallback-url="https://ko-fi.com/yourname"></div>

Behavior guarantees

— Space is reserved before any network request — no layout shift, ever.

— Impressions count only after the ad is actually ≥50% visible.

— Theme colors are re-derived live when the host toggles class/data-theme or the OS scheme changes.

— Any failure (offline, blocked, server down) renders the fallback silently — no console noise.

— Exactly two requests per shown ad: one fetch, one beacon. No cookies, no storage, no fingerprinting.