Static iframe carousel

Local Ad Ring

A tiny static ad widget for related sites. Host these files with Caddy, edit sites.json, and embed embed.html wherever you want the rotation to appear.

Formats

Open example site

Card

360 x 210

Horizontal

728 x 90

Vertical

180 x 360

Compact

300 x 80

Default Embed

<iframe
  src="https://friends.example.com/embed.html?site=your-site.example&theme=auto&variant=card"
  width="360"
  height="210"
  style="border:0;overflow:hidden"
  loading="lazy"></iframe>

The widget reads the embedding page from document.referrer and does not show ads for that same hostname. Add ?site=example.com to the iframe URL if you want to pass the current site explicitly. Add theme=dark, theme=light, or theme=auto to control the iframe theme. Add variant=card, variant=horizontal, variant=vertical, or variant=compact to fit different placements. Every variant includes a small dismiss button inside the iframe. Outbound clicks include UTM tags: utm_source is the embedding site, and utm_content is the friend site.

More Embeds

<iframe
  src="https://friends.example.com/embed.html?site=your-site.example&theme=auto&variant=horizontal"
  width="728"
  height="90"
  style="border:0;overflow:hidden"
  loading="lazy"></iframe>

<iframe
  src="https://friends.example.com/embed.html?site=your-site.example&theme=auto&variant=vertical"
  width="180"
  height="360"
  style="border:0;overflow:hidden"
  loading="lazy"></iframe>

<iframe
  src="https://friends.example.com/embed.html?site=your-site.example&theme=auto&variant=compact"
  width="300"
  height="80"
  style="border:0;overflow:hidden"
  loading="lazy"></iframe>

sites.json

The whole network is configured in sites.json. Each object is one promoted site. Add, remove, or reorder entries there. 

{
  "name": "WikiParty",
  "url": "https://wikiparty.org/",
  "hosts": ["wikiparty.org", "www.wikiparty.org"],
  "tagline": "The ultimate wiki race...",
  "image": "https://wikiparty.org/favicon.ico",
  "accent": "#3b6ea8"
}

name

Shown as the title in the carousel card.

url

Destination URL. Clicks open this in a new tab with UTM tags added.

hosts

Domains that count as the same site. Used to avoid advertising a site on itself.

tagline

Short description below the title. Keep it compact so it fits small embeds.

image

Logo or cover image. Can be a local file like assets/geohints.svg or a URL.

accent

Per-site hex color used for the button, border tint, image tile, and card glow.

Embed Params

site
Optional current site domain, for example ?site=wikiparty.org. More reliable than referrer detection.
theme
auto, light, or dark. Use this to match the host page.
variant
card, horizontal, vertical, or compact. layout also works as an alias.

UTM Clicks

Outbound links automatically receive:

  • utm_source: embedding site
  • utm_medium: friends_carousel
  • utm_campaign: friends_of_<site>
  • utm_content: clicked friend site

Caddy Deploy

Yes, this is ready to put on a server. It is static HTML, CSS, JS, JSON, and assets. Put the folder behind Caddy and point your site root at it. 

friends.example.com {
  root * /var/www/local-ad-ring
  file_server
}

Then embed https://friends.example.com/embed.html?site=your-site.example&theme=auto from each participating site.