Skip to main content

How It Works

Script Injection​

On mount (client-side only via useEffect):

  1. Checks for existing script with id="mvt-engine-script"
  2. If missing, creates <script> with:
    • src="https://staging-svc.mvtlab.io/scripts/engine.js"
    • data-project-key={orchestratorKey}
    • data-mvt="engine"
    • async={true}
  3. Appends to <head>

This ensures one script per page, even on re-renders.

Anti-Flicker​

When antiFlickerEnabled={true}:

  1. Injects <style id="abhide">body{opacity:0}</style> into <head>
  2. Defines window.rmfk() to remove the style element
  3. Engine calls window.rmfk() when ready
  4. Safety timeout (default 3000ms) calls window.rmfk() as fallback

The id="abhide" matches the original HTML snippet's style identifier. The function name rmfk stands for "remove flicker"—a callback the engine uses to signal readiness.

Project Key Validation​

  • Stores orchestratorKey in window.__mvtOrchestratorKey on mount
  • If a different key is detected, logs error and skips script injection
  • Enforces one key per website (wrap once at root)

Technical Details​

This package wraps the standard MVTLab.io HTML integration snippet into a React component. The original snippet uses an IIFE pattern with document, window, and a timeout—this SDK translates that into React hooks and TypeScript types.