Skip to main content

Modular Configurator

Get started​

Generate code snippet under Admin Panel -> Product -> Copy Embed Code (button).

Although modular configurator can be disabled both in and without modal it's preferred to display it in one. It's also force in case you are using Product List or Favourites List embed.

There are two ways to load embed on your page.

Web component​

We provide web component which allows you may easily add to any website or web application. Since it's framework-agnostic it should work fine with any frontend framework.

<mmq-embed short-code="F95SNI" locale="en" with-history></mmq-embed>

To learn more about it, click here.

data-mimeeq element​

Deprecation

This way of using Mimeeq Embed is deprecated. Please use above method.

Embed will be inserted exactly where you put the snippet (specifically, data-mimeeq element).

<div data-mimeeq data-mimeeq-short-code="F95SNI" data-withhistory data-locale="en"></div>
<script
  src="https://jrdgrq09nk.execute-api.eu-central-1.amazonaws.com/api/cpq/get-embed-short-code-data?shortCode=F95SNI&html=1"
  rel="script"
  type="application/javascript"
  async></script>

Parameters​

When you generate the code snippet, you can customize things like:

  • disabling UI elements
  • changing localization
  • customizing brand colors
  • customizing font
  • customizing display style

To see list of parameters, click here.

Open modular Finish Screen​

In case you are using modular configurator with enabled History Navigation you can open Summary Modal by default while loading shared url. To do that you need to append &finishScreen=1 to your URL.

warning

Make sure s in Screen is capital.

Example url should look like this

https://yoururl/collection-name/?isModular=true&variantCode=CALMOD&shortCode=1TXDJI&finishScreen=1

Controlling visibility​

There is multiple ways to control modular visibility

Display​

  1. render-at-mount attribute on mmq-embed element. This will display embed as soon as it's loaded.
  2. data-mimeeq-render-at-mount attribute on element with data-mimeeq attribute. This will display embed as soon as it's loaded.
  3. Trigger mimeeq-show-modular event on your document. This allows you to enable it on demand but requires a bit of coding on host site. You can find full example here.
  4. Call mimeeqApp.utils.showModular method. This works similar to previous option. Learn more about this way here.
  5. Call show method on mmq-embed element.

Hide​

  1. Call mimeeqApp.utils.closeConfigurator method. It will hide any configurator on page. Learn more here.
  2. Trigger mimeeq-unmount event on element with data-mimeeq attribute.
  3. Call hide method on mmq-embed element.