Skip to main content

Building Custom Configurators

Every business is unique, and your product configurator should reflect that. Mimeeq provides the flexibility to create exactly the experience your customers need - from subtle enhancements to complete custom solutions. This guide explores the different customization approaches and helps you choose the right path for your business goals.

Looking for styling customization? If you want to change colors, fonts, borders, or other visual styling, check out our CSS Variables, CSS Parts, and Configurator Customization guides. This guide focuses on adding new functionality or changing how the configurator works.

Why Customize?​

Standard configurators work well, but custom solutions can transform your business:

  • Increase Conversion Rates: Tailor the experience to your specific customer journey
  • Reduce Configuration Errors: Use rules to prevent invalid combinations
  • Stand Out from Competition: Create unique experiences that competitors can't match
  • Support All Product Types: From visual products needing 3D to complex services needing rules
  • Scale Efficiently: Build once, deploy across all your products and channels

Understanding Customization Options​

Mimeeq offers three main customization approaches, each designed for different business needs. Not every product needs 3D visualization - some need complex rules, others need visual configuration, and some need both:

Custom UI​

This approach is for adding new functionality or significantly changing how the configurator works:

  • Adding New Elements: Floating panels, calculators, custom tooltips, or information displays
  • Changing Behavior: Custom option selectors, guided selling flows, or step-by-step wizards
  • Complete Replacement: Build an entirely new interface from scratch, using only our configuration engine

Note: For visual styling changes (colors, fonts, borders, spacing), use our CSS customization options instead - see CSS Variables and CSS Parts. Custom UI is for functional changes, not cosmetic ones.

Business Value: Add industry-specific features that make your configurator more effective for your unique selling process.

Real-World Examples:

  • A furniture retailer adds a room dimension calculator
  • A B2B manufacturer creates a technical specification panel
  • A fashion brand builds a style advisor wizard

3D/2D Visualizer​

Transform your existing product pages with Mimeeq's visualization engine:

  • Seamless Integration: Drop our viewer into your current product pages without changing your UI
  • Platform Agnostic: Works with Shopify, Magento, WooCommerce, or custom-built stores
  • Mobile Ready: Optimized performance for smartphones and tablets
  • Full Control: Your buttons, your layout, our visualization

This approach is perfect when you already have a product page design that works - you just need to add interactive 3D/2D visualization that responds to your existing option selectors.

Business Value: Keep your proven user interface and checkout flow while adding the power of visual configuration. Reduce returns with accurate visualization and increase engagement with interactive 3D.

Real-World Examples:

  • An online retailer replaces static images with interactive 3D on product pages
  • A B2B portal adds visualization to their existing quote builder
  • A mobile app integrates 3D viewing through WebView components

Headless Configurator​

Use Mimeeq's powerful rules engine and configuration logic without any visualization:

  • Configuration Rules: Enforce compatibility between options (e.g., this GPU requires that PSU)
  • Dependencies: Handle complex relationships between components
  • Validation: Ensure all selections result in valid, buildable products
  • Data Access: Get product information, options, and valid combinations

Perfect for products where visualization isn't relevant but configuration logic is critical. Not every product needs 3D - some need robust rules and intelligent guidance instead.

Business Value: Leverage Mimeeq's sophisticated rules engine for any configurable product, whether it's technical equipment, service packages, or event planning.

Real-World Examples:

  • A computer configurator ensuring CPU, GPU, and motherboard compatibility
  • A wedding planning tool with venue, catering, and service dependencies
  • A server configuration tool validating component compatibility
  • An insurance package builder with coverage rules and exclusions

Choosing Your Approach​

Not sure which approach is right for you? Consider these questions:

Business Questions​

What do you want to change?

  • Visual styling (colors, fonts, spacing) → Use CSS Variables and CSS Parts
  • Add new functionality → Custom UI
  • Replace product images with 3D → 3D/2D Visualizer
  • Configure products without visualization → Headless Configurator

What's your primary goal?

  • Match brand guidelines → CSS customization
  • Add business-specific features → Custom UI
  • Add visualization to existing pages → 3D/2D Visualizer
  • Configure complex products without visuals → Headless Configurator

What's your timeline?

  • Hours to days → CSS customization
  • Days to weeks → Light Custom UI or Visualizer
  • Weeks to months → Full Custom UI
  • Strategic initiative → Complete custom solution

Technical Decision Tree​

Is it a visual/styling change?

  • Yes → Use CSS customization (not Custom UI)
  • No → Continue below

Do you want to use Mimeeq's user interface?

  • Yes, but add features → Custom UI
  • No, I have my own → Continue below

Do you need 3D/2D visualization?

Core Concepts​

Before diving into implementation, it's helpful to understand three key concepts that power all customization approaches:

Observers - Real-Time Data Streams​

Think of observers as live data feeds from the configurator. They notify your code whenever something changes, enabling reactive experiences.

Business Application: Update pricing, show inventory, or trigger workflows instantly as customers make selections.

// Example: Watch for price changes
window.mimeeqApp.observers.product.price.subscribe(({ newValue }) => {
  console.log(`New price: ${newValue.price} ${newValue.currency}`);
  // Update your custom price display
  // Send to analytics
  // Check against budget rules
});

Actions - Remote Control for the Configurator​

Actions are commands that control the configurator programmatically. They're like a remote control for every aspect of the configuration experience.

Business Application: Preset configurations for campaigns, sync with external systems, or guide users through complex selections.

// Example: Select a product option
window.mimeeqApp.actions.markOptionByBlockNameAndOptionCode('Color', 'red');
// Set complete configuration
window.mimeeqApp.actions.setConfigurationCode('Color-red&Size-large');
// Take a screenshot
window.mimeeqApp.utils.takeScreenshot();

Events - Lifecycle Notifications​

Events notify you about important moments, such as when the configurator loads or when a customer completes their configuration.

Business Application: Track user behavior, integrate with analytics, or trigger follow-up actions like sending quotes.

// Example: Know when configurator is ready
document.addEventListener('mimeeq-app-loaded', () => {
  console.log('Configurator is ready!');
  // Initialize your customizations
  // Load user preferences
  // Start analytics tracking
});

Getting Started​

Regardless of which customization approach you choose, the basic setup is similar:

  1. Create an Embed Template in your Mimeeq admin panel
  2. Configure the template based on your chosen approach
  3. Add the embed code to your website
  4. Connect your custom code using our APIs

Here's the basic embed structure:

<!-- Mimeeq Embed -->
<mmq-embed 
  short-code="YOUR_PRODUCT_CODE" 
  template="YOUR_TEMPLATE_ID">
</mmq-embed>

<!-- Load Mimeeq -->
<script src="https://cdn.mimeeq.com/read_models/embed/app-embed.js" async></script>

<!-- Your custom code -->
<script>
  document.addEventListener('mimeeq-app-loaded', () => {
    // Configurator is ready - add your customizations here
  });
</script>

Quick Examples​

Here's a taste of what's possible with each approach. Remember, not every product needs visualization - sometimes rules and logic are what matter most:

Custom UI Example: Dynamic Inventory Display​

Show real-time stock levels and delivery estimates:

document.addEventListener('mimeeq-app-loaded', () => {
  // Create inventory status panel
  const panel = document.createElement('div');
  panel.className = 'inventory-panel';
  panel.innerHTML = `
    <h3>Availability</h3>
    <div class="stock-status">
      <span class="status-indicator"></span>
      <span class="status-text">Checking...</span>
    </div>
    <div class="delivery-estimate"></div>
  `;
  document.querySelector('.mmq-container').appendChild(panel);
  
  // Update when configuration changes
  window.mimeeqApp.observers.product.sku.subscribe(({ newValue }) => {
    if (newValue) {
      // Check your inventory system
      checkInventory(newValue).then(status => {
        updateInventoryDisplay(status);
      });
    }
  });
});

Visualizer Example: Ecommerce Integration​

Sync your existing product options with Mimeeq's 3D viewer:

// Your product page option changes
function onColorChange(color) {
  // Update the 3D model to match
  window.mimeeqApp.actions.markOptionByBlockNameAndOptionCode('Color', color);
}

// Your size selector changes
function onSizeChange(size) {
  // Update the 3D model dimensions
  window.mimeeqApp.actions.markOptionByBlockNameAndOptionCode('Size', size);
  
  // Get updated price from Mimeeq
  const price = window.mimeeqApp.observers.product.price.value;
  updatePriceDisplay(price);
}

Headless Example: PC Configuration Rules​

Validate component compatibility without visualization:

// Check if selected components are compatible
window.mimeeqApp.observers.product.selectedOptions.subscribe(({ newValue }) => {
  // Get current selections
  const selections = {};
  newValue.forEach(option => {
    selections[option.blockName] = option.optionCode;
  });
  
  // Check rules (Mimeeq handles the complex logic)
  const isValid = window.mimeeqApp.observers.product.isValid.value;
  
  if (!isValid) {
    // Show which components are incompatible
    showCompatibilityError('Selected GPU requires minimum 750W PSU');
  } else {
    // Show valid configuration
    updateConfigSummary(selections);
  }
});

Implementation Timeline​

Understanding typical timelines helps set realistic expectations:

Immediate (Hours)​

  • CSS customization for colors, fonts, and styling
  • Hide/show elements via embed templates
  • Add custom CSS/JS via embed templates

Quick Wins (1-2 weeks)​

  • Add custom buttons or information panels
  • Integrate visualizer into existing product pages
  • Basic configurator for non-visual products

Standard Projects (1-2 months)​

  • Custom UI features and workflows
  • Full ecommerce platform integration
  • Complex product configurators with rules

Strategic Initiatives (3-6 months)​

  • Complete custom interface design
  • Complex products with extensive rules
  • Industry-specific solutions
  • Enterprise system integration

Next Steps​

Ready to transform your product configuration experience? Here's how to proceed:

  1. Explore Detailed Guides:

  2. Access Additional Resources:

    • Visit help.mimeeq.com for business-focused documentation
    • Contact our team for personalized recommendations
    • Request a custom demo showing your specific use case

  3. Start Building:

    • Use our working examples as starting points
    • Test with your actual products
    • Iterate based on customer feedback

Need Help?​

Our team is here to ensure your success:

  • Technical Support: Available through live chat for implementation questions
  • Solution Consulting: Help choosing the right approach for your business
  • Professional Services: Custom development for complex requirements

Remember, you don't have to build everything at once. Start with the approach that delivers the most immediate value for your business, then expand as needed.