The Meshless embed script mounts a 360° product viewer into any element that carries the meshless-viewer class and a valid data-project-id. Configuration is handled through data-* attributes directly on the element.
Loading the script
Add the script once per page — in <head> or before </body>. The script is small, loads asynchronously, and handles all viewer mounting automatically.
<script src="https://cdn.meshless.io/embed/v1/embed.js" async></script>
Embed methods
Class-based div (recommended for plain HTML)
<div
class="meshless-viewer"
data-project-id="YOUR_PROJECT_ID"
style="width:100%;aspect-ratio:1"
></div>
Web Component
<meshless-viewer
data-project-id="YOUR_PROJECT_ID"
style="width:100%;aspect-ratio:1"
></meshless-viewer>
The web component registers as a custom element and handles its own mount/unmount lifecycle. It works in Vue, Svelte, Angular, and any framework that renders to the DOM.
React / Next.js
Use the @meshless/react package, which injects the script automatically:
import { MeshlessViewer } from '@meshless/react';
<MeshlessViewer
projectId="YOUR_PROJECT_ID"
style={{ width: '100%', aspectRatio: '1' }}
/>
See Quick Start for installation details.
Required attribute
| Attribute | Type | Description |
|---|---|---|
data-project-id | string | Project identifier from the Meshless dashboard. |
Display attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
data-bg-color | CSS color string | Project default | Overrides the viewer background color. Pass an empty string to use the project default. |
data-hide-controls | boolean | false | Hides the on-viewer controls (the fullscreen and accessibility buttons). |
data-show-hotspots | boolean | true | Shows or hides project hotspots. |
data-fullscreen | boolean | true | Enables the fullscreen button. |
Auto-rotate attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
data-autoplay | boolean | Project default | Enables auto-rotation after load. |
data-autorotate-speed | number | Project default | Frames per second for auto-rotation. |
data-autorotate-direction | cw | ccw | Project default | Rotation direction — clockwise or counter-clockwise. |
data-autorotate-pause-on-hover | boolean | Project default | Pauses rotation while the pointer is over the viewer. |
data-autorotate-resume-delay | number | Project default | Milliseconds to wait before resuming rotation after a pause. |
Drag sensitivity attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
data-sensitivity | number | Project default | Pixels of horizontal drag required to advance one frame. Lower values are more sensitive. |
data-vertical-sensitivity | number | Project default | Pixels of vertical drag required to change one row. Applies to multi-row captures only. |
data-invert-x | boolean | false | Inverts the horizontal drag direction. |
data-invert-y | boolean | false | Inverts the vertical drag direction. |
Momentum attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
data-momentum | boolean | Project default | Enables frame-coast momentum after drag release. |
data-momentum-friction | number | Project default | Friction coefficient from 0 to 1. Values closer to 1 stop faster. |
Input attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
data-wheel | boolean | false | Enables mouse wheel and trackpad frame changes. When enabled the viewer captures scroll events — avoid on long pages unless the viewer is isolated. |
data-keyboard | boolean | false | Enables arrow key frame navigation when the viewer container is focused. |
Initial position attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
data-initial-frame | number | 0 | Zero-based frame index shown on first load. |
data-initial-row | number | 0 | Zero-based row index shown on first load. Applies to multi-row captures only. |
Boolean values
Boolean attributes accept true, false, 1, and 0.
Example — autoplay product reveal
<script src="https://cdn.meshless.io/embed/v1/embed.js" async></script>
<div
class="meshless-viewer"
data-project-id="YOUR_PROJECT_ID"
data-autoplay="true"
data-autorotate-speed="8"
data-autorotate-pause-on-hover="true"
data-autorotate-resume-delay="1500"
style="width:100%;aspect-ratio:1"
></div>
Example — tightly controlled embed
<div
class="meshless-viewer"
data-project-id="YOUR_PROJECT_ID"
data-hide-controls="true"
data-sensitivity="4"
data-momentum="true"
data-momentum-friction="0.88"
data-initial-frame="12"
style="width:100%;aspect-ratio:1"
></div>
Live attribute updates
The embed script watches for attribute changes on each mounted element. Update a data-* attribute after mount and the viewer re-renders with the new setting — no reload required. This is the recommended integration point for SPAs and product configurators that change state after initial render.
For variant switching and frame seeking from JavaScript, use the postMessage API documented in JavaScript SDK.
Sizing
Give the container element an explicit width and either an aspect-ratio or a fixed height. The viewer fills 100% of its container.
/* square viewer */
.meshless-viewer { width: 100%; aspect-ratio: 1; }
/* 4:3 */
.meshless-viewer { width: 100%; aspect-ratio: 4 / 3; }
Avoid leaving the height unset — the viewer will collapse to zero pixels until the frames load.