@3dsource/metabox-front-api
    Preparing search index...

    Function integrateMetabox

    • Integrates the Metabox Basic Configurator into the page by injecting an iframe and initializing a Communicator instance for host-to-iframe messaging.

      • Builds a secure iframe URL using the provided configuratorId and config options.
      • Ensures the resulting URL uses HTTPS and that the target container exists.
      • Removes any previously embedded iframe with id "embeddedContent" before inserting a new one.

      Main initialization function for MetaBox integration. Initializes the configurator, receives an API handle, and sets up all configurations.

      THE entry point function. Creates the configurator iframe, establishes postMessage communication, and returns the Communicator api handle via callback. Call ONCE per configurator. Params: configuratorId (UUID), containerId (DOM element ID, default 'embed3DSource'), apiReadyCallback, config (IntegrateMetaboxConfig).

      Pattern: integrateMetabox('uuid', 'div-id', (api) => { setup listeners, then set product, then environment }, { standalone: true }). Ensure container div exists in DOM with non-zero dimensions. HTTPS required. Inside callback: 1) addEventListener for configuratorDataUpdated, 2) SetProduct, 3) SetEnvironment.

      Parameters

      • configuratorId: string

        The Basic Configurator ID (not a full URL). It is appended to https://{domain}/metabox-configurator/basic/{configuratorId} to form the iframe src.

      • containerId: string

        The id of the container element where the iframe will be injected.

      • apiReadyCallback: (api: Communicator) => void

        Called when the Communicator instance is created on the host side.

      • Optionalconfig: IntegrateMetaboxConfig

        Optional configuration used to build the iframe URL and initialize the communicator. Supported fields:

        • standalone?: boolean — if true, disables Metabox custom template and related logic.
        • introImage?: string — URL to an image shown on the intro screen (added as ?introImage=...).
        • introVideo?: string — URL to a video shown on the intro screen (added as ?introVideo=...).
        • loadingImage?: string — URL to an image displayed while loading (added as ?loadingImage=...).
        • state?: string — Predefined state for configurator for initial loading (added as ?state=...).
        • domain?: string — custom domain for testing (defaults to metabox.3dsource.com). HTTPS is enforced.

      Returns void

      Error If configuratorId or containerId are empty strings.

      Error If the computed iframe URL is invalid or does not use HTTPS.

      Error If the container element with the provided id cannot be found.

      import { integrateMetabox } from '@3dsource/metabox-front-api';

      integrateMetabox(
        'configurator-id',
        'embed3DSource',
        (api) => {
          // Communicator is ready to use
        },
        {
          standalone: false,
          introImage: 'https://example.com/intro.png',
          loadingImage: 'https://example.com/loading.png',
        },
      );

    Settings

    Member Visibility

    On This Page

    What does it unlock?Practical ApplicationAI Coding Best Practices