Embed Templates
Embed templates are powerful configuration profiles that define how the Mimeeq configurator appears, behaves, and integrates with your website. They allow you to create consistent, reusable settings that can be applied across your product configurators while maintaining precise control over the user experience.
What Are Embed Templates?
An embed template is a named collection of settings that controls all aspects of a Mimeeq configurator embed, from visual appearance to functional behavior. Templates are created and managed in the Mimeeq admin panel and can be referenced by their ID when embedding configurators on your website.
Templates serve several important purposes:
- Consistency: Ensure uniform appearance and behavior across multiple product configurators
- Reusability: Define settings once and apply them to many products
- Specialization: Create purpose-specific configurations for different contexts and channels
- Maintainability: Update configurations in one place rather than modifying multiple embed codes
- Flexibility: Switch between different configurations dynamically without rebuilding your site
Template Structure
Embed templates contain a comprehensive set of configuration options organized into several categories:
Core Properties
Property | Description |
---|---|
embedTemplateId | Unique identifier for the template |
embedTemplateName | Human-readable name for the template |
embedTemplateUniqueName | Optional machine-friendly unique name |
publicPriceListGroup | Optional price list group to use for public pricing |
hash | Content hash for cache validation |
language | Default language code for the configurator interface |
UI Visibility Settings
Templates allow you to control the visibility of every UI element in the configurator through boolean flags:
// Example of UI visibility settings
{
"hideExport": true, // Hide the 3D model export button
"hideFavourites": false, // Show the favorites functionality
"hideExportImage": true, // Hide the export image button
"hideARIcon": false, // Show the AR viewing option
"hideUndo": false, // Show the undo button
"hideRedo": false, // Show the redo button
// ... many more visibility options
}
For a complete list of visibility options, see the UI Visibility Configuration section below.
Modal Configuration
Templates can configure if and how the configurator displays in a modal:
{
"renderInModal": true, // Display in a modal
"modalClassName": "custom-modal", // Custom CSS class
"modalOverflow": "INSIDE", // How scrolling behaves
"modalHeightUnit": "percent", // Height unit (px, %, vw, etc.)
"modalHeightValue": 90, // Height value
"modalWidthUnit": "percent", // Width unit
"modalWidthValue": 95 // Width value
}
Theming and Styling
Control colors, fonts, and visual appearance:
{
"buttonColor": "#0066cc", // Primary button color
"buttonTextColor": "#ffffff", // Button text color
"backgroundColor": "#f5f5f5", // Background color
"basketButtonColor": "#00aa55", // Basket button color
"useDefaultFont": false, // Use website's font
// Option group styling
"group": {
"activeColor": "#0066cc",
"hoverColor": "#e6f0fa",
"openedGroupTextColor": "#ffffff",
"hoverGroupTextColor": "#333333",
"optionGroupHighlightColor": "#ffcc00",
"optionGroupHoverColor": "#f0f7ff"
}
}
E-commerce Configuration
Set up shopping and pricing behavior:
{
"basket": true, // Enable basket/cart functionality
"addToCartPlacement": "FINISH", // Where to show the add to cart button
"addToCartPlacementModular": "SUMMARY_SCREEN", // For modular products
"exploreProductsLocation": "/products", // Where to go after clicking "Explore"
"viewBasketOnlineLocation": "/cart", // Where to go for basket view
"useCustomPricing": false, // Use custom pricing from your system
"basketForLoggedInOnly": false // Restrict basket to authenticated users
}
Custom Code Integration
Embed templates can include custom CSS and JavaScript:
{
"customCss": ".option-panel { border-radius: 8px; }",
"useCustomCss": true,
"customJs": "console.log('Template loaded'); trackEvent('configurator_view');",
"useCustomJs": true
}
Custom UI Integration
For advanced implementations, configure a fully custom UI:
{
"customUi": true,
"customUiId": "my-custom-ui-id",
"useCustomVersion": true,
"customUiVersionId": "v1.2.3",
"customUiMainFiles": ["main.js", "styles.css"],
"customUiTemplate": "<div id='custom-configurator'></div>"
}
PDF Export Configuration
Control what appears in generated PDF exports:
{
"pdf": {
"hideQuantity": false,
"hideQuantityBreaks": true,
"hidePrice": false,
"showLogo": true,
"hideDescription": false,
"hideSku": false,
"hideProductName": false,
"hideDeliveryInfo": false,
"fontFamily": "Open Sans, sans-serif"
}
}
UI Visibility Configuration
One of the most powerful aspects of embed templates is fine-grained control over UI elements. Here's a complete reference of visibility options:
Property | Description | Default |
---|---|---|
hideExport | Hides the 3D model export functionality | false |
hideFavourites | Hides the favorites functionality | false |
hideExportImage | Hides the export image button | false |
hideARIcon | Hides the AR (Augmented Reality) viewing option | false |
hideUndo | Hides the undo button | false |
hideRedo | Hides the redo button | false |
hideHistory | Hides the configuration history panel | false |
hideCollectionName | Hides the collection name display | false |
hideReset | Hides the reset button | false |
hideProductName | Hides the product name display | false |
hideQty | Hides the quantity selector | false |
hidePrice | Hides the price display | false |
hideOptionPanel | Hides the options configuration panel | false |
hideDelivery | Hides the delivery time information | false |
hidePdfOnFinish | Hides the PDF generation option on the finish screen | false |
hideShareOnCanvas | Hides the share button on the canvas view | false |
hideShareOnFinish | Hides the share button on the finish screen | false |
hidePdfOnCanvas | Hides the PDF generation button on the canvas view | false |
hideTabs | Hides the product tabs section | false |
hideRelated | Hides the related products section | false |
hideControls | Hides the canvas controls (zoom, rotate, etc.) | false |
hideFooter | Hides the footer element | false |
hideHeader | Hides the header element | false |
hideDimensions | Hides the dimensions display on the 3D model | false |
hideWarning3d | Hides the 3D warning message for users | false |
hideFinish | Hides the finish/complete configuration button | false |
hideFinishScreen | Hides the finish screen that appears after completing configuration | false |
hideZoom | Hides the zoom controls | false |
hideConfigurator | Hides the entire configurator interface | false |
hideFullScreen | Hides the fullscreen toggle button | false |
hideHotSpots | Hides the hotspot indicators on the 3D model | false |
hideWarningIcons | Hides warning icons throughout the interface | false |
hideFavouritesButton | Specifically hides the favorites button | false |
cartLoaderOnly | Shows only the cart loader and hides other UI elements | false |
hideMeshHighlight | Disables highlighting of meshes on hover or selection | false |
hideDragInfo | Hides the drag operation information tooltip | false |
hideZoomButtons | Hides the zoom in/out buttons | false |
Creating and Managing Templates
Templates are created and managed through a user-friendly GUI in the Mimeeq admin panel. You don't need to work with JSON directly - the admin panel provides intuitive controls for all settings.
Using the Admin Panel Interface
Here's how to get started:
- Log in to your Mimeeq admin panel
- Navigate to Settings → Embed Templates
- Click "Create New Template"
- Provide a descriptive name for your template
- Configure the settings using the intuitive interface
- Save the template
User-Friendly Controls
The template editor provides appropriate controls for each setting type:
- Toggle switches for boolean options (hide/show elements)
- Text inputs for names, classes, and custom code
- Color pickers for all color settings with visual feedback
- Dropdown menus for enumerated options like languages and placements
- Radio buttons for exclusive choices
- Grouped sections for logical organization of related settings
Real-Time Preview
One of the most powerful features of the template editor is the integrated real-time preview. As you make changes to any setting:
- The preview updates instantly to show the effect of your change
- You can see exactly how UI elements appear with your configuration
- Color changes, visibility toggles, and layout adjustments are displayed immediately
- You can test interactions directly in the preview to verify behavior
This visual feedback loop makes template creation intuitive and efficient, allowing you to experiment with different configurations and immediately see the results without having to save the template and test it separately.
The real-time preview ensures that what you see in the editor is exactly what your users will experience, eliminating guesswork and reducing the need for multiple revision cycles.
Once created, you can view, edit, duplicate, or delete templates from this same section. Each template is assigned a unique ID that you'll use when embedding the configurator.
Applying Templates
Templates can be applied to Mimeeq embeds in multiple ways:
Static Assignment
The simplest method is to specify the template ID directly in your embed code:
<mmq-embed short-code="ABC123" template="template_id_12345"> </mmq-embed>
This permanently assigns the template to the embed unless changed.
Dynamic Assignment
For more flexibility, you can set the template attribute programmatically:
// Get a reference to the embed
const configurator = document.getElementById('my-configurator');
// Apply a template
configurator.setAttribute('template', 'template_id_12345');
This allows you to change templates based on user actions, preferences, or context.
Modifying Templates Programmatically
While you can't modify the contents of a template directly from your website (templates are managed through the Mimeeq admin panel), you can override specific template settings by setting additional attributes on the embed:
<mmq-embed short-code="ABC123" template="template_id_12345" hide-price accent-color="#ff0000">
</mmq-embed>
This applies the template but overrides the price visibility and accent color settings.
Template Capabilities and Use Cases
Embed templates enable a wide range of customization possibilities for different business scenarios:
Multiple Sales Channels
Create different templates for different sales channels:
- Retail Template: Shows retail pricing, simplified options, consumer-friendly language
- Dealer Template: Displays dealer pricing, advanced options, technical specifications
- Wholesale Template: Custom pricing, bulk ordering options, specialized discounts
User Experience Levels
Tailor the interface based on user expertise:
- Beginner Template: Simplified interface with guidance and tooltips
- Advanced Template: Full feature set with technical options and shortcuts
- Expert Template: Specialized tools and advanced configuration capabilities
Device Optimization
Optimize the configurator for different devices:
- Desktop Template: Full-featured interface with detailed controls
- Tablet Template: Touch-optimized with adjusted UI element sizing
- Mobile Template: Simplified, focused interface with mobile-specific optimizations
Context-Specific Presentation
Adapt the configurator to different presentation contexts:
- In-Page Template: Embedded directly into your product pages
- Modal Template: Opens in a modal dialog for focus without leaving the page
- Kiosk Template: Full-screen display with simplified controls for in-store use
Brand Variations
Maintain consistent branding across different sites or sub-brands:
- Primary Brand Template: Main brand colors and styling
- Sub-Brand Template: Adapted colors and styling for affiliated brands
- White Label Template: Neutral styling for reseller or OEM scenarios
Pricing Strategies
Support different pricing strategies:
- Standard Pricing Template: Regular retail pricing display
- Promotional Template: Highlighting discounts and special offers
- Subscription Template: Monthly pricing instead of purchase price
- Rental Template: Daily/weekly/monthly rental rates
Advanced Template Features
Custom UI Templates
For the highest level of customization, templates can configure a fully custom UI:
{
"customUi": true,
"customUiTemplate": `
<div class="custom-configurator">
<div class="canvas-container"></div>
<div class="options-panel"></div>
<div class="controls">
<button class="zoom-in">+</button>
<button class="zoom-out">-</button>
</div>
</div>
`
}
This allows you to completely replace the standard Mimeeq UI with your own HTML structure while still leveraging the Mimeeq configuration engine.
Custom JavaScript Integration
Templates can include custom JavaScript that extends the configurator's functionality:
{
"customJs": `
// Listen for option changes
window.mimeeqApp.observers.product.selectedOptions.subscribe(({newValue}) => {
// Integrate with external systems
sendToAnalytics('option_changed', newValue);
// Custom validation
if (newValue.some(option => option.id === 'restricted-option')) {
showWarning('This option requires approval');
}
});
`,
"useCustomJs": true
}
This enables integration with analytics, CRMs, ERPs, or other business systems.
CSS Customization
Fine-tune the visual appearance with custom CSS:
{
"customCss": `
.option-panel {
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.option-item:hover {
background: var(--my-brand-hover-color, #f5f5f5);
transform: translateY(-1px);
transition: all 0.2s ease;
}
@media (max-width: 768px) {
.option-panel {
max-height: 50vh;
}
}
`,
"useCustomCss": true
}
This allows for detailed styling beyond the basic color settings.
Best Practices
Template Naming Convention
Establish a clear naming convention for your templates to make them easily identifiable:
- Include the purpose or context (e.g.,
retail-desktop-standard
) - Consider including version information if you iterate frequently
- Use consistent prefixes for related templates (e.g.,
brand1-
,brand2-
)
Template Organization
Group your templates logically in the admin panel:
- Create a clear hierarchy (e.g., by channel, device, or brand)
- Document the purpose and unique features of each template
- Regularly review and prune unused templates
Performance Considerations
- Limit the number of templates to what's truly necessary
- Be cautious with custom JavaScript that might impact performance
- Test template switching with realistic user scenarios
Testing and Validation
- Test each template across different browsers and devices
- Verify that all features work as expected in each template
- Conduct usability testing with real users for important templates
Technical Considerations
Template Caching
Templates are cached in the browser for performance. When making changes to a template:
- The changes may not be immediately visible due to caching
- You may need to clear your browser cache or use incognito mode for testing
- Consider incrementing version numbers in template names for significant changes
Template Loading Sequence
When a Mimeeq embed loads with a template:
- The embed initializes with default settings
- The template is loaded and applied, potentially causing a visual refresh
- The
mimeeq-app-loaded
event fires when the application is fully loaded
For the smoothest experience, consider using loading indicators during this process.
Error Handling
If a template ID is invalid or unavailable:
- The configurator will fall back to default settings
- No error is displayed to the user
- Check your browser console for warning messages
Always verify template IDs in test environments before deploying to production.
Getting Support
If you encounter issues with templates or need assistance creating specialized templates:
- Refer to the Embed Options documentation for detailed property references
- Use the live chat feature in the Mimeeq admin panel
- Contact Mimeeq support for personalized assistance
Conclusion
Embed templates provide a powerful mechanism for customizing the Mimeeq configurator to match your specific business needs. By creating and managing templates strategically, you can deliver tailored product configuration experiences across different contexts while maintaining consistency and reducing maintenance overhead.
Whether you're looking to create simple visual variations or implement complex behavioral differences, templates offer the flexibility and control needed to achieve your goals.