Test Iframe

Embed playground — pick an environment to mount its iframe

// ───────────────────────────────────────────────────────────── const ENVS = [ { key: "yori", label: "Yori", src: "https://yori.thumpn.dev/embed.js", eventId: "evt-YQNCWN", token: "DdYeSKJ_n6rzcPcvKRRYzHYkqzw1T1nrDC9A_73RX3M", }, { key: "curtains", label: "Curtains", src: "", // e.g. https://curtains.thumpn.dev/embed.js eventId: "", token: "", }, { key: "preprod", label: "Preprod", src: "", // e.g. https://preprod.thumpn.com/embed.js eventId: "", token: "", }, { key: "prod", label: "Prod", src: "", // e.g. https://thumpn.com/embed.js eventId: "", token: "", }, ]; const isConfigured = (e) => Boolean(e.src && e.eventId && e.token); const tabsEl = document.getElementById("tabs"); const mountEl = document.getElementById("mount"); const metaEl = document.getElementById("meta"); function mount(env) { // Tear down whatever was mounted (iframe + any injected script). mountEl.innerHTML = ""; if (!isConfigured(env)) { metaEl.innerHTML = ""; const empty = document.createElement("div"); empty.className = "empty"; empty.innerHTML = "

No embed configured for " + env.label + " yet

" + "

Add this env's src, eventId, and " + "token to the ENVS config in this page.

"; mountEl.appendChild(empty); return; } metaEl.innerHTML = "" + env.label + " · " + env.src + " · event " + env.eventId + ""; // Re-inject the embed script fresh so embed.js mounts its iframe // into this container (same pattern the demo pages use). const s = document.createElement("script"); s.src = env.src; s.setAttribute("data-event-id", env.eventId); s.setAttribute("data-embed-token", env.token); s.defer = true; mountEl.appendChild(s); } function selectTab(key) { const env = ENVS.find((e) => e.key === key) || ENVS[0]; [...tabsEl.children].forEach((btn) => { btn.setAttribute("aria-selected", String(btn.dataset.key === env.key)); }); mount(env); } // Build the tab bar. ENVS.forEach((env, i) => { const btn = document.createElement("button"); btn.className = "tab"; btn.setAttribute("role", "tab"); btn.dataset.key = env.key; btn.dataset.configured = String(isConfigured(env)); btn.setAttribute("aria-selected", String(i === 0)); btn.innerHTML = env.label + ''; btn.addEventListener("click", () => selectTab(env.key)); tabsEl.appendChild(btn); }); // Mount the first env on load. selectTab(ENVS[0].key);