Mimeeq Utils

The Mimeeq configurator provides a comprehensive set of utility functions that give you powerful control over the configurator's behavior and capabilities. These utils bridge the gap between the configurator and your application, enabling seamless integration of product configuration into your business workflows.

The utilities described below cover the most common business needs when integrating with the Mimeeq configurator. For more advanced capabilities, refer to our Web API documentation.

Image Generation

Method: mimeeqApp.utils.takeScreenshot()

Generate professional-quality product images directly from the configurator canvas. This method captures the current product configuration exactly as it appears, allowing you to create consistent product imagery for catalogs, websites, or sharing with clients without traditional photography.

Business Value

• Creates product imagery on-demand for any configuration
• Ensures consistent visual representation across all channels
• Eliminates the need for photographing every possible product variation
• Supports marketing, sales, and customer communications with accurate visuals

Parameters

Name	Type	Default	Description
extension	string	'png'	Image format ('png', 'jpg', or 'jpeg'). PNG supports transparency while JPEG offers smaller file sizes.
size	number	3072	Width of the image in pixels. Height is calculated automatically based on canvas proportions. For e-commerce use, we recommend 1000-1500px for optimal performance. Note: Sizes above 2048px may cause performance issues on iOS devices.
backgroundColor	string	'#FFFFFF'	Background color for JPEG images (or for PNG with transparency disabled). Uses standard hex color format.
customDimensions	{ width: number, height: number }		Override default dimensions with specific width and height values. Useful for creating images with exact dimensions for specific use cases.
withAutozoom	boolean	false	When true, automatically adjusts the zoom level to ensure the entire product is visible in the frame. Ideal for consistent product shots.
withCameraReset	boolean	false	When true, resets the camera to the default product view position before taking the screenshot. Ensures consistent viewing angle.
customCameraPosition	string		JSON string defining a specific camera position for the screenshot. Allows precise control over the viewing angle and framing.

Usage

mimeeqApp.utils
  .takeScreenshot(
    'png', // Format
    1200, // Width in pixels
    '#FFFFFF', // Background color
    null, // Use default height calculation
    true, // Auto-zoom to fit entire product
    false, // Use current camera position
    null, // No custom camera position
  )
  .then((base64) => {
    // Use the image (e.g., display it, save it, or send to server)
    document.getElementById('product-image').src = base64;
  })
  .catch((error) => {
    console.error('Screenshot generation failed:', error);
  });

This method returns a Promise that resolves to a base64-encoded image string, or rejects with an error if the capture fails.

Short Code Generation

Method: mimeeqApp.utils.getShortcode(productId, configurationCode)

Generate a unique, shareable identifier for a specific product configuration. This shortcode serves as a compact reference to a complete product setup, allowing for easy sharing, storage, and retrieval of configurations.

Business Value

• Creates persistent identifiers for specific configurations
• Enables sharing configured products via short links
• Supports configuration storage and retrieval in external systems
• Provides consistent reference codes for ordering systems

warning

This method works only for standard products. For modular products, use the shortcode returned as part of the mimeeq-add-to-cart event.

Shortcodes are returned in the mimeeq-add-to-cart event for all products. We recommend using these event values rather than calling this method directly.

Parameters

Name	Type	Default	Description
productId	string		The unique identifier for the product
configurationCode	string		The configuration code representing all selected options

Usage

const productId = 'prod_abc123';
const configCode = 'Width-a9&Material-b5&Color-c3';

mimeeqApp.utils
  .getShortcode(productId, configCode)
  .then((shortCode) => {
    // Use the shortcode for sharing or storing the configuration
    const shareUrl = `https://example.com/configure?code=${shortCode}`;
    console.log('Shareable configuration link:', shareUrl);
  })
  .catch((error) => {
    console.error('Failed to generate shortcode:', error);
  });

This method returns a Promise that resolves to a generated shortcode string, or rejects with an error if generation fails.

Set price

Method: mimeeqApp.utils.setPrice(pricing)

Provide custom pricing data to the configurator from your own pricing system. This method allows you to override Mimeeq's built-in pricing with your own business-specific pricing logic, enabling integration with ERP systems, complex discount rules, or region-specific pricing.

Business Value

• Integrates with external pricing systems or ERP platforms
• Supports custom pricing rules and discount structures
• Enables dynamic pricing based on customer segments, volumes, or markets
• Provides consistent pricing across your e-commerce ecosystem

note

We recommend listening for the mimeeq-price-change event to know when to update prices. This ensures prices are refreshed whenever the configuration changes.

Enable the "Use Custom Pricing" option in your embed settings to use this feature. Use the use-custom-pricing attribute with the web component, or data-mimeeq-use-custom-pricing with legacy embeds.

warning

For modular products, you can only set the total price, not individual component prices.

Parameters

Name	Type	Description
pricing	PriceData	An object containing price information including the total price, currency, and optional delivery time and quantity break pricing.

Usage Examples

Basic price and currency:

mimeeqApp.utils.setPrice({
  price: 1299.99,
  unitPrice: 1299.99,
  currency: 'EUR',
});

With delivery time:

mimeeqApp.utils.setPrice({
  price: 1299.99,
  unitPrice: 1299.99,
  currency: 'USD',
  deliveryTime: '14-21 days',
});

With quantity break pricing:

mimeeqApp.utils.setPrice({
  price: 338,
  unitPrice: 338,
  currency: 'EUR',
  deliveryTime: '25 days',
  levels: [
    {
      quantityMin: 1,
      quantityMax: 4,
      discount: 0,
      price: 338,
      pricePart: 0,
    },
    {
      quantityMin: 5,
      quantityMax: 9,
      discount: 0.2,
      price: 270,
      pricePart: 0,
    },
    {
      quantityMin: 10,
      discount: 0.27,
      price: 248,
      pricePart: 0,
    },
  ],
});

Interactive Example

Set pricing settings

Method: mimeeqApp.utils.setPricingSettings(minimumFractionDigits, maximumFractionDigits)

Configure how decimal places appear in price displays throughout the configurator. This ensures pricing follows your brand's formatting standards and aligns with your regional conventions.

Business Value

• Ensures consistent price formatting across your application
• Adapts to different currency display conventions
• Provides clarity in price communication
• Maintains brand consistency in numerical displays

Parameters

Name	Type	Default	Description
minimumFractionDigits	number	2	Minimum number of decimal places to display, even if trailing zeros (e.g., $1599.00)
maximumFractionDigits	number	2	Maximum number of decimal places to display (e.g., $1599.99)

Usage

// Configure prices to display with exactly 2 decimal places
mimeeqApp.utils.setPricingSettings(2, 2);

// Configure prices to show up to 4 decimal places when needed, but at least 2
mimeeqApp.utils.setPricingSettings(2, 4); // e.g., $1599.00 or $1599.9875

Close configurator

Method: mimeeqApp.utils.closeConfigurator()

Programmatically close and remove the configurator from the page. This method unmounts the configurator component from the DOM, freeing up resources and returning the page to its original state.

warning

This method is deprecated and works only for legacy embed version. If you are using web component please use its hide() method instead

Business Value

• Controls configurator visibility from external code
• Supports dynamic page layouts and workflows
• Enables programmatic user journey management
• Improves performance by removing unused configurators

Usage

// Close the configurator when the user completes a workflow
document.getElementById('finish-button').addEventListener('click', () => {
  saveConfiguration();
  mimeeqApp.utils.closeConfigurator();
  showThankYouMessage();
});

Show modular

Method: mimeeqApp.utils.showModular()

Display a modular configurator that was initially hidden on page load. This enables deferred loading strategies where the configurator only appears when specifically requested by the user.

warning

This method is deprecated and works only for legacy embed version. If you are using web component please use its show() method instead

Usage

// Show the modular configurator when a button is clicked
document.getElementById('design-space-btn').addEventListener('click', () => {
  mimeeqApp.utils.showModular();
});

Show configurator

Method: mimeeqApp.utils.showConfigurator()

Display a standard (non-modular) configurator that was initially hidden on page load. This provides control over when the configurator appears in your user experience.

warning

This method is deprecated and works only for legacy embed version. If you are using web component please use its show() method instead

Usage

// Show the standard configurator when a button is clicked
document.getElementById('configure-product-btn').addEventListener('click', () => {
  mimeeqApp.utils.showConfigurator();
});

Mark option by block name and option code

Method: mimeeqApp.actions.markOptionByBlockNameAndOptionCode(blockName, optionCode)

Programmatically select options using business-friendly identifiers rather than technical IDs. This method provides a simple way to apply predefined configurations or implement guided selling flows using human-readable block names and option codes.

Business Value

• Creates predetermined configurations with simple identifiers
• Supports guided selling with step-by-step option selection
• Enables integration with external systems using business codes
• Simplifies automation of common configurations

Parameters

Name	Type	Description
blockName	string	The display name of the configuration block (e.g., "Fabric", "Frame Color")
optionCode	string	The business code of the option to select (e.g., "OAK", "RED_LEATHER")

Usage

// Select a specific fabric option
await mimeeqApp.actions.markOptionByBlockNameAndOptionCode('Fabric', '6550_PINK');

This method returns a Promise that resolves when the option is successfully selected.

Selecting Multiple Options

For applying complete configurations with multiple options, you can call the method sequentially:

// Apply a predefined configuration when the product initializes
document.addEventListener(
  'mimeeq-3d-product-initialized',
  async () => {
    // Start with parent options that might affect availability of child options
    await mimeeqApp.actions.markOptionByBlockNameAndOptionCode('Fabric', '6550_PINK');
    await mimeeqApp.actions.markOptionByBlockNameAndOptionCode('Frame', 'GREY');
    await mimeeqApp.actions.markOptionByBlockNameAndOptionCode('Arms', 'ARM');
  },
  { once: true },
);

Or use a configuration array and loop through it:

// Configuration array with block name and option code pairs
const config = [
  { codeBlock: 'Fabric', value: '6550_PINK' },
  { codeBlock: 'Frame', value: 'GREY' },
  { codeBlock: 'Arms', value: 'ARM' },
];

// Apply the configuration when the product initializes
document.addEventListener(
  'mimeeq-3d-product-initialized',
  async () => {
    for (const option of config) {
      await mimeeqApp.actions.markOptionByBlockNameAndOptionCode(option.codeBlock, option.value);
    }
  },
  { once: true },
);

Trigger add to cart / show finish panel

Method: mimeeqApp.utils.addToCart()

Programmatically trigger the "add to cart" or "show summary" action for the current configuration. This simulates the user clicking the primary action button at the bottom of the configurator, moving the workflow forward to the next step.

Business Value

• Enables custom buttons or calls-to-action outside the configurator
• Supports automated workflows and guided selling processes
• Integrates configuration completion with external business logic
• Creates flexible user interfaces with custom action triggers

Usage

// Custom "Add to Cart" button outside the configurator
document.getElementById('custom-add-button').addEventListener('click', () => {
  mimeeqApp.utils.addToCart();
});

// Triggered when a customer completes a guided selling flow
function completeGuidedSelling() {
  // Apply final suggested options
  applyRecommendedOptions().then(() => {
    // Trigger the completion action
    mimeeqApp.utils.addToCart();
  });
}