Controlling Configurator Visibility

This guide demonstrates how to programmatically control when and how the Mimeeq Configurator appears on your page. By leveraging these techniques, you can create seamless user experiences that align with your customer journey.

Using the Web Component Method (Recommended)

When using the modern <mmq-embed> web component, controlling visibility is straightforward through the component's methods:

// Get a reference to your mmq-embed element
const configurator = document.querySelector('mmq-embed');

// Show the configurator
configurator.show();

// Hide the configurator
configurator.hide();

This approach provides the cleanest implementation and is our recommended method for all new integrations.

Opening the Configurator on Button Click

For scenarios where you want to display the configurator when a user clicks a specific button or element, use the component method:

// Add a click event listener to your button
document.getElementById('configureButton').addEventListener('click', () => {
  // Get a reference to your mmq-embed element
  const configurator = document.querySelector('mmq-embed');

  // Show the configurator
  configurator.show();
});

Legacy Method - For Reference Only

The following event-based method works only with legacy embed code using the deprecated data-mimeeq attribute. It is included here solely for reference for existing implementations that have not yet migrated.

// LEGACY METHOD - NOT RECOMMENDED FOR NEW IMPLEMENTATIONS
document.getElementById('modularButton').addEventListener('click', () => {
  // For modular configurator
  document.dispatchEvent(new Event('mimeeq-show-modular'));

  // For standard configurator
  // document.dispatchEvent(new Event('mimeeq-show-configurator'));
});

We strongly recommend migrating to the web component method to ensure continued functionality.

This technique is useful for creating dedicated "Configure" or "Design" buttons that reveal the configurator only when the user is ready to engage.

Automatically Opening the Configurator with URL Parameters

A common business requirement is automatically displaying the configurator when a user accesses a shared configuration link. This ensures that users immediately see the product configuration they were directed to.

Automatic Behavior with Web Components

When using the modern web component with the with-history attribute (or enabling "Use History Navigation" in the Embed Template), the configurator will automatically display when a configuration URL is detected. No additional code is required!

Example: <mmq-embed short-code="F95SNI" with-history></mmq-embed>

For exceptional cases where you need custom control over this behavior with web components:

window.onload = () => {
  // Check if the URL contains configuration parameters
  if (window.location.href.indexOf('variantCode') > -1) {
    // Wait for the Mimeeq application to fully load
    document.addEventListener('mimeeq-app-loaded', () => {
      // For web component integrations
      const configurator = document.querySelector('mmq-embed');
      if (configurator) {
        configurator.show();
      }
    });
  }
};

Legacy Method - For Reference Only

The following code is for legacy integrations only and should not be used for new implementations:

// LEGACY METHOD - NOT RECOMMENDED FOR NEW IMPLEMENTATIONS
window.onload = () => {
  if (window.location.href.indexOf('variantCode') > -1) {
    document.addEventListener('mimeeq-app-loaded', () => {
      if (document.querySelector('[data-mimeeq]')) {
        // For modular configurator
        document.dispatchEvent(new Event('mimeeq-show-modular'));
        // For standard configurator
        // document.dispatchEvent(new Event('mimeeq-show-configurator'));
      }
    });
  }
};

This approach is particularly valuable for:

• Shared configurations via email or social media
• Direct links from marketing campaigns
• QR codes leading to specific product configurations

By implementing these visibility controls, you can create a more intuitive user experience that guides customers through your product exploration and configuration process.