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?
- Yes → 3D/2D Visualizer
- No, just configuration rules → Headless Configurator
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:
- Create an Embed Template in your Mimeeq admin panel
- Configure the template based on your chosen approach
- Add the embed code to your website
- 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:
-
Explore Detailed Guides:
- Custom UI Guide - From simple additions to complete interfaces
- 3D/2D Visualizer Guide - Integrate visualization into any platform
- Headless Configurator Guide - Power any channel with configuration logic
- Custom Pricing Integration - Implement your pricing rules
-
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
-
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.