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 API    │  │  Webhooks    │         │
  │  │ (UI for      │  │ mimeeqapi.com│  │ (server →    │         │
  │  │  products,   │  │ (server-side │  │  your server)│         │
  │  │  templates,  │  │  read access)│  │              │         │
  │  │  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

The REST API at mimeeqapi.com provides server-side read access to product data, pricing, and configuration details. It uses API key authentication via the X-API-KEY header. Use it for back-end integrations, pricing lookups, or when client-side access isn't sufficient.

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:

1. Page loads → <mmq-embed> renders → mimeeq-app-loaded fires → your code subscribes to observers
2. User configures the product → observers update continuously → your UI stays in sync
3. User clicks "Add to Cart" → mimeeq-add-to-cart event fires with full payload → your code creates a cart line item
4. Optionally, your server calls the REST API for pricing verification or order processing
5. 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	REST API Authorization · API Reference
Get notified when data changes server-side	Webhooks
Add user login to my site	Authentication