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:

1. Log in to your Mimeeq admin panel
2. Navigate to Settings → Embed Templates
3. Click "Create New Template"
4. Provide a descriptive name for your template
5. Configure the settings using the intuitive interface
6. 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:

1. The embed initializes with default settings
2. The template is loaded and applied, potentially causing a visual refresh
3. 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.