Partner Integration Guide

Integrate Monocle 3D System into your website with our powerful components and APIs. Display 3D models, enable model selection, and provide immersive AR experiences for your users.

Monocle Component Integration Guides

Complete integration guides for both Monocle components

Monocle Picker

Integration Guide

Allow users to select from their 3D model library

Features:

  • User model library access
  • Multi-language support
  • Event-driven selection
  • Form integration
  • Account linking guidance
picker.js: Full functionality (~800KB)
HTML
<!-- Include the Monocle Picker -->
<script type="module" src="https://components.monocle3d.com/picker.js"></script>

<!-- Model picker form -->
<form>
  <monocle-picker
    language="en-US"
    partner-id="your-partner-id"
    user-token="USER_TOKEN_FROM_API">
  </monocle-picker>
</form>

Monocle Viewer

Integration Guide

Display 3D models with WebGL rendering and AR support

Features:

  • WebGL/Three.js rendering
  • AR support (iOS/Android)
  • Interactive controls
  • Customizable appearance
  • Auto-rotation options
viewer.js: Lightweight viewer (~500KB)
HTML
<!-- Include the Monocle Viewer -->
<script type="module" src="https://components.monocle3d.com/viewer.js"></script>

<!-- Display a 3D model -->
<monocle-viewer2
  bundle-id="WnU8Mc2dzGPR45ER0Vo2"
  hide-logo
  enable-rotation
  rotation-per-second="-5deg"
  ar-actual-size
  enable-interaction-prompt
  interaction-prompt-style="wiggle">
</monocle-viewer2>

Resources & Support

Additional resources to help with your integration

Discord Community

Join our Discord community to connect with other developers, ask questions, and get help with your integration.

Join Discord

Support

Get direct help with integration issues, request new features, or contact our support team.

Email Support