Five ways to put kiosk content on another website, from simplest to most flexible. Each section explains what it does, when to use it, the copy-paste markup, and a live demo (the demos only render once you point this file at a real kiosk host).
What it does: shows one random image, and the link goes to that exact image in the kiosk.
Use this when you want the picture someone clicks to open the same picture in the kiosk. This is the only method that guarantees the shown image and the link match.
How: embed.js finds each
<a class="bh-kiosk">, fetches a random image from
random.php?json=1, then fills in both the
<img> and the link
(index.html?img=<that image>). Requires
embed.js and random.php on the kiosk server.
<a class="bh-kiosk"><img alt="Berkeley Heights historic photo" style="max-width:300px"></a>
<script src="https://dronefone.com/bhslideshow/embed.js" async></script>What it does: the same widget as Method 1, but
every <a class="bh-kiosk"> on the page gets its own random
image and its own matching link.
Use this for a little "gallery" of random images, each linking to
its own picture in the kiosk. You still only include
embed.js once.
<a class="bh-kiosk"><img alt="Historic photo" style="max-width:200px"></a>
<a class="bh-kiosk"><img alt="Historic photo" style="max-width:200px"></a>
<a class="bh-kiosk"><img alt="Historic photo" style="max-width:200px"></a>
<!-- Include the widget script once, anywhere on the page -->
<script src="https://dronefone.com/bhslideshow/embed.js" async></script>What it does: random.php used
directly as an image source 302-redirects to a random image file. Wrap it in
a link to send visitors to the kiosk.
Use this when you can't run JavaScript (e.g. a restrictive CMS or email-like context).
Trade-off: the shown image and the link do not match — the image request and the click are independent, so the link can only go to the kiosk's intro, not to that specific picture. Matching them requires the JS widget (Method 1); a shared cookie can't be relied on because browsers block third-party cookies.
<a href="https://dronefone.com/bhslideshow/index.html">
<img src="https://dronefone.com/bhslideshow/random.php" alt="Berkeley Heights historic photo" style="max-width:300px">
</a>What it does: you call
random.php?json=1 yourself and lay out the result however you
like. The endpoint returns:
{ id, image_url, link_url, title }.
Use this when you want full control — for example, to show the
image with its title as a caption, or to fit it into your own card
design. This is essentially what embed.js does internally, but
you own the HTML.
<div id="my-kiosk-card"></div>
<script>
const KIOSK_BASE = "https://dronefone.com/bhslideshow/";
fetch(KIOSK_BASE + "random.php?json=1", { cache: "no-store" })
.then(r => r.json())
.then(data => {
// data = { id, image_url, link_url, title }
document.getElementById("my-kiosk-card").innerHTML =
`<a href="${data.link_url}">
<img src="${data.image_url}" alt="${data.title || 'Historic photo'}" style="max-width:300px">
<div>${data.title || ''}</div>
</a>`;
});
</script>What it does: links straight to one particular image you choose (not random). The kiosk shows its intro, then jumps to that image and keeps cycling from there.
Use this when you already know which image you want to feature —
e.g. "see this photo in our history kiosk." Combine with your own
<img> if you host a copy of the picture, or just use a text
link.
Two forms: by catalog ID (?img=BH_003) or by
position number, 1-based (?n=12).
<!-- By catalog ID -->
<a href="https://dronefone.com/bhslideshow/index.html?img=BH_003">See photo BH_003 in the history kiosk</a>
<!-- By position number (1-based) -->
<a href="https://dronefone.com/bhslideshow/index.html?n=12">See image #12 in the history kiosk</a>What it does: drops the entire, fully interactive kiosk (intro, slideshow, details, contribute form) inside a box on your page.
Use this when you want the complete experience embedded, not just a single teaser image. Give it plenty of room; it's designed to fill a screen.
Needs no random.php or embed.js — it
just loads index.html. Only works if the kiosk server allows
being framed (i.e. does not send X-Frame-Options: DENY or a
restrictive Content-Security-Policy frame-ancestors).
<iframe src="https://dronefone.com/bhslideshow/index.html"
title="Berkeley Heights History Kiosk"
style="width:100%; height:600px; border:0;"
loading="lazy"></iframe>