> For the complete documentation index, see [llms.txt](https://help.mimeeq.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.mimeeq.com/commerce-and-integrations/custom-commerce/integration-guide.md).

# Integration Guide

Connect the Mimeeq configurator to any commerce platform using embeds and Mimeeq APIs. Learn to handle Add to Cart, fetch prices and create cart products.

Integrate the Mimeeq configurator with platforms like WooCommerce, Wix, PrestaShop, X-Cart, Magento, BigCommerce and others. This guide covers embedding the configurator, handling the Add to Cart event and calling Mimeeq APIs from your backend.

{% hint style="info" %}
**Before you start:** make sure you have an app environment set up with Mimeeq and access to the **API Key**. You can find it at **Admin Panel → Settings → Customer settings → API Management**.
{% endhint %}

***

## Integration steps

{% stepper %}
{% step %}

### Embed the configurator code

* Copy the embed code for a single product, a product group or the full product list. Select a template with the **Basket Support** toggle enabled and choose the **HTML** sub-option.
* Place the embed code snippet where you want the configurator to appear, such as inline on a page, in a pop-up or in an overlay panel. The choice is yours.
* Explore the options in the Mimeeq dashboard's embed templates, like rendering in a modal, selecting UI elements or using a custom UI.

For detailed guidance, see:

* [Configurator embeds](https://docs.mimeeq.com/embeds-configurator)
* [Modular configurator embeds](https://docs.mimeeq.com/embeds-modular)
* [Localisation](https://docs.mimeeq.com/localization)
* [Custom translations](https://docs.mimeeq.com/custom-translations)
  {% endstep %}

{% step %}

### Handle the Add to Cart event

When a customer finalises their configuration and clicks **Add to Cart**, specific data is returned in a payload. For details on the event and data structure, see [Selected configuration events](https://docs.mimeeq.com/events#selectedconfiguration).

To test an example payload, open the [CodePen example](https://codepen.io/mimeeq/pen/QWmMvZZ/d57fa958ea395ba521d078bc4447f1a2) and click **Add to Cart**.

Key fields to note:

```json
"shortCode": "UTUW6S",
  "configurationCode": "SeatFinishes-b3&BaseFinishes-a7&OwnMaterial-&UploadCustomerMaterial-",
  "productId": "PROD-839943b5-d722-477e-8031-0da8a42ed473",
  "qty": 1,
  "code": "HA_1",
  "productName": "Hilko Armchair by Leloux - Add Own Material",
  "collectionId": "",
  "selectedOptions": {
    "Seat Finishes": "Crown Velvet 30",
    "Base Finishes": "Black",
    "Own Material": "Inactive"
  },
  "isModular": false,
  "embedShortCode": "U1X94N",
  "sku": "PRODUCT-GP1/MET//",
  "publicPriceListGroups": "cf9f6f0b-e295-45c2-b0fb-a1cf05e0a20c",
  "image": "base64(64379 chars)"
```

{% endstep %}

{% step %}

### Call the APIs for product details and pricing

* Use the returned short code and quantity, along with your unique API key, to make secure backend API calls.
* For pricing information, use **/get-product-price-info**. See the [Product Price Info API](https://docs.mimeeq.com/api-reference/#tag/Product/operation/getProductPriceInfo).
* For product details, use **/get-product-info**. See the [Product Info API](https://docs.mimeeq.com/api-reference/#tag/Product/operation/getProductInfo).
* With this data, you can send the price, product description and image to your cart, product catalogue, ERP system or other relevant systems.
  {% endstep %}
  {% endstepper %}

***

## Example process for a store like Shopify

In platforms like Shopify, real products or variants need to be created for the integration.

```mermaid
flowchart LR
  A[Customer clicks Add to Cart] --> B[Backend app calls Mimeeq APIs] --> C[Product created in commerce system] --> D[Frontend adds product to cart]
```

1. When the **Add to Cart** button is clicked, the frontend queries the backend app to create a product in the commerce system.
2. The app passes the configuration to the Mimeeq APIs, retrieves pricing, and then creates the product using this information.
3. Once the product is ready, as per the commerce cart API response, the frontend adds this product to the cart.

The specific flow depends on the limitations and constraints of the commerce platform.

{% hint style="success" %}
**Shopify users:** check out our fully featured Shopify app. To get started, see [Shopify Admin Settings](/commerce-and-integrations/shopify/admin-settings.md).
{% endhint %}

***

## Using the returned data on your host site

Here are some suggestions for using the data effectively:

1. Check if the unique SKU exists in your product catalogue.
2. Update the price if necessary.
3. Add the updated product to your commerce catalogue or cart.
4. Pass a formatted product description to the catalogue.
5. Alternatively, create a one-time custom product directly in the cart, depending on your system's API structure and security conditions.

### Suggested SKU code format

For unique identification, create a custom product code combining the variant code and short code in this format: `{CODE}-{SHORTCODE}`.

***

## Need help?

For any assistance or queries, contact Mimeeq support.

***

## Related articles

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Third-Party Forms</strong></td><td>Pre-fill third-party forms like Zapier Interfaces with configuration data.</td><td><a href="/commerce-and-integrations/custom-commerce/third-party-forms.md">Third-Party Forms</a></td></tr><tr><td><strong>Shopify Admin Settings</strong></td><td>Connect your API key, products and cart settings.</td><td><a href="/commerce-and-integrations/shopify/admin-settings.md">Shopify Admin Settings</a></td></tr><tr><td><strong>Shopify Add to Cart Methods</strong></td><td>Choose how configured products and bundles reach the cart.</td><td><a href="/commerce-and-integrations/shopify/add-to-cart.md">Shopify Add to Cart Methods</a></td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://help.mimeeq.com/commerce-and-integrations/custom-commerce/integration-guide.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.