Host-Triggered Events

Host-triggered events flow in the opposite direction from all other Mimeeq events. Instead of listening for them, your code dispatches them to control the configurator's UI. The embed listens for these events on the document and responds accordingly.

// How to dispatch a host-triggered event
document.dispatchEvent(new Event('mimeeq-show-basket-loader'));

// To stop it later
document.dispatchEvent(new Event('mimeeq-hide-basket-loader'));

Legacy events

Some host-triggered events (mimeeq-show-modular, mimeeq-show-configurator, mimeeq-unmount) only apply to the legacy embed. If you're using the <mmq-embed> web component, use its built-in methods instead — show(), hide(), etc. See the <mmq-embed> Component Reference for details.

Loader Control

These events control the loading indicators on the option panel's action button and price display. They're primarily useful when you handle add-to-cart logic externally (HTML integration) and need to show feedback while your code processes the event.

mimeeq-show-basket-loader / mimeeq-hide-basket-loader

Show or hide the loading spinner on the action button (Finish / Add to Cart) next to the price in the option panel. Use this pair when your external cart integration needs time to process the mimeeq-add-to-cart event — show the loader when you receive the event, hide it when your backend responds.

For Mimeeq basket integration (cart: true), the loader is managed automatically. These events are only needed for HTML integrations.

document.addEventListener('mimeeq-add-to-cart', async (event) => {
  // Show loader while our backend processes the item
  document.dispatchEvent(new Event('mimeeq-show-basket-loader'));

  try {
    await fetch('/api/cart/add', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(event.detail),
    });
    showNotification('Added to cart');
  } catch (err) {
    showNotification('Failed to add to cart', 'error');
  } finally {
    document.dispatchEvent(new Event('mimeeq-hide-basket-loader'));
  }
});

---

mimeeq-show-price-loader / mimeeq-hide-price-loader

Show or hide the loading spinner in the price box on the option panel. Use this pair when you're providing prices from an external pricing engine and need to show a loading state while fetching the price.

This is particularly relevant for Custom Pricing Integration — when the configurator calls your pricing function, you may want to show a loader while your backend calculates.

// Example with custom pricing integration
window.mimeeqPricing = async (productData) => {
  document.dispatchEvent(new Event('mimeeq-show-price-loader'));

  try {
    const response = await fetch('/api/pricing', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(productData),
    });
    const price = await response.json();
    return price;
  } finally {
    document.dispatchEvent(new Event('mimeeq-hide-price-loader'));
  }
};

Toast Control

mimeeq-show-add-to-cart-toast / mimeeq-hide-add-to-cart-toast

Show or hide the "Added to basket" confirmation toast. The toast appears automatically when using Mimeeq's built-in basket, but if you're handling cart logic yourself, you can trigger it manually for a consistent user experience.

document.addEventListener('mimeeq-add-to-cart', async (event) => {
  const success = await addToExternalCart(event.detail);
  if (success) {
    // Show Mimeeq's built-in confirmation toast
    document.dispatchEvent(new Event('mimeeq-show-add-to-cart-toast'));
  }
});

Finish Actions

mimeeq-trigger-add-to-cart

Programmatically trigger the add-to-cart or finish action, as if the user clicked the action button. The behaviour depends on the embed variant: in basket mode it runs the add-to-cart flow, otherwise it opens the finish/summary panel.

This is a convenience event — you can achieve the same result with mimeeqApp.actions.triggerFinishEvent(), but the event-based approach is simpler when you don't need to await the result.

// Custom "Add to Cart" button outside the embed
document.getElementById('external-add-to-cart').addEventListener('click', () => {
  document.dispatchEvent(new Event('mimeeq-trigger-add-to-cart'));
});

---

mimeeq-show-modular-summary

Open the modular summary/finish screen programmatically. This is the modular equivalent of triggering the finish action — it shows the scene summary with all products and their configurations.

document.getElementById('show-summary-btn').addEventListener('click', () => {
  document.dispatchEvent(new Event('mimeeq-show-modular-summary'));
});

Translation

mimeeq-refresh-translations

Reload custom translations defined in window.mimeeqCustomMessages. Dispatch this after updating translation strings at runtime — the embed will re-render with the updated text without a full page reload.

See Custom Translations — Updating Translations During Runtime for full details.

// Update a translation and refresh
window.mimeeqCustomMessages = {
  en: {
    'configurator.finishButton': 'Request Quote',
  },
};
document.dispatchEvent(new Event('mimeeq-refresh-translations'));

Legacy Embed Control

Legacy only

These events only work with the legacy embed (non-web-component). If you're using <mmq-embed>, use the component's built-in methods instead: show(), hide(), etc.

Event	Description	Web component equivalent
mimeeq-show-configurator	Show a hidden standard configurator (when Render at Mount is disabled)	mmqEmbed.show()
mimeeq-show-modular	Show a hidden modular configurator (when Render at Mount is disabled)	mmqEmbed.show()
mimeeq-unmount	Remove all Mimeeq instances from the DOM with full cleanup	Remove the <mmq-embed> element

// Legacy: show configurator on button click
document.getElementById('configure-btn').addEventListener('click', () => {
  document.dispatchEvent(new Event('mimeeq-show-configurator'));
});

// Web component: same thing, but using the component API
document.getElementById('configure-btn').addEventListener('click', () => {
  document.querySelector('mmq-embed').show();
});

Summary

Event	Direction	Purpose
mimeeq-show-basket-loader	Host → Embed	Show action button loader
mimeeq-hide-basket-loader	Host → Embed	Hide action button loader
mimeeq-show-price-loader	Host → Embed	Show price box loader
mimeeq-hide-price-loader	Host → Embed	Hide price box loader
mimeeq-show-add-to-cart-toast	Host → Embed	Show "added to basket" toast
mimeeq-hide-add-to-cart-toast	Host → Embed	Hide "added to basket" toast
mimeeq-trigger-add-to-cart	Host → Embed	Trigger finish/add-to-cart action
mimeeq-show-modular-summary	Host → Embed	Open modular summary screen
mimeeq-refresh-translations	Host → Embed	Reload custom translations
mimeeq-show-configurator	Host → Embed	Show hidden configurator (legacy only)
mimeeq-show-modular	Host → Embed	Show hidden modular (legacy only)
mimeeq-unmount	Host → Embed	Remove all Mimeeq instances (legacy only)

Related

• Finish & Cart Events — the mimeeq-add-to-cart event these loaders complement
• Custom Pricing Integration — where price loaders are most relevant
• Custom Translations — runtime translation updates
• <mmq-embed> Component Reference — web component methods replacing legacy events