Studio

1{
2  "mockup_type": "psd",
3  "session_kind": "customize",
4  "mockup_uuid": "c315f78f-d2c7-4541-b240-a9372842de94",
5  "allowed_origin": "https://shop.example.com",
6  "product_id": "gid://shopify/Product/123456",
7  "variant_id": "gid://shopify/ProductVariant/789",
8  "action_id": "add-to-cart",
9  "config": {
10    "theme": "dark",
11    "accentColor": "#3366FF",
12    "psdPrimaryActionLabel": "Add to cart"
13  }
14}

1{
2  "mockup_type": "2d",
3  "session_kind": "customize",
4  "mockup_uuid": "c315f78f-d2c7-4541-b240-a9372842de94",
5  "allowed_origin": "https://shop.example.com",
6  "product_id": "SKU-1234",
7  "variant_id": "SKU-1234-BLACK-M",
8  "action_id": "add-to-cart",
9  "config": {
10    "theme": "dark",
11    "accentColor": "#3366FF",
12    "twoDCustomizePrimaryActionLabel": "Add to cart"
13  }
14}

1{
2  "mockup_type": "2d",
3  "session_kind": "setup",
4  "allowed_origin": "https://shop.example.com",
5  "product_id": "SKU-1234",
6  "variant_id": "SKU-1234-BLACK-M",
7  "action_id": "save-mockup",
8  "config": {
9    "theme": "light",
10    "accentColor": "#3366FF",
11    "twoDSetupPrimaryActionLabel": "Save mockup"
12  }
13}

1{
2  "success": true,
3  "mockup_type": "psd",
4  "session": "sess_3_TU1FyqABbmj28yg_-YqENaK-CnvsxBuovgmiT_RHc",
5  "expires_in": 900,
6  "message_session_id": "fac13800-0273-4ea6-aef6-56c818383f0d",
7  "bootstrap_secret": "dtiinV-YkyuD35zTViO2RIBHM4xNCaDJMXC2C4qiPN4"
8}

1{
2  "success": true,
3  "mockup_type": "2d",
4  "session": "sess_9adcc8281f4e4a2b9c3d2e6f8b0a1d77",
5  "expires_in": 1800,
6  "message_session_id": "fac13800-0273-4ea6-aef6-56c818383f0d",
7  "bootstrap_secret": "dtiinV-YkyuD35zTViO2RIBHM4xNCaDJMXC2C4qiPN4"
8}

1<iframe
2  id="sudomock-studio"
3  src="https://studio.sudomock.com/editor?session=SESS_TOKEN"
4  allow="clipboard-write"
5  style="width: 100%; height: 720px; border: 0; border-radius: 12px;"
6  title="Customize your product"
7></iframe>

1{
2  "version": 1,
3  "source": "sudomock-studio",
4  "type": "studio.design-submitted",
5  "request_id": "9b6964ec-b2d3-4c06-86e8-188875cb43ad",
6  "message_session_id": "fac13800-0273-4ea6-aef6-56c818383f0d",
7  "payload": {
8    "mockup_uuid": "c315f78f-d2c7-4541-b240-a9372842de94",
9    "render_uuid": "9adcc828-1f4e-4a2b-9c3d-2e6f8b0a1d77",
10    "action_id": "add-to-cart"
11  }
12}

1{
2  "version": 1,
3  "type": "studio.design-submitted",
4  "request_id": "9b6964ec-b2d3-4c06-86e8-188875cb43ad",
5  "message_session_id": "fac13800-0273-4ea6-aef6-56c818383f0d",
6  "payload": {
7    "mockup_uuid": "c315f78f-d2c7-4541-b240-a9372842de94",
8    "render_uuid": "9adcc828-1f4e-4a2b-9c3d-2e6f8b0a1d77",
9    "action_id": "add-to-cart",
10    "action_context": {
11      "product_id": "SKU-1234",
12      "variant_id": "SKU-1234-BLACK-M"
13    }
14  }
15}

1{
2  "success": true,
3  "replayed": false,
4  "receipt": {
5    "version": 1,
6    "request_id": "9b6964ec-b2d3-4c06-86e8-188875cb43ad",
7    "message_session_id": "fac13800-0273-4ea6-aef6-56c818383f0d",
8    "type": "studio.design-submitted",
9    "mockup_type": "2d",
10    "session_kind": "customize",
11    "action_id": "add-to-cart",
12    "action_context": {
13      "product_id": "SKU-1234",
14      "variant_id": "SKU-1234-BLACK-M"
15    },
16    "mockup_uuid": "c315f78f-d2c7-4541-b240-a9372842de94",
17    "render_uuid": "9adcc828-1f4e-4a2b-9c3d-2e6f8b0a1d77"
18  }
19}

1const STUDIO_ORIGIN = "https://studio.sudomock.com";
2const studioFrame = document.querySelector("#sudomock-studio");
3const expectedMessageSessionId = createSessionResponse.message_session_id;
4const seen = new Set();
5
6// bootstrapSecret is the bootstrap_secret from your server's create-session response.
7// Deliver it only to this trusted parent page; never put it in the iframe URL or logs.
8// It is relayed to the editor only in the handshake below. A fresh 22-char base64url nonce:
9const nonce = () =>
10  btoa(String.fromCharCode(...crypto.getRandomValues(new Uint8Array(16))))
11    .replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
12
13window.addEventListener("message", async (event) => {
14  if (event.origin !== STUDIO_ORIGIN || event.source !== studioFrame.contentWindow) return;
15
16  const message = event.data;
17  if (
18    !message ||
19    message.version !== 1 ||
20    message.source !== "sudomock-studio" ||
21    message.message_session_id !== expectedMessageSessionId ||
22    typeof message.request_id !== "string" ||
23    seen.has(message.request_id)
24  ) return;
25  seen.add(message.request_id);
26
27  switch (message.type) {
28    case "studio.ready":
29      // REQUIRED origin-proof handshake: reply so the editor can open. Skip this and the
30      // customizer stays on "The customizer could not be opened." bootstrapSecret comes
31      // from your create-session response; child_nonce is echoed back verbatim.
32      event.source.postMessage({
33        version: 1,
34        source: "sudomock-parent",
35        type: "parent.bootstrap",
36        request_id: message.request_id,
37        message_session_id: message.message_session_id,
38        payload: {
39          child_nonce: message.payload.child_nonce,
40          parent_nonce: nonce(),
41          bootstrap_secret: bootstrapSecret,
42        },
43      }, STUDIO_ORIGIN);
44      break;
45
46    case "studio.mockup-saved":
47    case "studio.design-submitted": {
48      const p = message.payload;
49      const { source: _source, ...actionEvent } = message;
50      const response = await fetch("/api/studio/action", {
51        method: "POST",
52        headers: { "content-type": "application/json" },
53        body: JSON.stringify({ event: actionEvent }),
54      });
55      const success = response.ok;
56      if (!success) seen.delete(message.request_id);
57      event.source.postMessage({
58        version: 1,
59        source: "sudomock-parent",
60        type: "parent.action-result",
61        request_id: message.request_id,
62        message_session_id: expectedMessageSessionId,
63        payload: { render_uuid: p.render_uuid, success },
64      }, STUDIO_ORIGIN);
65      break;
66    }
67
68    case "studio.close":
69      // The customer closed the customizer (reason: completed | cancelled).
70      closeCustomizerModal();
71      break;
72
73    case "studio.error":
74      // Something went wrong. retryable tells you if a retry may help.
75      console.error(message.payload.code, message.payload.message);
76      break;
77  }
78});

1{
2  "config_version": 4,
3  "config": {
4    "theme": "light",
5    "accentColor": "#DA7756",
6    "psdPrimaryActionLabel": "Add to Cart",
7    "twoDSetupPrimaryActionLabel": "Save Mockup",
8    "twoDCustomizePrimaryActionLabel": "Add to Cart",
9    "twoDShowExport": false
10  }
11}

1{
2  "config_version": 5,
3  "config": {
4    "theme": "light",
5    "primaryColor": "#0F172A",
6    "accentColor": "#DA7756",
7    "backgroundColor": "#F1F5F9",
8    "panelBackground": "#FFFFFF",
9    "textColor": "#0F172A",
10    "borderColor": "#E2E8F0",
11    "successColor": "#16A34A",
12    "borderRadius": 10,
13    "logoUrl": null,
14    "fontFamily": null,
15    "headerText": "Customize Your Design",
16    "uploadText": "Drop image or click to upload",
17    "loadingText": "Adding...",
18    "successText": "Added!",
19    "secondaryActionLabel": "Render Preview",
20    "psdPrimaryActionLabel": "Add to Cart",
21    "twoDSetupPrimaryActionLabel": "Save Mockup",
22    "twoDCustomizePrimaryActionLabel": "Add to Cart"
23  }
24}