How it works

Summary

From our application, many custom products can be created in various configurations and then presented to the products buyers. To use the customizer into your own page, you have to integrate a iframe through a standard HTML code. See the following link to understand what is an iframe and how it presents itself in a browser.

Now that you know the secret, we will show you step by step how to succesfully integrate our solution to yours.

Please note that we are still currently developing/improving the custom integration code and documentation. If you have any questions or advice, comments or else, please contact us by email at : help@mycustomizer.com. Your help will be greatly appreciated.

How to embed the iframe ?

This explains how to embed the iframe element within your custom store, website or other HTML page. (For specific applications or integrations, please contact us).

  1. Create your product and your starting points.

  2. Create a custom online store.

    1. Go to the online stores page

    2. Click on « + Add Online Store »

    3. Select « Custom ecommerce » as eCommerce type and fill the remaining fields

    4. Save your online store

  3. Go back to product page and see the newly added online store section

  4. Create your pricing and save it

  5. Add your starting points to the online store

  6. Copy the embed code

  7. Paste the iframe code within your page's HTML code

Voilà, your starting point should be available and seen by your customers.

A starting point added to a custom store

Now, what do I do ?

You've successfully embedded the iframe and can see the customizer where you wanted, but wonder how it works when the buyer wants to buy your product after having customized it ? Follow these instructions :

The « Add to cart » button in the choice panel creates a design that is saved through our API. It will also asynchronously upload all the design images in a separate request. (see below for further info about these images).

It ALSO sends a local POST message to the iframe parent for further actions. The element containing the parent iframe will receive the message. You have to listen to and handle this post message with javascript code if you want to proceed. Here's an example of a listener that handles the post message :

Tip : You can try it in the console. Just open the customizer preview and type this code in the console : `window.addEventListener('message', e => console.log(e))`. Then click on « Add to cart » and you will see what is logged.

const handleAddToCartPostMessage = event => {
if (
event.data.eventName === 'mczrAddToCart' &&
event.origin === 'mycompany.mycustomizer.com'
) {
const details = event.data.detail
// Handle the post message
}
}
window.addEventListener('message', handleAddToCartPostMessage, false)

Here's an example of an event data detail :

// event.data.detail =
{
"productionData": [
{
"key": "Frame material",
"value": "Red",
"ref": {
"optionId": "OPTION-5rj529",
"choiceId": "CHOICE-5rjf4x"
}
},
{
"key": "Custom name text",
"value": "Jon Snow",
"ref": {
"optionId": "OPTION-5rl3kx",
"choiceId": "CHOICE-5rkq5d"
}
},
{
"key": "Custom name color",
"value": "Mermaid Turquoise",
"ref": {
"optionId": "OPTION-5rl375",
"choiceId": "CHOICE-5rjpf5"
}
},
{
"key": "Mags image",
"value": "Brass",
"ref": {
"optionId": "OPTION-5rjiht",
"choiceId": "CHOICE-5rjvxd"
}
},
{
"key": "Mags material",
"value": "White framing",
"ref": {
"optionId": "OPTION-5rjlup",
"choiceId": "CHOICE-5rk601"
}
},
{
"key": "Bike sticker logo",
"value": "http://cdn.mycustomizer.com/mycompany/5e7bffadf6e2af198028ba67.jpg",
"ref": {
"optionId": "OPTION-83hcyr",
"choiceId": "choice-3en2de"
}
}
],
"summary": [
{
"key": "Frame",
"value": "Red"
},
{
"key": "text",
"value": "Jon Snow"
},
{
"key": "color",
"value": "Mermaid Turquoise"
},
{
"key": "image",
"value": "Brass"
},
{
"key": "material",
"value": "White framing"
}
],
"designImages": [],
"_id": "5e7bffc4f6e2af198028ba69",
"price": 223.12,
"configuration": {
"OPTION-5rj529": "CHOICE-5rjf4x",
"OPTION-5rl3kx": {
"id": "CHOICE-5rkq5d",
"type": "text",
"name": "Name",
"views": [
{
"type": "text",
"text": "Jon Snow"
}
],
"value": "Jon Snow"
},
"OPTION-5rkzu9": "CHOICE-5rkti9",
"OPTION-5rl375": "CHOICE-5rjpf5",
"OPTION-5rjiht": "CHOICE-5rjvxd",
"OPTION-5rjlup": "CHOICE-5rk601",
"OPTION-83h9lv": "CHOICE-83gzj7",
"OPTION-83hcyr": {
"id": "choice-3en2de",
"name": "white-star-icon-png-28",
"type": "logo",
"views": [
{
"type": "logo",
"logo": {
"_id": "5e7bffadf6e2af198028ba67",
"originalFilename": "white-star-icon-png-28.jpg",
"size": 40965,
"date": "2020-03-26T01:04:45.702Z",
"filename": "5e7bffadf6e2af198028ba67.jpg",
"url": "http://cdn.mycustomizer.com/mycompany/5e7bffadf6e2af198028ba67.jpg",
"id": "5e7bffadf6e2af198028ba67"
}
}
],
"thumbnail": {
"_id": "5e7bffadf6e2af198028ba67",
"originalFilename": "white-star-icon-png-28.jpg",
"size": 40965,
"date": "2020-03-26T01:04:45.702Z",
"filename": "5e7bffadf6e2af198028ba67.jpg",
"url": "http://cdn.mycustomizer.com/mycompany/5e7bffadf6e2af198028ba67.jpg",
"id": "5e7bffadf6e2af198028ba67"
}
},
"OPTION-83hgbn": "CHOICE-83h68z",
"OPTION-83hjoj": "CHOICE-83h2w3"
},
"productId": "5e7bfcdcf6e2af198028ba52",
"productName": "Fabulous Bicycle",
"customizerProductId": "5e7bff72f6e2af198028ba5d",
"designImage": {
"_id": "5e7bffc4f6e2af198028ba68",
"originalFilename": "designThumbnail.png",
"size": 2740,
"date": "2020-03-26T01:05:08.036Z",
"filename": "5e7bffc4f6e2af198028ba68.png",
"url": "http://cdn.mycustomizer.com/mycompany/5e7bffc4f6e2af198028ba68.png",
"__v": 0,
"id": "5e7bffc4f6e2af198028ba68"
},
"store": null,
"createdAt": "2020-03-26T01:05:08.041Z",
"updatedAt": "2020-03-26T01:05:08.041Z",
"designId": 6010,
"__v": 0,
"id": "5e7bffc4f6e2af198028ba69"
}

Production data : This is what is included in the order sheet. This option is activable through all the product components of your product builder.

Summary : This is what is included in the summary. This is toggleable through all the questions of your product builder.

Toggle this option if you want to see the question and it's answer in the summary

Configuration : This contains the whole design information. This is important for us to reproduce the design, but for you, this could be very useful to get custom information, such as custom imported logos (url links), or custom text if not included in production data / summary.

designImage : The url is useful to display the custom product's design thumbnail. Its normally a 250px x something, or a something x 250px image, depending on the larger side. We usually use it to display the product in the cart.

price : Calculated based on the custom pricing you set up for the specific store. Will not display a valid price on the preview though.

For these reasons, be careful to NOT use the preview url, which is something that looks like this : (http://mycompany.mycustomizer.com/customize/5e7bfcdcf6e2af198028ba52) as the iframe url.

id : This is the design id that can be used to fetch the design data later, by using the API endpoint.

customizerProductId: This is the id of the last published version of your product.

Designs and orders

You can use the design page to review what kind of customizers your clients have generated and finished. But it does not represent a final order. A final order includes not only the design but the processing status and payment status and other useful fields.

Orders are only useful for specific integrations, such as Shopify. Those who use the custom integration do not need to process their orders through our API.

Design images

Previously, we mentioned that we separately uploaded the design images. These are full sized images of every view of the new design. These images are available to download from the design page, or when you call the design API.

Please note that this operation is done asynchronously, so we cannot guarantee when these images have uploaded to our servers.

Link to download all the design's images