Hotspots are interactive callouts attached to a specific frame and position. They let you annotate a feature, add a product link, display a detail image, or show a persistent label — all without leaving the viewer.
Plan limits
The number of hotspots you can add per project depends on your plan.
| Plan | Hotspots per project |
|---|---|
| Hobby | 3 |
| Growth | 10 |
| Pro | 50 |
| Custom | Unlimited |
The Studio interface displays your current count against the limit. When you reach the limit, clicking on the viewer shows a toast message and the header displays an upgrade link.
Place a hotspot in Studio
- Open a project in the dashboard and go to the Studio tab.
- Rotate the viewer to the frame where the feature is most visible.
- Click the area on the product where the marker should appear.
- The hotspot is added immediately at the normalized x/y position.
- Select the hotspot in the list to set its label, type, style, and content.
- Click Save label to persist changes.
Meshless stores x and y as values from 0 to 1 (fraction of frame width and height). Placement is stable across embed sizes and device widths.
Frame and row coordinates
Each hotspot belongs to one frame. For multi-row captures, it also belongs to one row.
| Field | Meaning |
|---|---|
frame | Zero-based horizontal frame index (0 = start of rotation) |
row | Zero-based vertical row index. null for single-row projects. |
x | Horizontal position from left edge (0) to right edge (1) |
y | Vertical position from top edge (0) to bottom edge (1) |
To move a hotspot to a different frame, rotate the viewer to the target frame and use Move to F in the editor panel.
Hotspot types
| Type | Use it for | Required content |
|---|---|---|
info | Materials, features, specs, care notes | title, body, or label |
link | Size guides, product bundles, documentation pages | url; optional urlLabel |
image | Texture detail, close-up photography, diagrams | imageUrl; optional title and body |
label | Short persistent labels on materials or features | label |
Visual variants
| Variant | Appearance | Best use |
|---|---|---|
dot | Minimal circular pulse marker | Dense product imagery where a full tag would obscure detail |
tag | Compact pill with label | Short visible labels, e.g. material names |
card | Rich callout surface with image, title, body, and CTA | Detailed explanatory content, product links |
The visual variant is independent from the type. A link hotspot can appear as a dot, tag, or card.
Appearance settings
| Property | Description |
|---|---|
label | Short visible label (used in tag and label types) |
title | Callout heading shown in card and info popups |
body | Body text shown in card and info popups |
url | Link destination for link-type hotspots |
urlLabel | CTA button label (defaults to "Learn more") |
imageUrl | Image shown in image-type hotspots |
icon | Short icon text shown inside the dot marker, e.g. i, + |
accentColor | Marker, border, or CTA color (hex) |
backgroundColor | Popup or tag fill color (hex) |
textColor | Popup or tag text color (hex) |
openInNewTab | Whether the link opens in a new tab. Defaults to true. |
isVisible | Hides the hotspot from live embeds without deleting it. Useful for drafts. |
Saved vs dynamic hotspots
Meshless supports two hotspot layers that render simultaneously in embeds.
| Layer | Source | Best for |
|---|---|---|
| Saved | Project Studio / API | Canonical product information managed by the team |
| Dynamic | JavaScript postMessage | CMS-driven copy, campaign overlays, personalization |
Dynamic hotspots are provided by your page JavaScript and do not persist to the project. They do not count against the plan limit.
API fields
Hotspots created through the REST API use the same shape as Studio. All fields are optional except frame, x, and y.
{
"frame": 12,
"row": null,
"x": 0.42,
"y": 0.31,
"label": "Merino wool",
"type": "info",
"variant": "tag",
"title": "100% Merino Wool",
"body": "Naturally temperature-regulating and machine-washable.",
"url": null,
"urlLabel": null,
"imageUrl": null,
"icon": null,
"accentColor": "#3b82f6",
"backgroundColor": null,
"textColor": null,
"openInNewTab": true,
"isVisible": true
}
See API Reference for full endpoint documentation.
JavaScript runtime control
You can manage hotspots from your page JavaScript after the embed has loaded. See JavaScript SDK for the full postMessage event reference.
Editorial tips
- Rotate to the frame where the feature is most visible before placing the hotspot — the viewer face-on shot is usually frame 0 or the center of the rotation arc.
- Use
cardfor explanatory content andtagfor short persistent labels. - Keep label text short enough to read on mobile (under 20 characters).
- Use
isVisible: falseto draft a hotspot without exposing it in live embeds. - On multi-row captures, place separate hotspots for each row where the feature is visible — the viewer shows only the hotspot matching the current frame and row.