ARBoost SDK Documentation

Getting Started

The ARBoost SDK allows you to easily embed interactive 3D models and Augmented Reality (AR) experiences into your web applications. It handles device compatibility, 3D rendering, and AR session management automatically.

Installation

Include the SDK script in your HTML file. We recommend placing it at the end of the <body> tag.

<script src="https://d37dwcmeftnbik.cloudfront.net/sdk/latest/arboost.min.js"></script>

Basic Usage

To open a 3D viewer for a specific model, simply call open360Viewer with the model's ID.

// Launch a fullscreen 3D viewer
open360Viewer({
    modelId: 'chair0'
});

API Reference

open360Viewer(config)

Opens the 3D model viewer. By default, it opens in a fullscreen modal. If a containerId is provided, it embeds the viewer inline.

Parameter	Description
`config`	Configuration object (see Configuration section). At minimum, must contain `modelId`.

openARViewer(config)

Triggers the AR experience directly.

On Mobile (AR Compatible): Directly launches the AR session (Quick Look on iOS, Scene Viewer on Android).
On Desktop / Non-AR: Displays a QR code overlay for the user to scan with their mobile device.

initArboostViewer(config)

The core initialization function used by the helper functions above. You generally don't need to call this directly unless you need granular control over the initialization process.

destroyArboostViewer()

Destroys the current viewer instance, removes elements from the DOM, and cleans up resources. Useful for Single Page Applications (SPAs) when navigating away.

Configuration Options

All API functions accept a configuration object with the following properties:

Property	Type	Default	Description
`modelId`	String	Required	The unique identifier for the 3D model to load.
`containerId`	String	(Auto-generated)	ID of the HTML element to render the viewer into. If omitted, a fullscreen container is created automatically.
`enableAR`	Boolean	`false`	If true, initializes in AR mode (skips 3D viewer, goes straight to AR/QR).
`theme`	String	`'theme1'`	Visual theme for the viewer. Options: `'theme1'`, `'theme2'`, `'theme3'`.
`enableFullscreen`	Boolean	`true` (if no container)	Forces the viewer to open in fullscreen mode immediately.
`useDefaultOverlay`	Boolean	`true`	Used with `openARViewer` on desktop. If false, it returns the QR data/URL but does not render the QR overlay.
`alt`	String	`'3D Model'`	Alternative text for the model viewer element (accessibility).
`cameraOrbit`	String	(Model default)	Initial camera orbit (e.g., `'45deg 55deg 2.5m'`).

Live Examples

1. Fullscreen Product View

The most common use case: a button that launches the 3D viewer in fullscreen.

<button onclick="viewProduct()">View 3D</button>

<script>
function viewProduct() {
  open360Viewer({
    modelId: 'chair0'
  });
}
</script>

2. Direct AR Launch

Launch directly into AR (or show QR on desktop). Perfect for "View in Room" buttons.

<button onclick="launchAR()">View in AR</button>

<script>
function launchAR() {
  openARViewer({
    modelId: 'chair0'
  });
}
</script>

3. Inline Embed

Embed the 3D viewer directly within your page layout instead of a modal.

Click button to load

<div id="my-container" style="height: 400px;"></div>

<script>
  open360Viewer({
    modelId: 'chair0',
    containerId: 'my-container'
  });
</script>