> 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/configurator/advanced-customisation/javascript-api.md).

# JavaScript API

Mimeeqs powerful javascript api can be used to control our configurator in a headless capacity

## How to Use JavaScript to Extend the Mimeeq Configurator

Mimeeq supports the ability for clients to extend our configurator logic using custom JavaScript. Below, you'll find practical examples along with code snippets to guide you through the process.

### Example 1: Headless Canvas

Mimeeq’s configurator can be used in a fully or partially headless capacity. This allows you to hide our options panel and integrate your own, while controlling our canvas with simple JavaScript commands.

**Practical Example**

Imagine you have a sofa that comes in 10 fabrics and 5 wood leg finishes. In Mimeeq, the option block code for fabrics is called “SeatFinishes,” and the code for the fabric is “AM003”. In this scenario, you would use the following JavaScript command to mark the option block and code:

**javascript**

`await mimeeqApp.actions.markOptionByBlockNameAndOptionCode('SeatFinishes', 'AM003');`

For more code examples and for selecting multiple options, check out our [developer documentation here](https://docs.mimeeq.com/embeds-utils#mark-option-by-block-name-and-option-code).

{% hint style="warning" %}
**Note**: The block name and code are case sensitive.
{% endhint %}

![](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2Fca8RrFgt705DmpjsBMLf%2Fblock-name_aqnaaq.png?alt=media)

![](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2FRRczkyl1ksX5268Vs4Jn%2Fcode_1pph8x8.png?alt=media)

### Example 2: Extend Rules Logic Using External Values Such as Quantity

In this example, we create a scenario where if the quantity is greater than 10, the customer is allowed to pick a custom paint color for the legs of the armchair. Conversely, if the qty is less than 10, they can choose from only one of five predefined options.

**To manage this scenario, follow these steps:**

1. Create an option block called “Hidden JS Qty Control” in the Mimeeq app. The name can be anything you like.
2. Add two options to choose from, with any names and codes you prefer in this example I use "Show" and "Hide"
3. Toggle the “hide on specification” option to ensure this block will be hidden from cart specifications, including Mimeeq's Basket.

![](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2FgpSWTMk8EpO7rwO4PBdN%2Fhidden-option-settings_13pw5yi.png?alt=media)

{% hint style="warning" %}
**Note**: Do not add this block to the Mimeeq option panel it will still be active and controllable but but it will be hidden from view.
{% endhint %}

4. Name the block something unique and easy to recognise, such as "qty10".
5. Use these two options as triggers to set up your rules. For more information on rules, refer to our rules help articles.

* When "show" is selected, the color picker will be displayed, a material override action will be implemented, and a message widget will inform the customer about this new option.
* When "hide" is selected, a different message will be displayed, the color picker will not be shown, and the standard option will be maintained.

**Javascript Code**

Below is the JavaScript code that listens for quantity change events. It checks if the qty is greater than or equal to 10, and selects the "show" parameter using the previously mentioned JavaScript command. Likewise, if the qty is less than 10, it selects the "hide" option.

```html
<script>
    let subscription;
    document.addEventListener('mimeeq-3d-product-initialized', () => {
      console.log('Product initialized');
      if(!subscription) {
          subscription = mimeeqApp.observers.pricing.quantity.subscribe(({newValue, oldValue}) => {
              mimeeqApp.actions.markOptionByBlockNameAndOptionCode('qty10', newValue < 10 ? 'hide' : 'show');
          })  
      }
    })

    document.addEventListener('mimeeq-leave-product', () => {
      if(subscription) {
        subscription.unsubscribe();
        subscription = undefined;
      }
    })
</script>
```

**Here is a working example to try**, "Try to change the qty to 10 and then again back to 9."

{% embed url="<https://codepen.io/mimeeq/embed/dyLpwdX?default-tab=>" %}
CODEPEN DEMO
{% endembed %}

**Here is a Video recording explanation**

{% embed url="<https://www.loom.com/embed/8d86fb92adf34f9b858461ac97f6cff2?sid=4057e07e-3fca-4fb5-8c62-24963da64191>" %}
Controlling Mimeeq's Configurator with our JS API
{% endembed %}

### Conclusion

Using our JavaScript API, you can customize the Mimeeq configurator to build in custom logic based on external factors. If you have a use case and need help, feel free to reach out to us using the chat widget in the bottom right corner.

Happy Coding! 💪


---

# 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/configurator/advanced-customisation/javascript-api.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.