To enable communication between the Customizer and the host website:
You can also add metadata keys to each variant in the design which will be included in product – in the Product Configuration tab.
| 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.
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
23 window.addEventListener('message', (event) => {
24 // 1. Verify the origin of the message
25 const allowedOrigin = 'https://alterproduct.com';
26 if (event.origin !== allowedOrigin) {
27 console.warn('Rejected message from untrusted origin:', event.origin);
28 return;
29 }
30
31 // 2. Parse the message data
32 const { type, payload } = event.data;
33
34 if (!type || typeof type !== 'string') return;
35
36 // 3. Handle specific message types
37 if (type === 'ALTER_CUSTOMIZER_ADD_TO_CART') {
38 console.log('Received design from customizer:', payload);
39 // Example: send data to your cart logic
40 // addToCart(payload);
41 }
42 });
43 </script>
44</body>
45</html>
{
"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,
"minOrderQuantity": null,
"processingTime": null,
"stockQuantity": null,
"volume": null,
"weight": null
},
"unitPrice": {
"value": 0,
"currency": "EUR"
},
"totalPrice": {
"value": 0,
"currency": "EUR"
},
"quantity": 1
}
]
}