*** Custom integration is only available with our Enterprise plan. ***

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.


To use MyCustomizer into your own page, you have to integrate an iframe through a standard HTML code. See the following link to understand what is an iframe and how it presents itself in a browser.

Embedding the MyCustomizer iframe in your page

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 at help@mycustomizer.com.

  1. Create your product and your starting points.

  2. Create a custom online store.

  3. Go back to your product page to 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

The Add to cart button

The « Add to cart » button creates a design that is saved through our API. It will also asynchronously upload all the design images in a separate request.

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:

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"
}

Tip : You can try it in the console:

  1. Open the customizer preview and type this code in the console: `window.addEventListener('message', e => console.log(e))`

  2. Click on « Add to cart » and you will see what is logged.

Definitions

Production data: This is what is included in the order sheet. You can decide what is production data by activating the Show in Ordersheet toggle within any question in the product builder.

Show in Ordersheet

Summary: This is what is included in the order summary. You can decide what appears in the Summary by activating the Summary toggle within the settings of any question in the product builder.

Configuration: This contains the whole design information. This can be 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 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 NOT to use the preview url as the iframe url, which is something that looks like this:

(http://mycompany.mycustomizer.com/customize/5e7bfcdcf6e2af198028ba52)

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 Designs page to review what kind of products your clients have created but keep in mind that it does not represent a final order. A final order includes not only the design but the processing status, payment status and other useful fields.

Design images

These are full sized images of every view of the new design. These images are available to download from the design page by clicking on the Download all images link, 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.

Did this answer your question?