Understanding Mimeeq Embeds: Types, Configuration, and Customization
Content
- What Are Mimeeq Embeds?
- Embed Types Overview
- How to Generate Embed Codes
- Embed Templates Settings
- Embedding Code on Your Website
What Are Mimeeq Embeds?
Embeds are snippets of code that you can place on your website to display Mimeeq 3D configurators or product catalogs. Each embed type serves a specific purpose, from displaying product catalogs to enabling individual product configuration. All embeds are controlled through embed templates, which give you centralized control over styling, behavior, and settings.
Mimeeq provides several types of embeds that allow you to integrate 3D configurators, product lists, B2B baskets, and authentication embeds for user login/registration. This guide covers the available embed types, their capabilities, and how to customize them using embed templates.
Embed Types Overview
Configurator Embeds
Embed Type | Description | Purpose | Indexable |
|---|---|---|---|
Standard Product Configurator | Embeds one specific standard configurator | Most common for e-commerce sites, single product pages | ✅ |
Modular Product Configurator | Embeds one specific modular configurator | Most common for e-commerce sites, single product pages | ✅ |
Product List | Embeds catalog of all your active configurators | Product catalogs | ❌ |
Product Group | Embeds grouped product configurators | Product catalogs, category pages | ❌ |
Other Embeds
Embed Type | Description |
|---|---|
Basket Embed | Embeds the Mimeeq Basket as part of another embed (product menu, configurator) or as a standalone element on any page of your website. |
Authentication Embed | Authentication embed for user login/registration, password reset, etc |
Favorites List | Embeds user's saved items configuration. Require user authentication |
How to Generate Embed Codes
Standard Product Configurator
The Standard Configurator Embed displays a single configurable product. This is ideal for dedicated product pages where you want to showcase one specific item with all its configuration options.
How to Generate:
- Navigate to the specific standard configurator in Mimeeq Admin
- Click "Copy Embed Code" on the configurator page
- Select your Embed Template
- Configure language and price group settings (overrides Embed Template default settings)
- Copy the embed code
Modular Product Configurator
The Standard Modular Configurator Embed displays a single modular configurable product. By default, modular configurators open in a modal overlay to provide a full-screen experience, but you can change these settings in Embed Template)
How to Generate:
- Navigate to the specific modular configurator in Mimeeq Admin
- Click "Copy Embed Code" on the configurator page
- Select your Embed Template
- Configure language and price group settings (overrides Embed Template default settings)
- Copy the embed code
Product List
The Product List Embed displays a catalog of all your active products. This is the most commonly used embed type for showcasing your entire product range.
Key Features:
- Displays all active products
- Supports filtering by categories and search
- Includes sorting options (A-Z, Z-A)
- Adjustable tile sizes (large or small)
- Optional favorites functionality
How to Generate:
- Navigate to your product list in Mimeeq Admin
- Click "Copy Embed Code"
- Select your Embed Template
- Optionally specify language and price group (overrides Embed Template default settings)
- Copy the embed code
Product Group
The Product Group Embed displays a specific group of all your active products. Ideal for product categories pages.
How to Generate:
- Navigate to Settings → Data → Product Groups
- Create a product group (e.g., "Armchairs")
- Open the product group and set Status to Active, add products to the group
- Click "Copy Embed Code"
- Select your Embed Template
- Optionally specify language and price group (overrides Embed Template default settings)
- Copy the embed code
Basket Embed
The Mimeeq Basket can function independently on any page of your website, not just product pages. Read our Mimeeq Basket System help article for detailed configuration and embedding instructions.
Authentication Embed
The Auth embed allows you to add user login and registration functionality directly to your website. This enables features like using favorites or Mimeeq Basket.
What the Auth Embed Includes
- User login form
- New user registration
- Password recovery option
- Automatic session management
When authentication is enabled:
- Users can save favorite products and configurations to their account
- Display user-specific pricing based on their account settings
- Show specific products or features only to authenticated users
- Show Basket only for logged-in users
How to Generate Auth Embed
- Navigate to Settings → Code → Login Code in Mimeeq Admin
- Ensure authentication is enabled for your account
- Click "Copy Embed Code"
- Select your Language
- Optionally override Theme settings (button background colour and button text colour)
- Copy the embed code
Favorites List
The Favorites Embed displays products that logged-in users have marked as favorites. This is particularly useful for scenarios where users need to save and return to specific product configurations. The Favorites Embed can be embedded as dedicated embed or within Product List Embed.
Option 1: Dedicated Favorites Embed
- Navigate to Settings → Code → Favorites Code in Mimeeq Admin
- Select your Embed Template
- Configure language and price group settings (overrides Embed Template default settings)
- Copy the embed code
Option 2: Favorites within Product List
- When creating a Product List embed, ensure you have authentication enabled
- In your Embed Template Settings, make sure Hide Favorites option is disabled
- Logged-in users will automatically see a favorites section in the product list controls
- Users can mark products as favorites directly from the product list
Embed Templates Settings
Embed templates are the control center for your embeds. They allow you to define consistent styling, behavior, and settings that can be applied across multiple embeds. Each template has a unique ID that you reference when generating embed codes, allowing centralized control over multiple embeds across your website.
Why Multiple Templates?
Imagine you're running an e-commerce furniture company. You'll need different embed experiences for different parts of your business:
Template 1: "Product Page with Pricing" This is your main selling template. When customers visit your product pages, they see the full configurator with all customization options, live pricing updates, and an add-to-cart button. This template includes everything needed for a complete shopping experience.
Template 2: "Canvas Only View" Sometimes you just want to showcase your products without all the controls. This template displays only the 3D product preview - perfect for your homepage hero banner, blog posts about design trends, or social media embeds. Visitors can rotate and view the product but won't see prices or configuration options, keeping the focus on the visual appeal.
Template 3: "B2B Partner Portal" Your business partners need a different experience. This template is designed for your dealer network where they can configure products for their clients, save multiple configurations to lists, and request bulk quotes instead of seeing retail prices. It requires login authentication and shows partner-specific pricing tiers.
Creating a New Embed Template
- Navigate to Settings → Data → Embed Templates in Mimeeq Admin
- Click "Create New Template"
- Assign a template name and ID
- Configure your settings (detailed below)
- Save and use the template ID in your embed code
Template Configuration Options
Basic Configuration
Core settings that define how your embedded configurator is identified and behaves within your website.
Settings | Description |
|---|---|
Name | Internal identifier for the Embedded Template (e.g., "Shopify Embedded Template USD" or "B2B Portal with Basket") |
ID | Auto-generated unique identifier. It can be changed manually, but doing so may break existing integrations if the template is already in use |
Language | Dropdown selector for all available languages in your account |
Price List Group | Assigns a specific price list group to the Embedded Template |
URL Navigation | When enabled, updates browser URL as users navigate, allowing back/forward functionality and direct product state linking |
Render at Page Load | Controls whether configurator loads automatically or requires manual trigger (e.g., button click) |
Style Settings
Control the visual presentation and display behavior of your configurator, including modal windows and responsive design options.
Settings | Description |
|---|---|
Render List in Modal | Displays the full product list in a modal window |
Render Variant in Modal | Shows single configurators from the list in a modal window |
Render Modular in Modal | Presents modular products in a modal window |
Use Default Page Font | When on, uses website font; when off, uses default Mimeeq font |
Adjust to Container | Configurator automatically adjusts to viewport size. When off, allows specific dimension values |
Use Custom UI | Available only with custom UI functionality enabled |
Modal Customization (appears when modal options are enabled for List, Variant and Modular)
Fine-tune the appearance and behavior of modal windows when modal display options are enabled.
Settings | Description |
|---|---|
Modal Width/Height | Custom dimensions for variant, modular, and list modals |
Scroll Bar Placement | Controls where the scroll bar appears in modals |
Custom Class Name | Add custom CSS classes to each modal type |
Product List Settings
Configure how products are displayed and filtered in the product selection interface.
Settings | Descriptio |
|---|---|
Show Menu Controls | Displays category filters and search functionality for products |
Hide Favorites | Removes favorites option (useful when authorization embed isn't used) |
E-commerce (Basket)
For basket functionality and e-commerce integration settings, please refer to our comprehensive Basket Embed Guide which covers all configuration options including custom pricing, Add to Cart button placement, integration types, and URL settings.
Interface Elements (Hide Options)
Customize which UI elements are visible to users on the canvas. Toggle these options to create a cleaner, more focused interface by hiding unnecessary features.
Settings | Description |
|---|---|
Hide Model Export | Removes 3D model export functionality. To display the 3D Export, ensure it's enabled in your account settings as well as in your embed template. Even if enabled in the embed template, the 3D Export button won't appear if it's disabled in your account settings. |
Hide Export Image | Disables image export option |
Hide Share on Canvas | Removes sharing functionality |
Hide Dimensions | Hides dimension display |
Hide Redo | Removes redo button |
Hide Collection Name | Hides collection name display |
Hide Option Panel | Removes options panel |
Hide Price | Disables price display |
Hide PDF on Finish Screen | Removes PDF generation on summary screen |
Hide Tabs | Hides tab navigation under the 3D canvas |
Hide Warning 3D | Removes warning icon on a canvas |
Hide Finish Button | Removes finish button |
Hide Zoom All Button | Removes zoom all functionality |
Hide Hotspots | Disables hotspot indicators |
Hide Favourites | Removes the favourites functionality |
Hide AR Icon | Disables augmented reality viewing option |
Hide PDF on Canvas | Removes PDF export option from the 3D canvas |
Hide Undo | Disables the undo action button |
Hide Reset | Removes the reset configuration button |
Hide Product Name | Hides product name display |
Hide Quantity | Removes quantity selector |
Hide Delivery Info | Excludes delivery information |
Hide Share on Finish Screen | Removes sharing options from the summary screen |
Hide Related Products | Disables related product suggestions |
Hide Modular Warnings | Removes warnings modals for modular product configurations |
Hide Finish Screen | Skips the summary screen entirely |
Hide Full Screen Button | Removes the fullscreen viewing option |
Hide Drag Information | Disables drag interaction hints/tooltips |
PDF Settings
Customize the appearance and content of generated PDF documents.
Settings | Description |
|---|---|
Font Family | Custom font specification to match brand (defaults to Mimeeq font if empty) |
Hide Quantity | Removes quantity from PDF |
Hide Product Name | Excludes product name from PDF |
Hide Quantity Breaks | Removes quantity break information |
Hide Delivery Information | Excludes delivery details |
Hide Price | Removes pricing from PDF |
Hide Logo | Hides logo (if uploaded in account) |
Hide Description | Excludes product descriptions |
Hide SKU Code | Removes SKU codes from PDF |
Theme
Override default visual styling to match your brand colors (if none uses default Theme settings)
Settings | Description |
|---|---|
Button Color Override | Override default button background color |
Button Text Color Override | Override default button text color |
Background Color Override | Override default default color |
Basket Button Color Override | Override default basket button background color |
Option Group Highlight Color Override | Override default group background color |
Option Group Hover Color Override | Override default group hover color |
Opened Group Text Color Override | Override default group text color |
Hover Group Text Color Override | Override default group hover text color |
Advanced Customization
Add custom code and functionality for advanced implementations and unique UI.
Settings | Description |
|---|---|
Custom CSS | Upload custom CSS code for styling |
Custom JS | Add custom JavaScript code. Mimeeq embeds provide JavaScript events for product selection, configuration changes, add to basket actions, basket submissionsRefer to the Mimeeq JavaScript API documentation for complete event reference. |
Embed Custom UI | Select from available custom UI options (requires custom UI package) |
Embedding Code on Your Website
After setting up your embed templates and configuring all the necessary settings, you're ready to embed Mimeeq products on your website.
Code Structure
Every embed consists of two parts:
<!-- Container with short code -->
<div data-mimeeq-product="SHORT_CODE"></div>
<!-- Script loader -->
<script src="https://mimeeq-embed-url.js"></script>
1. Shortcode
The shortcode is a unique identifier (e.g., GP9V9M) that references your specific product or product list configuration.
Example use case: You might store different shortcodes in your CMS and dynamically insert them based on which category page a user visits, allowing you to show relevant products without changing the HTML structure.
2. Full HTML Snippet
The snippet is a complete HTML code block (typically 2-3 lines) that includes the Mimeeq script and your configuration parameters.
Example use case: Use full snippet for static website implementations to embed single products or product list.
Basic Embedding Process
- Copy the embed code from Mimeeq Admin
- Paste it into your website:
- For shortcodes: Insert into your CMS's dynamic content field
- For full snippets: Paste directly into your HTML where you want the configurator to appear
- Verify the embed by loading your webpage - the Mimeeq configurator should appear according to your template settings
Support
If you encounter issues not covered in this guide or need assistance with custom implementations, please contact Mimeeq support or consult the complete documentation at Mimeeq Docs.
Updated on: 05/12/2025
Thank you!