Skip to main content

Interface: ConfigObservers

Observers for tracking embed settings and UI state.

This group of observers provides data about the current embed settings, including UI visibility options, customer configurations, basket settings, and canvas properties. These observers are essential for customizing the user interface, adapting to customer-specific settings, and managing the overall presentation of the embed.

Properties​

basketConfig​

basketConfig: Observable<InterfaceBasketConfig>

Configuration settings for the basket functionality.

This observable emits settings related to the shopping basket/cart functionality, including whether the configurator is in basket mode, collection IDs for cart operations, and path configurations for basket-related actions.

Example​

window.mimeeqApp.observers.config.basketConfig.subscribe(({ newValue }) => {
  if (newValue) {
    // Determine if we're in basket mode
    const isBasketMode = newValue.isBasket;

    // Update UI elements based on basket mode
    document.getElementById('add-to-cart-btn').style.display =
      newValue.cartAtFinish ? 'block' : 'none';

    // Store the collection ID for later use in cart operations
    if (newValue.collectionId) {
      window.collectionId = newValue.collectionId;
    }
  }
});

canvasBackground​

canvasBackground: Observable<undefined | string>

The current background color or image of the canvas.

This observable emits the current background setting for the 3D canvas, which can be a color value or undefined if using the default background. This can be used to coordinate UI elements with the canvas background.

Example​

window.mimeeqApp.observers.config.canvasBackground.subscribe(({ newValue }) => {
  if (newValue) {
    // Adapt UI elements to match or contrast with the canvas background
    const isDarkBackground = isColorDark(newValue);
    document.getElementById('canvas-controls').classList.toggle(
      'light-controls', isDarkBackground
    );
  } else {
    // Default background is being used
    document.getElementById('canvas-controls').classList.remove('light-controls');
  }
});

customerConfig​

customerConfig: Observable<CustomerConfigState>

Customer-specific configuration settings.

This observable emits the configuration state specific to the current customer, including branding, permissions, feature limits, and default settings. This information is crucial for adapting the experience to match customer-specific requirements and styling.

Example​

window.mimeeqApp.observers.config.customerConfig.subscribe(({ newValue }) => {
  if (newValue) {
    // Apply customer's accent color to custom elements
    const accentColor = newValue.theme.accentColor;
    document.documentElement.style.setProperty('--custom-accent', accentColor);

    // Check if the customer can use modular products
    const canUseModular = newValue.limits?.canModularUse;
    document.getElementById('modular-features').style.display =
      canUseModular ? 'block' : 'none';
  }
});

embedInstanceId​

embedInstanceId: Observable<string>

The unique identifier for the current embed instance.

This observable emits the ID of the current embed instance, which can be used to track events and associate data with a specific configurator instance, especially when multiple configurators are used on the same page.

Example​

window.mimeeqApp.observers.config.embedInstanceId.subscribe(({ newValue }) => {
  if (newValue) {
    console.log(`Current embed instance ID: ${newValue}`);

    // Store the ID for analytics
    window.currentEmbedId = newValue;

    // Use the ID to isolate event listeners to this instance
    document.querySelector(`[data-embed-id="${newValue}"]`)
      .addEventListener('click', handleClick);
  }
});

uiConfig​

uiConfig: Observable<UiVisibilityConfig>

Configuration for UI element visibility and behavior.

This observable emits the current UI visibility settings that control which interface elements are shown or hidden in the configurator. These settings are typically determined by the options passed to the embed element when mounting the configurator.

Use this to dynamically adjust your custom UI based on which standard controls are visible or hidden.

Example​

window.mimeeqApp.observers.config.uiConfig.subscribe(({ newValue }) => {
  if (newValue) {
    // Hide your custom export button if the standard one is hidden
    document.getElementById('custom-export').style.display =
      newValue.hideExport ? 'none' : 'block';

    // Adjust layout based on footer visibility
    document.getElementById('main-container').classList.toggle(
      'no-footer', newValue.hideFooter
    );
  }
});