Skip to main content

Modular Configurator

The Modular Configurator represents Mimeeq's most advanced product visualization technology, enabling customers to build complex, component-based products in a spatial environment. This powerful tool is ideal for configuring modular furniture systems, kitchen designs, office layouts, and other multi-component products where spatial relationships matter.

Getting Started​

Integrating the Modular Configurator into your website begins with generating the appropriate embed code from your Mimeeq Admin Panel:

  1. Navigate to Admin Panel → Product
  2. Click the "Copy Embed Code" button
  3. Select the desired configuration options
  4. Copy the generated code to your clipboard
  5. Paste the code into your website's HTML

While the Modular Configurator can be displayed both within and outside a modal dialog, we strongly recommend using a modal presentation for optimal user experience. Modal presentation is automatically enforced when using Product List or Favorites List embeds.

Integration Methods​

Mimeeq offers two methods for integrating the Modular Configurator, with our web component approach being the recommended solution.

Our modern web component method provides the simplest and most reliable integration experience. This framework-agnostic approach works with virtually any website or web application.

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

The web component delivers several key advantages:

  • Simplified code implementation
  • Better performance and reliability
  • Easier updates and maintenance
  • Consistent cross-browser behavior

For complete documentation on the mmq-embed component, including all available attributes and advanced usage patterns, see our mmq-embed reference.

Legacy Integration with data-mimeeq Element​

Legacy Method - Migration Required

This integration method is deprecated and scheduled for removal in future releases. It is included here solely as a reference for existing implementations.

Critical limitations of legacy integration:

  • New modular features are only available with web components
  • Complex interactions may not work reliably
  • Performance is significantly better with web components
  • Future 3D functionality requires the web component approach

We strongly urge all customers to migrate to the web component approach as soon as possible to ensure continued functionality and access to new features.

For reference only, this legacy method inserts the Modular Configurator where you place the 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>

Customization Parameters​

When generating your embed code, you can customize numerous aspects of the Modular Configurator experience:

  • UI element visibility and behavior
  • Language and localization settings
  • Brand colors and theme options
  • Typography and font choices
  • Layout and display preferences
  • Interactive behavior settings

For a complete reference of all available customization parameters, see our embed options documentation.

Opening the Modular Finish Screen by Default​

For scenarios where you want users to immediately see a summary of the modular configuration (particularly useful when sharing configurations), you can configure the Modular Configurator to open with the Finish Screen (summary modal) displayed by default.

When using the History Navigation feature, simply append &finishScreen=1 to your URL:

Capitalization Required

The parameter must be written exactly as finishScreen=1 with a capital 'S' in 'Screen'.

Example URL with Finish Screen parameter:

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

This approach is particularly valuable for:

  • Sharing completed designs with clients
  • Providing quick access to pricing and component summaries
  • Creating direct links to configured products for quotes or orders

Controlling Visibility​

The Modular Configurator offers multiple methods for controlling when and how it appears on your page.

Displaying the Configurator​

Choose from these methods to show the Modular Configurator (in order of recommendation):

  1. Component method (Recommended)

    • Call the show() method on your <mmq-embed> element
    • Example: document.querySelector('mmq-embed').show()
    • This provides the most direct and reliable control

  2. Automatic display on load (Web Component)

    • Add the render-at-mount attribute to your <mmq-embed> element
    • Example: <mmq-embed short-code="F95SNI" render-at-mount></mmq-embed>

  3. Event-triggered display

  4. API-triggered display

Legacy Display Methods

The following method only works with deprecated legacy integrations and should not be used for new implementations:

  • Legacy automatic display: Adding the data-mimeeq-render-at-mount attribute to an element with the data-mimeeq attribute

Hiding the Configurator​

You can hide the Modular Configurator using these methods:

  1. Component method (Recommended)

    • Call the hide() method on your <mmq-embed> element
    • Example: document.querySelector('mmq-embed').hide()
    • This is the most direct and future-proof approach

  2. API method

Legacy Hide Method

The following method only works with deprecated legacy integrations and should not be used for new implementations:

  • Legacy event trigger: Triggering the mimeeq-unmount event on the element with the data-mimeeq attribute

These visibility controls allow you to seamlessly integrate the Modular Configurator into your website's user flow, creating compelling call-to-action points that drive engagement with your products.