Architecture Overview

Mimeeq is a cloud-hosted 3D product configurator platform. You embed it on your website, your customers configure products visually, and your code reacts to their choices through events, observers, and APIs.

This page maps the key building blocks and how they connect. Each section links to the detailed documentation.

The Big Picture

  ┌─────────────────────────────────────────────────────────────────┐
  │  YOUR WEBSITE                                                   │
  │                                                                 │
  │  ┌───────────────┐   ┌───────────────┐                         │
  │  │  <mmq-embed>  │   │  <mmq-auth>   │    Web Components       │
  │  └──────┬────────┘   └──────┬────────┘                         │
  │         │                   │                                   │
  │         ▼                   ▼                                   │
  │  window.mimeeqApp    window.mimeeqAuth    JavaScript API       │
  │    ├── .observers     ├── .authorization                       │
  │    ├── .actions        └── .initialize                         │
  │    └── .utils                                                  │
  │         │                                                       │
  │    ┌────┴────────────────────────┐                             │
  │    │  Events (CustomEvent on     │    Browser Communication    │
  │    │  document)                  │                              │
  │    │  ├── outbound: configurator │                             │
  │    │  │   dispatches to your code│                             │
  │    │  └── inbound: your code     │                             │
  │    │      dispatches to control  │                             │
  │    │      the configurator       │                             │
  │    └─────────────────────────────┘                             │
  │                                                                 │
  └─────────────────────────────────────────────────────────────────┘
                        │
                        │ HTTPS
                        ▼
  ┌─────────────────────────────────────────────────────────────────┐
  │  MIMEEQ CLOUD                                                   │
  │                                                                 │
  │  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐         │
  │  │ Admin Panel   │  │  REST APIs   │  │  Webhooks    │         │
  │  │ (UI for      │  │ Admin + Embed│  │ (server →    │         │
  │  │  products,   │  │ (server-side │  │  your server)│         │
  │  │  templates,  │  │  integration)│  │              │         │
  │  │  pricing)    │  │              │  │              │         │
  │  └──────────────┘  └──────────────┘  └──────────────┘         │
  │                                                                 │
  │  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐         │
  │  │ CDN          │  │ 3D Engine    │  │ Auth          │         │
  │  │ (assets,     │  │ (Babylon.js) │  │ (AWS Cognito) │         │
  │  │  embed JS)   │  │              │  │              │         │
  │  └──────────────┘  └──────────────┘  └──────────────┘         │
  │                                                                 │
  └─────────────────────────────────────────────────────────────────┘

Client-Side Building Blocks

Web Components

Two HTML custom elements are your primary integration surface:

Component	Purpose	Docs
`<mmq-embed>`	Renders configurators, product lists, favourites, and basket	Components
`<mmq-auth>`	Handles login, signup, password reset, and profile UI	Authentication

Both are loaded from a single script tag. The embed code — including the short-code and template attributes — is generated in the admin panel and copy-pasted into your page.

Embed Templates

An embed template is a named set of configuration options that controls appearance, behavior, and integration mode for an <mmq-embed> instance. Templates are created in the admin panel and referenced by ID in your embed code. They control things like which UI elements are visible, whether basket mode is enabled, pricing source, language, and custom CSS/JS.

JavaScript API

When the embed loads, it exposes three global objects:

Object	Available after	Purpose	Docs
`window.mimeeqApp`	`mimeeq-app-loaded` event	Configurator control: observers, actions, utils, config	Web API Reference
`window.mimeeqAuth`	`mimeeq-auth-loaded` event	Authentication: sign in/out, user data, session management	Auth API Reference
`window.mimeeqEmbedEnv`	Script load	Environment config: CDN paths, API endpoints, Cognito settings	Internal — used by components automatically

mimeeqApp is the API you'll use most. It has three main branches:

Observers — reactive data streams that emit current state and update on every change (pricing, product data, selected options, etc.)
Actions — methods to change configuration, take screenshots, trigger finish events, control the 3D camera, etc.
Utils — helper functions for cart operations, short code generation, and configurator visibility

Events

Mimeeq communicates through standard DOM CustomEvent objects dispatched on document. Events flow in two directions:

Outbound — the configurator tells your code what happened (option selected, price changed, product added to cart). Listen with document.addEventListener().
Inbound (host-triggered) — your code tells the configurator what to do (show/hide loader, open summary). Dispatch with document.dispatchEvent().

See Events for the full catalog organized by workflow.

Events vs Observers

Events are point-in-time notifications — "the user just selected option X." Observers are continuous state streams — "here is the complete current configuration." Most integrations use both: events for analytics and triggering side effects, observers for keeping UI in sync. See Observers — Events vs Observers for a comparison.

Server-Side Building Blocks

REST API

Mimeeq provides two REST APIs for server integrations:

API	Base URL	Authentication	Use it for
Admin API	`https://admin.mimeeqapi.com/v1`	Admin key in `Authorization: Bearer …`	Overall Mimeeq setup and administrative data: catalog organization, global option sets, pricing data, and customer records; supported operations vary by resource
Embed API	`https://mimeeqapi.com`	Embed API key in `X-API-KEY`	Bring products customized by users into business workflows using their full configuration details and calculated prices

The Admin API works with the setup and administrative resources behind the configurator. The Embed API retrieves full configuration details for products customized by users so your systems can use those products in ecommerce, order processing, or other downstream workflows. It works with configured product data rather than managing account settings or product setup. For example, maintain a shared option set through the Admin API, then use the Embed API to retrieve the options selected for a particular configuration and its calculated price.

Manage both key types under Settings → Customer settings → API Management → API Keys. See the Authorization Guide for setup and the live Admin reference for current operations.

Webhooks

Webhooks push notifications from Mimeeq to your server when data changes — product created/updated/deleted, basket submitted, contacts and companies changed. They're configured in the admin panel and include retry logic and optional authentication headers.

Admin Panel

The admin panel is where business users configure everything that drives the developer-facing APIs: products, 3D models, option sets, materials, pricing, rules, embed templates, auth settings, and webhooks. Developers don't typically work in the admin panel directly, but understanding what's configured there helps explain the data you see through the APIs.

For admin panel documentation, see help.mimeeq.com.

Product Types

Mimeeq supports two main product types, each with different API behavior:

Type	Description	Key difference
Standard	A single product configured by selecting options across blocks	`selectedOptions` has one entry keyed `"SINGLE_PRODUCT_ID"`
Modular	A scene where multiple component products are placed, moved, and configured	`selectedOptions` has entries per instance ID; modular-specific events and observers

See Product Types for full details.

Data Flow: From Configuration to Cart

A typical integration follows this path:

Page loads → <mmq-embed> renders → mimeeq-app-loaded fires → your code subscribes to observers
User configures the product → observers update continuously → your UI stays in sync
User clicks "Add to Cart" → mimeeq-add-to-cart event fires with full payload → your code creates a cart line item
Optionally, your server calls the Embed API to verify the configuration price
Optionally, webhooks notify your server when basket is submitted

Where to Go Next

I want to…	Start here
Embed a configurator on my page	Getting Started
Build a custom UI around the configurator	Custom Configurator Overview
React to user configuration changes	Events · Observers
Control the configurator from my code	Programmatic Configuration
Integrate pricing from my own system	Custom Pricing Integration
Access product data from my server	Admin API Quickstart · Authorization Guide
Get notified when data changes server-side	Webhooks
Add user login to my site	Authentication

The Big Picture​

Client-Side Building Blocks​

Web Components​

Embed Templates​

JavaScript API​

Events​

Events vs Observers​

Server-Side Building Blocks​

REST API​

Webhooks​

Admin Panel​

Product Types​

Data Flow: From Configuration to Cart​

Where to Go Next​