@prosopo/client-bundle-example 2.10.24 → 2.11.0

package/src/plugins/layout-injector.ts

@@ -0,0 +1,238 @@
+// Copyright 2021-2026 Prosopo (UK) Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// Wraps every demo page in the playground shell: the prosopo.io header, a
+// sidebar that links between the demo pages, and a panel for the event log,
+// the code for the current setup and the sign-up call to action.
+import type { IndexHtmlTransformContext, Plugin } from "vite";
+import { prosopoWordmark } from "./logo.js";
+import {
+	type DemoPage,
+	type DemoSetup,
+	captchaTypeOptions,
+	defaultSetup,
+	findPageByPath,
+	labelOf,
+	modeOptions,
+	pagePathFromFilename,
+	relativePrefix,
+	renderingOptions,
+	renderingsFor,
+	resolvePage,
+} from "./pages.js";
+import { slotMarkup } from "./slots.js";
+
+export const SIGN_UP_URL = "https://prosopo.io/pricing/";
+const LOGIN_URL = "https://portal.prosopo.io/";
+const DOCS_URL = "https://docs.prosopo.io/";
+
+const ariaCurrent = (isCurrent: boolean): string =>
+	isCurrent ? ' aria-current="page"' : "";
+
+const headTags = (prefix: string): string => `
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap">
+    <link rel="stylesheet" href="${prefix}styles/demo.css">`;
+
+const header = `
+<header class="demo-header">
+	<a class="demo-header__logo" href="https://prosopo.io/">${prosopoWordmark}</a>
+	<nav class="demo-header__nav" aria-label="prosopo.io">
+		<a href="https://prosopo.io/products/">Platform</a>
+		<a href="${SIGN_UP_URL}">Pricing</a>
+		<a href="${DOCS_URL}">Docs</a>
+		<a href="https://prosopo.io/blog/">Blog</a>
+	</nav>
+	<div class="demo-header__actions">
+		<a class="demo-link-button demo-link-button--muted" href="${LOGIN_URL}">Login</a>
+		<a class="demo-link-button demo-link-button--primary" href="${SIGN_UP_URL}">Get started →</a>
+	</div>
+</header>`;
+
+const sidebar = (page: DemoPage | undefined, prefix: string): string => {
+	const setup: DemoSetup = page ?? defaultSetup;
+	const href = (target: DemoSetup): string =>
+		`${prefix}${resolvePage(target).path}`;
+
+	const choice = (
+		target: DemoSetup,
+		isCurrent: boolean,
+		name: string,
+		description: string,
+	): string => `
+		<a class="demo-choice" data-demo-nav href="${href(target)}"${ariaCurrent(isCurrent)}>
+			<span class="demo-choice__radio"></span>
+			<span class="demo-choice__body">
+				<span class="demo-choice__name">${name}</span>
+				<span class="demo-choice__description">${description}</span>
+			</span>
+		</a>`;
+
+	const types = captchaTypeOptions
+		.map(({ value, label, description }) =>
+			choice(
+				{ ...setup, captchaType: value },
+				page?.captchaType === value,
+				value === defaultSetup.captchaType
+					? `${label}<span class="demo-badge">Default</span>`
+					: label,
+				description,
+			),
+		)
+		.join("");
+
+	const modes = modeOptions
+		.map(
+			({ value, label }) =>
+				`<a data-demo-nav href="${href({ ...setup, mode: value })}"${ariaCurrent(page?.mode === value)}>${label}</a>`,
+		)
+		.join("");
+
+	const renderings = renderingsFor(setup.captchaType, setup.mode)
+		.map(({ value, label, description }) =>
+			choice(
+				{ ...setup, rendering: value },
+				page?.rendering === value,
+				label,
+				description,
+			),
+		)
+		.join("");
+
+	// Rendering is an integration detail, so it stays folded away unless the
+	// visitor is already on a non-default rendering.
+	const advancedOpen =
+		page && page.rendering !== defaultSetup.rendering ? " open" : "";
+
+	return `
+<aside class="demo-sidebar">
+	<div class="demo-intro-block">
+		<div class="demo-eyebrow">Live demo</div>
+		<h1 class="demo-title">Procaptcha playground</h1>
+		<p class="demo-intro">Pick a setup, fill in the form, see what happens.</p>
+	</div>
+	<nav class="demo-group" aria-label="Captcha type">
+		<div class="demo-group__label">Captcha type</div>
+		<div class="demo-types">${types}
+		</div>
+	</nav>
+	<div class="demo-group">
+		<div class="demo-group__label">Mode</div>
+		<nav class="demo-segmented" aria-label="Mode">${modes}</nav>
+	</div>
+	${slotMarkup("placement")}
+	<details class="demo-advanced"${advancedOpen}>
+		<summary>Advanced</summary>
+		<div class="demo-group">
+			<div class="demo-group__label">Rendering</div>
+			<p class="demo-group__hint">How the widget gets onto your page. Most sites use implicit.</p>
+			<nav class="demo-renderings" aria-label="Rendering">${renderings}
+			</nav>
+		</div>
+	</details>
+</aside>`;
+};
+
+const chips = (page: DemoPage | undefined): string =>
+	page
+		? [
+				labelOf(captchaTypeOptions, page.captchaType),
+				labelOf(modeOptions, page.mode),
+				...(page.rendering === defaultSetup.rendering
+					? []
+					: [labelOf(renderingOptions, page.rendering)]),
+			]
+				.map((label) => `<span class="demo-chip">${label}</span>`)
+				.join("")
+		: "";
+
+const layoutOpen = (page: DemoPage | undefined, prefix: string): string => `
+<div class="demo-layout">
+${sidebar(page, prefix)}
+<main class="demo-main">
+	<div class="demo-toolbar">${chips(page)}${slotMarkup("toolbar")}</div>
+`;
+
+// Pages outside the registry (web3, session id) have no snippet to show.
+const codeSection = (page: DemoPage | undefined): string =>
+	page
+		? `
+	<section class="demo-panel__section">
+		<h2 class="demo-panel__title">Code for this setup</h2>
+		${slotMarkup("code")}
+	</section>`
+		: "";
+
+const layoutClose = (page: DemoPage | undefined): string => `
+	<p class="demo-cta-line">Want this on your site? <a href="${SIGN_UP_URL}">Start free, no credit card →</a></p>
+</main>
+<aside class="demo-panel" aria-label="What happened">
+	<section class="demo-panel__section">
+		<h2 class="demo-panel__title">Events</h2>
+		${slotMarkup("events")}
+	</section>${codeSection(page)}
+	<div class="demo-panel__cta">
+		<h2>Get your own site key</h2>
+		<p>Free plan. No credit card required.</p>
+		<a class="demo-link-button demo-link-button--pink" href="${SIGN_UP_URL}">Get started →</a>
+	</div>
+</aside>
+</div>`;
+
+// Placement is a query parameter, so carry it across when moving between pages.
+const keepPlacementScript = `
+<script>
+	(function () {
+		var placement = new URLSearchParams(window.location.search).get("placement");
+		if (!placement) return;
+		var links = document.querySelectorAll("a[data-demo-nav]");
+		for (var i = 0; i < links.length; i++) {
+			var url = new URL(links[i].getAttribute("href"), window.location.href);
+			url.searchParams.set("placement", placement);
+			links[i].setAttribute("href", url.toString());
+		}
+	})();
+</script>`;
+
+export default function layoutInjector(): Plugin {
+	return {
+		name: "layout-injector",
+		transformIndexHtml: {
+			order: "pre",
+			handler(html: string, ctx: IndexHtmlTransformContext): string {
+				if (!html.includes("<body>") || !html.includes("</body>")) {
+					return html;
+				}
+
+				const pagePath = pagePathFromFilename(ctx.filename);
+				const page = findPageByPath(pagePath);
+				const prefix = relativePrefix(pagePath);
+
+				return html
+					.replace("<head>", () => `<head>${headTags(prefix)}`)
+					.replace(
+						"<body>",
+						() => `<body class="demo">${header}${layoutOpen(page, prefix)}`,
+					)
+					.replace(
+						"</body>",
+						() => `${layoutClose(page)}${keepPlacementScript}\n</body>`,
+					);
+			},
+		},
+	};
+}

package/src/plugins/logo.ts

@@ -0,0 +1,15 @@
+// Copyright 2021-2026 Prosopo (UK) Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+export const prosopoWordmark = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2062.63 468.67" role="img" aria-label="Prosopo"><g fill="currentColor" transform="translate(-215.73 -1774.69)"><path d="M335.55,1825.19A147.75,147.75,0,0,1,483.3,1972.94h50.5c0-109.49-88.76-198.25-198.25-198.25v50.5Z"/><path d="M269.36,1891.39A147.74,147.74,0,0,1,417.1,2039.13h50.5c0-109.49-88.75-198.24-198.24-198.24v50.5Z"/><path d="M414,2157.17a147.75,147.75,0,0,1-147.74-147.74h-50.5c0,109.49,88.75,198.24,198.24,198.24v-50.5Z"/><path d="M480.17,2091a147.74,147.74,0,0,1-147.74-147.75H281.92c0,109.49,88.76,198.25,198.25,198.25V2091Z"/><path d="M862.8,2017.5q-27.39,22.86-78.25,22.86h-65v112.19H654.82v-312h134q46.32,0,73.86,24.13t27.55,74.72Q890.2,1994.64,862.8,2017.5ZM813,1905.1q-12.37-10.36-34.7-10.38H719.59v91.87h58.75q22.32,0,34.7-11.22t12.39-35.56Q825.43,1915.48,813,1905.1Z"/><path d="M1045.69,1916.42c.78.08,2.51.19,5.19.32v61.81c-3.81-.42-7.2-.71-10.16-.85s-5.36-.21-7.2-.21q-36.4,0-48.89,23.71-7,13.33-7,41.06v110.29H916.89V1921.82h57.58V1962q14-23.07,24.34-31.54,16.94-14.18,44-14.18C1044,1916.32,1044.92,1916.35,1045.69,1916.42Z"/><path d="M1265.64,2124.32q-29.21,36.06-88.69,36.06t-88.69-36.06Q1059,2088.26,1059,2037.5q0-49.9,29.22-86.5t88.69-36.59q59.47,0,88.69,36.59t29.21,86.5Q1294.85,2088.26,1265.64,2124.32ZM1217.38,2091q14.17-18.81,14.18-53.48t-14.18-53.37q-14.19-18.7-40.64-18.71T1136,1984.13q-14.29,18.72-14.29,53.37T1136,2091q14.28,18.81,40.75,18.81T1217.38,2091Z"/><path d="M1371.81,2078.88q1.92,16.1,8.29,22.87,11.28,12.06,41.7,12.06,17.85,0,28.39-5.29t10.53-15.88a17.12,17.12,0,0,0-8.48-15.45q-8.49-5.28-63.12-18.2-39.33-9.73-55.41-24.35-16.08-14.39-16.09-41.49,0-32,25.14-54.93t70.75-23q43.26,0,70.53,17.25t31.29,59.59H1455q-1.27-11.64-6.58-18.42-10-12.27-34-12.28-19.74,0-28.13,6.14t-8.38,14.4c0,6.91,3,11.93,8.92,15q8.89,4.89,63,16.73,36,8.46,54.05,25.61,17.77,17.35,17.78,43.39,0,34.3-25.56,56t-79,21.7q-54.51,0-80.49-23t-26-58.53Z"/><path d="M1745.54,2124.32q-29.22,36.06-88.7,36.06t-88.69-36.06q-29.2-36.06-29.21-86.82,0-49.9,29.21-86.5t88.69-36.59q59.49,0,88.7,36.59t29.21,86.5Q1774.75,2088.26,1745.54,2124.32ZM1697.27,2091q14.19-18.81,14.19-53.48t-14.19-53.37q-14.18-18.7-40.64-18.71t-40.75,18.71q-14.28,18.72-14.28,53.37t14.28,53.48q14.3,18.81,40.75,18.81T1697.27,2091Z"/><path d="M1992.75,1946.59q28.24,29.84,28.23,87.63,0,61-27.58,92.93t-71.06,32q-27.69,0-46-13.76-10-7.62-19.6-22.23v120.24H1797V1921.82h57.79v34.08q9.79-15,20.88-23.71,20.23-15.43,48.15-15.45Q1964.53,1916.74,1992.75,1946.59Zm-46.3,43.39q-12.3-20.52-39.88-20.53-33.15,0-45.54,31.11-6.43,16.51-6.42,41.92,0,40.21,21.58,56.51,12.82,9.53,30.37,9.53,25.45,0,38.83-19.48t13.36-51.86Q1958.75,2010.51,1946.45,1990Z"/><path d="M2249.14,2124.32q-29.2,36.06-88.69,36.06t-88.69-36.06q-29.22-36.06-29.21-86.82,0-49.9,29.21-86.5t88.69-36.59q59.49,0,88.69,36.59t29.22,86.5Q2278.36,2088.26,2249.14,2124.32ZM2200.88,2091q14.19-18.81,14.18-53.48t-14.18-53.37q-14.18-18.7-40.64-18.71t-40.75,18.71q-14.28,18.72-14.29,53.37t14.29,53.48q14.3,18.81,40.75,18.81T2200.88,2091Z"/></g></svg>`;

package/src/plugins/pages.ts

@@ -0,0 +1,219 @@
+// Copyright 2021-2026 Prosopo (UK) Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { CaptchaType } from "@prosopo/types";
+
+export type DemoCaptchaType =
+	| CaptchaType.frictionless
+	| CaptchaType.pow
+	| CaptchaType.puzzle
+	| CaptchaType.image;
+
+export type DemoMode = "standard" | "invisible";
+
+export type DemoRendering = "implicit" | "explicit" | "manual" | "bound";
+
+export interface DemoSetup {
+	captchaType: DemoCaptchaType;
+	mode: DemoMode;
+	rendering: DemoRendering;
+}
+
+export interface DemoPage extends DemoSetup {
+	path: string;
+}
+
+export interface DemoOption<T> {
+	value: T;
+	label: string;
+}
+
+export interface CaptchaTypeOption extends DemoOption<DemoCaptchaType> {
+	description: string;
+}
+
+export const captchaTypeOptions: CaptchaTypeOption[] = [
+	{
+		value: CaptchaType.frictionless,
+		label: "Frictionless",
+		description: "Humans pass without a challenge. Bots get one.",
+	},
+	{
+		value: CaptchaType.pow,
+		label: "Proof of Work",
+		description: "The browser does a quick computation.",
+	},
+	{
+		value: CaptchaType.puzzle,
+		label: "Puzzle",
+		description: "Drag a piece into place.",
+	},
+	{
+		value: CaptchaType.image,
+		label: "Image",
+		description: "Pick the images that match.",
+	},
+];
+
+export const modeOptions: DemoOption<DemoMode>[] = [
+	{ value: "standard", label: "Standard" },
+	{ value: "invisible", label: "Invisible" },
+];
+
+export interface RenderingOption extends DemoOption<DemoRendering> {
+	description: string;
+}
+
+export const renderingOptions: RenderingOption[] = [
+	{
+		value: "implicit",
+		label: "Implicit",
+		description:
+			"Add a div with your site key and the script renders the widget.",
+	},
+	{
+		value: "explicit",
+		label: "Explicit",
+		description: "Your own code calls render() when it is ready.",
+	},
+	{
+		value: "manual",
+		label: "Manual start",
+		description:
+			"The widget shows straight away, but checks only start when you say.",
+	},
+	{
+		value: "bound",
+		label: "Bound button",
+		description: "Your own submit button opens the challenge.",
+	},
+];
+
+const page = (
+	path: string,
+	captchaType: DemoCaptchaType,
+	mode: DemoMode,
+	rendering: DemoRendering,
+): DemoPage => ({ path, captchaType, mode, rendering });
+
+const indexPage = page(
+	"index.html",
+	CaptchaType.frictionless,
+	"standard",
+	"implicit",
+);
+
+export const defaultSetup: DemoSetup = indexPage;
+
+export const demoPages: DemoPage[] = [
+	indexPage,
+	page(
+		"frictionless-explicit.html",
+		CaptchaType.frictionless,
+		"standard",
+		"explicit",
+	),
+	page(
+		"frictionless-manual-start.html",
+		CaptchaType.frictionless,
+		"standard",
+		"manual",
+	),
+	page(
+		"invisible-frictionless-implicit.html",
+		CaptchaType.frictionless,
+		"invisible",
+		"implicit",
+	),
+	page(
+		"invisible-frictionless-explicit.html",
+		CaptchaType.frictionless,
+		"invisible",
+		"explicit",
+	),
+	page("pow-implicit.html", CaptchaType.pow, "standard", "implicit"),
+	page("pow-explicit.html", CaptchaType.pow, "standard", "explicit"),
+	page("invisible-pow-implicit.html", CaptchaType.pow, "invisible", "implicit"),
+	page("invisible-pow-explicit.html", CaptchaType.pow, "invisible", "explicit"),
+	page("puzzle-implicit.html", CaptchaType.puzzle, "standard", "implicit"),
+	page("puzzle-explicit.html", CaptchaType.puzzle, "standard", "explicit"),
+	page("puzzle-bind-explicit.html", CaptchaType.puzzle, "standard", "bound"),
+	page(
+		"invisible-puzzle-implicit.html",
+		CaptchaType.puzzle,
+		"invisible",
+		"implicit",
+	),
+	page(
+		"invisible-puzzle-explicit.html",
+		CaptchaType.puzzle,
+		"invisible",
+		"explicit",
+	),
+	page("image-implicit.html", CaptchaType.image, "standard", "implicit"),
+	page("image-explicit.html", CaptchaType.image, "standard", "explicit"),
+	page(
+		"invisible-image-implicit.html",
+		CaptchaType.image,
+		"invisible",
+		"implicit",
+	),
+	page(
+		"invisible-image-explicit.html",
+		CaptchaType.image,
+		"invisible",
+		"explicit",
+	),
+];
+
+const isSetup = (candidate: DemoSetup, setup: DemoSetup): boolean =>
+	candidate.captchaType === setup.captchaType &&
+	candidate.mode === setup.mode &&
+	candidate.rendering === setup.rendering;
+
+export const findPageByPath = (path: string): DemoPage | undefined =>
+	demoPages.find((demoPage) => demoPage.path === path);
+
+// Not every combination has a page (there is no invisible manual start, for
+// example), so fall back to implicit rendering, then to the standard mode.
+export const resolvePage = (setup: DemoSetup): DemoPage =>
+	demoPages.find((demoPage) => isSetup(demoPage, setup)) ??
+	demoPages.find((demoPage) =>
+		isSetup(demoPage, { ...setup, rendering: "implicit" }),
+	) ??
+	demoPages.find((demoPage) =>
+		isSetup(demoPage, { ...setup, mode: "standard", rendering: "implicit" }),
+	) ??
+	indexPage;
+
+export const renderingsFor = (
+	captchaType: DemoCaptchaType,
+	mode: DemoMode,
+): RenderingOption[] =>
+	renderingOptions.filter(({ value }) =>
+		demoPages.some((demoPage) =>
+			isSetup(demoPage, { captchaType, mode, rendering: value }),
+		),
+	);
+
+export const labelOf = <T>(options: DemoOption<T>[], value: T): string =>
+	options.find((option) => option.value === value)?.label ?? String(value);
+
+export const pagePathFromFilename = (filename: string | undefined): string => {
+	const normalized = (filename ?? "").replace(/\\/g, "/");
+	return normalized.match(/^(?:.*\/)?(?:src|dist)\/(.+)$/)?.[1] ?? "";
+};
+
+export const relativePrefix = (pagePath: string): string =>
+	"../".repeat((pagePath.match(/\//g) ?? []).length);

package/src/plugins/placement-injector.ts

@@ -11,6 +11,7 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
+
 // Vite plugin to inject a popup/float placement switcher into HTML files.
 //
 // Placement is resolved once, when the widget renders, so switching it means
@@ -20,57 +21,17 @@
 // script of their own, so the injected script stamps `data-placement` onto
 // their containers instead, which exercises the attribute path.
 import type { IndexHtmlTransformContext, Plugin } from "vite";
+import { fillSlot } from "./slots.js";
 
 export default function placementInjector(): Plugin {
-	const placementCss = `
-	<style>
-		.placement-switcher {
-			margin: 20px 0;
-			padding: 12px 15px;
-			background-color: #f0f8ff;
-			border: 2px solid #2196F3;
-			border-radius: 5px;
-			font-family: monospace;
-			font-size: 14px;
-		}
-		.placement-switcher-title {
-			font-weight: bold;
-			margin-bottom: 10px;
-			border-bottom: 1px solid #2196F3;
-			padding-bottom: 5px;
-		}
-		.placement-option {
-			display: inline-block;
-			text-decoration: none;
-			margin-right: 8px;
-			padding: 6px 14px;
-			border: 1px solid #2196F3;
-			border-radius: 4px;
-			background-color: white;
-			color: #2196F3;
-			cursor: pointer;
-			font-family: inherit;
-			font-size: inherit;
-		}
-		.placement-option[aria-current="page"] {
-			background-color: #2196F3;
-			color: white;
-			font-weight: bold;
-		}
-		.placement-note {
-			margin-top: 10px;
-			color: #555;
-		}
-	</style>
-  `;
-
 	const placementHtml = `
-	<!-- Challenge placement switcher -->
-	<div id="placement-switcher" class="placement-switcher">
-		<div class="placement-switcher-title">Challenge placement</div>
-		<a class="placement-option" data-placement-option="popup" href="?placement=popup">popup</a>
-		<a class="placement-option" data-placement-option="float" href="?placement=float">float</a>
-		<div id="placement-note" class="placement-note"></div>
+	<div id="placement-switcher" class="demo-group">
+		<div class="demo-group__label">Challenge placement</div>
+		<nav class="demo-segmented" aria-label="Challenge placement">
+			<a data-placement-option="popup" href="?placement=popup">Popup</a>
+			<a data-placement-option="float" href="?placement=float">Float</a>
+		</nav>
+		<p id="placement-note" class="demo-placement-note"></p>
 	</div>
   `;
 
@@ -96,10 +57,10 @@ export default function placementInjector(): Plugin {
 			var note = document.getElementById("placement-note");
 			if (note) {
 				note.textContent = placement === "float" && invisible
-					? "float requested, but an invisible widget has nothing to anchor to, so the challenge opens as a popup."
+					? "An invisible widget has nothing to anchor to, so the challenge opens as a popup."
 					: placement === "float"
-						? "The challenge opens directly above the widget and stays pinned there while you scroll. The page stays usable behind it."
-						: "The challenge opens centred over the page. This is the default.";
+						? "The challenge opens next to the widget and stays pinned while you scroll."
+						: "The challenge opens in the middle of the page.";
 			}
 
 			// Links rather than buttons, and not only because navigation is what
@@ -124,7 +85,7 @@ export default function placementInjector(): Plugin {
 	return {
 		name: "placement-injector",
 		transformIndexHtml: {
-			order: "post", // after the nav bar and status log are in place
+			order: "post",
 			handler(html: string, _ctx: IndexHtmlTransformContext): string {
 				if (!html.includes("<body") || !html.includes("</body>")) {
 					return html;
@@ -134,19 +95,19 @@ export default function placementInjector(): Plugin {
 					return html;
 				}
 
-				const withCss = html.replace("</head>", `${placementCss}</head>`);
-
-				// The switcher goes above the status log so the widget and its
-				// controls stay together, and the script goes last so every
-				// element it touches has been parsed.
-				const withSwitcher = withCss.includes('<div id="captcha-status"')
-					? withCss.replace(
-							'<div id="captcha-status"',
-							`${placementHtml}<div id="captcha-status"`,
-						)
-					: withCss.replace("</body>", `${placementHtml}</body>`);
+				// Without the layout, the switcher goes above the status log so the
+				// widget and its controls stay together.
+				const withSwitcher =
+					fillSlot(html, "placement", placementHtml) ??
+					(html.includes('<div id="captcha-status"')
+						? html.replace(
+								'<div id="captcha-status"',
+								() => `${placementHtml}<div id="captcha-status"`,
+							)
+						: html.replace("</body>", () => `${placementHtml}</body>`));
 
-				return withSwitcher.replace("</body>", `${placementJs}</body>`);
+				// The script goes last so every element it touches has been parsed.
+				return withSwitcher.replace("</body>", () => `${placementJs}</body>`);
 			},
 		},
 	};

package/src/plugins/slots.ts

@@ -0,0 +1,32 @@
+// Copyright 2021-2026 Prosopo (UK) Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// The layout plugin leaves empty placeholders that the other plugins fill, so
+// each plugin still works on its own when the layout is not there.
+
+export type DemoSlot = "placement" | "toolbar" | "events" | "code";
+
+export const slotMarkup = (slot: DemoSlot): string =>
+	`<div data-demo-slot="${slot}"></div>`;
+
+export const fillSlot = (
+	html: string,
+	slot: DemoSlot,
+	content: string,
+): string | undefined => {
+	const marker = slotMarkup(slot);
+	return html.includes(marker)
+		? html.replace(marker, () => content)
+		: undefined;
+};