Customizer – Communication via postMessage

Introduction

To enable communication between the Customizer and the host website:

Open the E-commerce Settings tab in the Alter Product app.
In section Integration set the domain where the iframe will be embedded (e.g. https://yourwebsite.pl or http://localhost:3000 )

You can also add metadata keys to each variant in the design which will be included in product – in the Product Configuration tab.

Messages sent by the Customizer

Type	Description
`ALTER_CUSTOMIZER_ADD_TO_CART`	Clicking the “Add to Cart” button sent after succesful design order save - integrate response with your shopping cart / shop

When the customer clicks 'Add to Cart' in the Customizer, a new order record is created with the default status: pending, which allows the customer to continue editing the design (e.g. via the link: https://alterproduct.com/app/customizer/{customizerId}/{orderId}. Once the status changes to anything other than 'pending', editing is locked – the customer sees a frozen version of the design.

Full Example (HTML + JS)

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8" />
5  <title>Alter Product Customizer Integration</title>
6</head>
7<body>
8  <h1>My E-commerce</h1>
9
10  <iframe
11    id="customizerWidget"
12    src="https://alterproduct.com/app/customizer/1"
13    title="Alter Product Customizer"
14    width="100%"
15    height="100%"
16    frameborder="0"
17    allowfullscreen>
18  </iframe>
19
20  <script>
21    const iframe = document.getElementById('customizerWidget');
22    const ALLOWED_ORIGIN = 'https://alterproduct.com';
23
24    window.addEventListener('message', (event) => {
25      // 1) Origin check (must-have)
26      if (event.origin !== ALLOWED_ORIGIN) return;
27
28      // 2) Data shape check (avoid prototype tricks / unexpected primitives)
29      const data = event.data;
30      if (!data || typeof data !== 'object') return;
31
32      const { type, payload } = data;
33      if (typeof type !== 'string') return;
34
35      // 3) Handle specific message types
36      if (type === 'ALTER_CUSTOMIZER_ADD_TO_CART') {
37        // Optional: validate payload shape before using it
38        console.log('Received design from customizer:', payload);
39      }
40    });
41  </script>
42</body>
43</html>

Example payload

{
  "id": 3,
  "customizerId": 10,
  "orderStatus": "pending",
  "createdAt": "2025-07-28T14:21:19.000Z",
  "customizerURL": "https://alterproduct.com/app/customizer/10",
  "customizerName": "Mug 450ml (15oz)",
  "totalPrice": {
    "value": 0,
    "currency": "EUR"
  },
  "productGroup": {
    "id": 1,
    "name": {
      "pl": "Kubek 450ml (15oz)",
      "en": "Mug 450ml (15oz)"
    }
  },
  "productItems": [
    {
      "id": 3,
      "model3d": { "id": 3 },
      "size": {
        "id": 9,
        "name": { "pl": "450ml (15oz)", "en": "450ml (15oz)" },
        "measureSize": { "D": 8.65, "H": 11.95 }
      },
      "material": {
        "id": 3,
        "name": { "pl": "Ceramika", "en": "Ceramic" }
      },
      "printType": {
        "id": 5,
        "name": { "pl": "Sublimacja", "en": "Sublimation" }
      },
      "color": {
        "id": 11,
        "name": { "pl": "Domyślny", "en": "Default" },
        "hex": "#FFFFFF"
      },
      "variant": {
        "id": 11,
        "productGroupId": 1,
        "productModel3dId": 3,
        "sizeId": 9,
        "materialId": 3,
        "printTypeId": 5,
        "colorId": 11,
        "metadata": null
      },
      "unitPrice": { "value": 0, "currency": "EUR" },
      "totalPrice": { "value": 0, "currency": "EUR" },
      "quantity": 1
    }
  ]
}