फ़ुल-स्क्रीन एम्बेडिंग
iframe का उपयोग करके Configurator को अपनी वेबसाइट पर कहीं भी एम्बेड करें।
महत्वपूर्ण: मौजूदा एम्बेड रनटाइम के लिए postMessage हैंडशेक और कम अवधि वाला एम्बेड सेशन टोकन आवश्यक है। टोकन आपका बैकएंड Alter Product Public API से बनाता है और वह होस्ट के ओरिजिन से बँधा होता है।
प्रक्रिया:
- आपका पृष्ठ Configurator URL वाला iframe लोड करता है।
- iframe
ALTER_CHILD_HELLOभेजता है और आपका पृष्ठ उसी nonce के साथALTER_PARENT_ACKका जवाब देता है। - iframe
ALTER_TOOL_INIT_SESSIONऔरpayload.tool=configuratorसे ऐक्सेस माँगता है। - आपका बैकएंड एम्बेड सेशन टोकन बनाता है और आपका पृष्ठ
tokenके साथALTER_TOOL_SESSION_READYभेजता है।
<!DOCTYPE html>
<html>
<head>
<title>Alter Product - Full Screen Embed</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
iframe { width: 100%; height: 100%; border: 0; display: block; }
#wrapper { width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="wrapper">
<iframe
id="alter-iframe"
title="Alter Product Tool"
src="https://alterproduct.com/app/configurator/1"
allowfullscreen
></iframe>
</div>
<script>
const IFRAME_ORIGIN = "https://alterproduct.com";
const TOOL = "configurator";
const DESIGN_ID = 1;
const iframe = document.getElementById("alter-iframe");
// Keep nonce per handshake (from iframe) to prevent random messages from being accepted.
let handshakeNonce = "";
let handshakeOk = false;
function postToIframe(payload) {
iframe.contentWindow.postMessage(payload, IFRAME_ORIGIN);
}
/**
* Your backend owns this endpoint. It should call:
* POST https://alterproduct.com/public-api/v1/embed/session
* using server-side Alter Product API credentials.
*/
async function createEmbedSessionFromYourBackend(payload) {
const res = await fetch("/api/alter/embed-session", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload || {})
});
if (!res.ok) throw new Error("Failed to create embed session");
const data = await res.json();
// Expected response: { token: "..." }
if (!data || !data.token) throw new Error("Missing token");
return data.token;
}
window.addEventListener("message", async (event) => {
// ✅ 1) Always validate origin
if (event.origin !== IFRAME_ORIGIN) return;
// ✅ 2) Always validate source
if (event.source !== iframe.contentWindow) return;
const msg = event.data || {};
// -----------------------
// A) HANDSHAKE
// iframe -> parent: ALTER_CHILD_HELLO { nonce }
// parent -> iframe: ALTER_PARENT_ACK { nonce }
// -----------------------
if (msg.type === "ALTER_CHILD_HELLO") {
if (!msg.nonce || typeof msg.nonce !== "string") return;
handshakeNonce = msg.nonce;
handshakeOk = true;
postToIframe({ type: "ALTER_PARENT_ACK", nonce: handshakeNonce });
return;
}
// Ignore everything until handshake is done
if (!handshakeOk) return;
// -----------------------
// B) TOKEN REQUEST (on-demand)
// iframe -> parent: ALTER_TOOL_INIT_SESSION
// payload: { tool, mode, uiDesignId }
//
// parent -> iframe: ALTER_TOOL_SESSION_READY
// { token }
// -----------------------
if (msg.type === "ALTER_TOOL_INIT_SESSION") {
try {
const payload = msg.payload || {};
const tool = String(payload.tool || TOOL).toLowerCase();
const designId = Number(payload.uiDesignId || DESIGN_ID);
const token = await createEmbedSessionFromYourBackend({
tool,
designId,
origin: window.location.origin
});
postToIframe({
type: "ALTER_TOOL_SESSION_READY",
token
});
} catch (e) {
postToIframe({
type: "ALTER_TOOL_SESSION_ERROR",
message: String(e && e.message ? e.message : e)
});
}
return;
}
// -----------------------
// C) OPTIONAL: listen to tool events (examples)
// -----------------------
if (msg.type === "ALTER_CONFIGURATOR_ADD_TO_CART") {
console.log("[Alter] Add to cart:", msg.payload);
return;
}
});
</script>
</body>
</html>