> 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

Learn how to integrate mimeeq with any commerce store using our API's

## How to Use the Mimeeq Configurator with Third-Party Commerce Sites

Integrate Mimeeq Configurator seamlessly with platforms like WooCommerce, Wix, PrestaShop, X-Cart, Magento, BigCommerce, and others.

**NOTE:** Ensure you have an app environment set up with Mimeeq and access to the **API Key**. This can be found at: **Admin Panel → Settings → Customer settings → API Management.**

### Steps for Integration

1. **Embed the Configurator Code:**

* Copy the embed code for a single product, a product group, or the full product list. Make sure to 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 an overlay panel. The choice is yours.
* Explore various options within the Mimeeq dashboard's embed templates, like rendering in a modal, selecting UI elements, or using a custom UI.
* For detailed guidance, visit the following links:
* 🔗 [Configurator Embeds](https://docs.mimeeq.com/embeds-configurator)
* 🔗 [Modular Configurator](https://docs.mimeeq.com/embeds-modular)
* 🔗 [Localization](https://docs.mimeeq.com/localization)
* 🔗 [Custom Translations](https://docs.mimeeq.com/custom-translations)

2. **Handling 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).
* Example Payload: 🔗 [CodePen Example](https://codepen.io/mimeeq/pen/QWmMvZZ/d57fa958ea395ba521d078bc4447f1a2) just click add to cart to test it
* 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)"
```

3. **API Calls for Product Details and Pricing:**

* Use the returned shortcode and quantity, along with the unique API key, to make secure backend API calls.
* For pricing information, refer to **/get-product-price-info** at 🔗 [Product Price Info API](https://docs.mimeeq.com/api-reference/#tag/Product/operation/getProductPriceInfo).
* For product details, see **/get-product-info** at 🔗 [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.

### Example Process for a Store like Shopify

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

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.

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

> **Shopify Users:** Check out our fully-featured Shopify app. To get started, click 🔗 [Shopify App - Getting Started](broken://pages/HgWtTrjlkpGbt6lHNVC8).

#### Utilizing 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 shortcode in this format: `{CODE}-{SHORTCODE}`.

### For any assistance or queries, feel free to contact Mimeeq support.

🔗


---

# 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.