Skip to main content

2D/3D Configurator

Getting Started with Product Visualization​

The Mimeeq 2D/3D Configurator provides an immersive, interactive product visualization experience that allows your customers to customize and explore products in real-time. To integrate this powerful tool into your website, simply generate a code snippet from your Admin Panel.

To generate your embed code:

  1. Navigate to the Admin Panel
  2. Select your product
  3. Click the "Copy Embed Code" button
  4. Paste the generated code into your website

Integration Methods​

Mimeeq offers two methods for integrating the configurator on your page, with the web component approach being our recommended solution.

Our modern web component method provides the simplest and most reliable integration experience. This approach uses the <mmq-embed> tag which is framework-agnostic and compatible with virtually any website or web application.

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

The web component approach offers:

  • Cleaner code implementation
  • Better performance
  • Simplified updates
  • More reliable cross-browser compatibility

To explore all available attributes and usage examples, see the complete mmq-embed documentation.

Legacy Integration with data-mimeeq element​

Legacy Method - Migration Required

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

Important limitations:

  • New features are only available in the web component version
  • Bug fixes for this method are limited
  • Performance optimizations are not applied to this method
  • This approach is incompatible with modern web standards

We strongly urge all customers to migrate to the web component approach as soon as possible.

For reference only, this legacy method inserts the 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 code snippet, you can customize numerous aspects of the configurator experience, including:

  • UI element visibility and behavior
  • Language and localization
  • Brand colors and theme
  • Typography and font settings
  • Layout and display style
  • Behavior settings

For a comprehensive list of available parameters and their impact, see our embed options documentation.

Controlling Configurator Visibility​

The Mimeeq Configurator offers flexible visibility control to perfectly match your user experience requirements.

Displaying the Configurator​

You have multiple options to control when and how the configurator appears:

  1. 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>

  2. Event-triggered display

    • Dispatch the mimeeq-show-configurator event on your document
    • This approach gives you precise control over when the configurator appears
    • Ideal for creating custom triggers like "Customize" buttons
    • See our modular guide for complete examples

  3. 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
  1. Component method (Web Component)
    • Call the show() method on your <mmq-embed> element
    • Example: document.querySelector('mmq-embed').show()

Hiding the Configurator​

You can hide the 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 cleanest and most reliable approach

  2. API method

    • Call mimeeqApp.utils.closeConfigurator()
    • This will hide any active configurator on the page
    • Learn more here
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

By providing these visibility controls, you can seamlessly integrate the configurator into your website's user flow, showing it exactly when your customers are ready to engage with your products.