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
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>
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 DiscordSupport
Get direct help with integration issues, request new features, or contact our support team.
Email Support