Skip to main content

Interface: MimeeqApp

Provides comprehensive access to all Mimeeq configuration and visualization capabilities.

The MimeeqApp interface represents the main entry point for working with Mimeeq's product configuration platform. It includes methods for mounting UI components, manipulating scenes, accessing real-time data, and performing various operations on product configurations.

This interface is implemented by the global window.mimeeqApp object.

Example​

// Subscribe to option selection changes
window.mimeeqApp.observers.optionSets.selectedOptions.subscribe(options => {
  console.log('Selected options changed:', options);
});

// Take a screenshot of the current configuration
window.mimeeqApp.utils.takeScreenshot('jpg')
  .then(imageBase64 => console.log('Screenshot taken!'));

// Change the camera angle
window.mimeeqApp.actions.restoreCameraPosition();

@interface

Properties​

actions​

actions: Actions

Methods for manipulating the configurator state.

This object provides functions that allow you to change the state of the configurator, such as selecting options, changing the camera view, toggling features, saving configurations, etc.

Example​

// Zoom out to see the entire product
window.mimeeqApp.actions.zoomOut();

// Add the current configuration to the cart
window.mimeeqApp.actions.triggerFinishEvent('basket');

authorization​

authorization: Authorization

Authentication-related utilities for managing user sessions.

This object provides access to core authentication functionality like signing in, signing out, retrieving user data, and managing password recovery.

Example​

// Check if a user is currently logged in
window.mimeeqApp.authorization.getUserData()
  .then(user => {
    if (user && !('name' in user)) {
      console.log('User is logged in:', user);
    } else {
      console.log('No user is currently logged in');
    }
  });

config​

config: MimeeqApiConfig

Configuration settings for the Mimeeq API.

This object allows you to customize various aspects of the Mimeeq platform behavior, such as PDF generation, image processing, and UI elements.

Example​

// Customize PDF generation
window.mimeeqApp.config.pdf = {
  logoPosition: 'LEFT',
  displayHeaderFooter: true
};

observers​

observers: Observers

Observable streams for real-time data access.

This object provides reactive streams that emit events when data changes in the configurator. By subscribing to these observers, you can react to changes in the product configuration, pricing, selected options, etc.

Example​

// Get notified when the price changes
window.mimeeqApp.observers.pricing.prices.subscribe(priceData => {
  document.getElementById('price').textContent =
    `${priceData.price} ${priceData.currency}`;
});

utils​

utils: Utils

Utility functions for common operations.

This object provides helper methods for tasks like taking screenshots, generating shortcodes, setting prices, and controlling configurator visibility.

Example​

// Take a screenshot of the current configuration
window.mimeeqApp.utils.takeScreenshot('png', 1200)
  .then(imageBase64 => {
    document.getElementById('screenshot').src = imageBase64;
  });

Methods​

initialize​

initialize: InitializeAWS

Initializes the Mimeeq platform with authentication and storage configurations.

This method sets up AWS Cognito authentication, S3 storage access, and AppSync GraphQL API connectivity. It must be called before any other methods that require authentication or data access.

In most implementations using <mmq-auth> or <mmq-embed> components, this initialization is handled automatically using the global window.mimeeqEmbedEnv configuration.

Example​

// Initialize using environment configuration
const { cognitoConfig, s3Config, appSyncConfig } = window.mimeeqEmbedEnv;
window.mimeeqApp.initialize(cognitoConfig, s3Config, appSyncConfig);

mount​

mount: Mount

Unified method to mount any type of Mimeeq embed.

This is the recommended approach for rendering Mimeeq components, as it provides a more flexible and consistent way to mount any type of embed based on the configuration provided.

Example​

// Mount a product configurator
const mountRoot = await window.mimeeqApp.mount({
  CDNPath: window.mimeeqEmbedEnv.CDNPath,
  baseURL: window.mimeeqEmbedEnv.APIPath,
  customerId: 'customer123',
  node: document.getElementById('configurator-container'),
  uid: 'configurator'
});

// Render a 3D configurator for a specific product
mountRoot.render({
  embedType: 'CONFIGURATOR',
  variantCode: 'PRODUCT-ABC-123',
  locale: 'en'
});

mountARPage​

mountARPage: MountARPage

Mounts an augmented reality (AR) viewer page.

This method renders an interface for viewing products in augmented reality, allowing users to place virtual products in their real-world environment using their device's camera.

Deprecated​

Use the unified mount method instead, or the <mmq-embed> component

Example​

window.mimeeqApp.mountARPage({
  uid: 'ar-viewer',
  customerId: 'customer123',
  arShortCode: 'ABC123',
  allowScaling: true,
  locale: 'en'
});

mountConfigurator​

mountConfigurator: MountConfigurator

Mounts a product configurator interface.

This method renders a complete product configuration interface that allows users to customize products by selecting options, colors, materials, and other parameters. It includes a 3D or 2D visualization of the product, option panels, and summary/pricing information.

Deprecated​

Use the unified mount method instead, or the <mmq-embed> component

Example​

window.mimeeqApp.mountConfigurator({
  uid: 'configurator',
  customerId: 'customer123',
  variantCode: 'PRODUCT-ABC-123',
  locale: 'en'
});

mountFavourites​

mountFavourites: MountFavourites

Mounts a user favorites listing interface.

This method renders a list of saved product configurations that the user has previously added to their favorites. This provides a way for users to access and manage their saved configurations.

Deprecated​

Use the unified mount method instead, or the <mmq-embed> component

Example​

window.mimeeqApp.mountFavourites(
  'embed-id',
  'favorite-collection-slug',
  'container-element-id',
  'https://api.example.com',
  'https://cdn.example.com',
  'customer123',
  true,
  'en'
);

mountForgotPassword​

mountForgotPassword: MountForgotPassword

Mounts a forgot password modal for account recovery.

This method renders a complete forgot password flow that allows users to reset their password using email verification.

Deprecated​

Use the unified mount method instead, or the <mmq-auth> component

Example​

window.mimeeqApp.mountForgotPassword({
  onLoginSuccess: (userData) => {
    console.log('Password reset complete, user logged in:', userData);
  }
});

mountList​

mountList: MountList

Mounts a product listing interface.

This method renders a browsable catalog of products, organized by categories. Users can browse products, filter by different criteria, and select products to configure.

Deprecated​

Use the unified mount method instead, or the <mmq-embed> component

Example​

window.mimeeqApp.mountList(
  'embed-id',
  'category-path',
  'container-element-id',
  'https://api.example.com',
  'https://cdn.example.com',
  'customer123',
  true,
  'en'
);

mountLogin​

mountLogin: MountLogin

Mounts a login modal dialog for user authentication.

This method renders a complete login form with username and password fields, as well as links to the forgot password functionality.

Deprecated​

Use the unified mount method instead, or the <mmq-auth> component

Example​

window.mimeeqApp.mountLogin({
  onLoginSuccess: (userData) => {
    console.log('User logged in successfully:', userData);
    window.location.reload();
  }
});

mountUserProfile​

mountUserProfile: MountUserProfile

Mounts a user profile modal showing account settings.

This method renders a user profile view showing account information and providing options to edit user details, change passwords, and manage preferences.

Deprecated​

Use the unified mount method instead, or the <mmq-auth> component

Example​

window.mimeeqApp.mountUserProfile({
  locale: 'en'
});