A hotspot is a marker on the 3D model. It can show a short label or note, and clicking it can open a layer, select a choice, show a description, play an animation or move the camera.
Use hotspots to point out features ("waterproof zip", "USB-C port"), or as a way into the configuration: the customer clicks the seat, and the Seat layer opens.
Adding a hotspot
- Open 3D Objects and press Add 3D item.
- Under Hotspots, choose Hotspot.
- Give it a Label. This is for you, but it is also the hotspot's text if you leave Hotspot label empty.
- Press Place on model… and click the model where the hotspot should go. This is described below.
- Choose how it looks, when it shows, and what clicking it does, as described below.
- Save the configurator.
Each hotspot is its own 3D item, so a product with six hotspots has six entries in 3D Objects.
Screenshot needed: a hotspot open in the 3D Objects details panel, showing Hotspot type, Hotspot label, Content, Icon and the Place on model… button.
How it looks
Hotspot type decides how much the hotspot shows:
| Type | Shows |
|---|---|
| Pin | The icon only. The label is used for screen readers but not displayed. |
| Label | The icon, with the label next to it at all times. |
| Annotation | The icon and label, plus the Content, which opens when the customer hovers over the hotspot or reaches it with the keyboard. On a touch screen, tapping it usually shows the content, and also runs its click actions. |
- Hotspot label is the text shown by the Label and Annotation types. If it is empty, the item's Label is used.
- Content is the longer text an Annotation opens. Basic HTML is allowed:
<b>,<i>,<a>,<br>and similar. The field also appears for the Label type, but a Label hotspot doesn't display it. It is used only as a fallback by the Show description action. - Icon: Dot, Info, Plus or None. Use None only with the Label or Annotation types. A Pin with no icon has nothing to display.
Keep annotations short. They sit on top of the model, so a paragraph of text hides the product.
Placing it on the model
Place on model… opens the Place hotspot dialog with a preview of the model.
- Click the model where the hotspot should go. A marker appears, and the Position and Normal fields fill in.
- Adjust Surface offset if the marker sinks into the surface or needs to stand off it. The slider is sized to the model.
- Press Use placement.
Screenshot needed: the Place hotspot dialog with a marker on the model and the Position, Normal and Surface offset controls filled in.
The click records two things:
- the position: the point you clicked,
- the normal: the direction the clicked surface faces. It is used to hide the hotspot when that surface faces away from the camera.
All three values can also be edited by hand in the details panel. Surface offset pushes the hotspot along the normal, away from the surface. A negative value moves it inwards.
World space or following a part
Anchor mode is set for you by where you click:
- Click a named part of the model, and the hotspot is attached to that part. Anchor mode becomes Object (follow mesh), and the hotspot moves with the part, for example when a choice moves the part onto another anchor. During an animation it catches up with the part when the camera next moves, rather than on every frame.
- Click somewhere with no named part, and the hotspot stays at a fixed point in the scene. Anchor mode is World space.
A hotspot attached to a part does not hide when the part is hidden. If the part only appears for some choices, use Visible when to show the hotspot only with those choices.
If the part is repeated by a layout, the hotspot follows the first copy only.
When it shows
Visible when decides whether the hotspot is on screen at all:
- Always: the default.
- Layer is active: only while the Visibility layer is the layer open in the configurator. Use this to show a layer's hotspots only while the customer is working on it.
- Choice is active: only while the Visibility choice is selected. If you pick a layer but no choice, this works like Layer is active.
A layer or choice hidden by conditional logic counts as inactive, so its hotspots are hidden too.
When a hotspot is hidden
With Hide when facing away on and Occlusion set to Backface (the defaults), a hotspot fades almost completely, and stops being clickable, once the camera moves round to the back of its surface. Turn Hide when facing away off, or set Occlusion to None, to keep it visible from every angle.
This check only uses the normal. It does not look at what is between the camera and the hotspot, so it cannot tell that another part of the product is in the way. A hotspot stays visible through the product for as long as its surface still faces the camera. You are most likely to see this when:
- the hotspot is on a surface that faces up or along the product, and the camera is on the opposite side. A hotspot on a wing mirror, placed on a face that points forward rather than outward, is still visible from the other side of the car.
- the hotspot is on a part inside the product, such as a cockpit or a cabin, and the camera is on the far side.
- the surface is almost edge-on to the camera. Whether the hotspot shows or hides then depends on tiny changes in camera height.
To keep a hotspot from showing through the product, place it on a surface that faces outward, on the side where the customer should see it. If it still shows from the wrong side, click the model again on a face that points straight out from the part. Editing the Normal numbers also works, but in Object (follow mesh) mode they are relative to the part the hotspot follows, not the world, which makes them harder to get right by hand.
On first load
When the viewer shows its "drag to rotate" hint as the product first loads, the hotspots wait until the hint has settled, so the customer isn't shown both at once. They appear straight away if the customer rotates the model first. On products without the hint, or for visitors who have already seen it, hotspots show immediately.
What clicking does
Click actions is a list. Add as many actions as you need, and they run in order when the hotspot is clicked.
| Action | Settings | What happens |
|---|---|---|
| Open layer | Layer | Opens that layer in the configurator menu. |
| Select choice | Layer, Choice | Opens the layer and selects the choice. Conditional logic treats it exactly like the customer clicking the choice in the list. |
| Show description | Layer, Choice, Description from | Shows the layer's or the choice's description (see below). |
| Play animation | Animation object, Animation command | Runs an animation controller: Play, Stop, Pause, Resume or Reverse. |
| Focus camera (angle) | Angle | Switches to one of the product's camera positions, as if the customer had picked that view. |
If an action's Layer or Choice is left empty, it uses the hotspot's Visibility layer and Visibility choice.
Show description opens the same description the configurator shows for that layer or choice, when the configurator has a description button for it. If it has none, a panel opens with the hotspot label as its title, and the description as its body. The hotspot's own Content is used when there is no description.
A hotspot with no click actions is display-only. Clicking it does nothing, which suits a Label or Annotation that is there just to inform.
Example: a hotspot that configures the seat
On a bicycle, a hotspot on the saddle:
- Hotspot type: Label, Hotspot label: "Choose your saddle"
- Click actions:
- Focus camera (angle): Side close-up
- Open layer: Saddle
Clicking it moves the camera to the saddle and opens the saddle options.
Styling
Hotspots are HTML elements drawn over the 3D canvas, so they can be styled with CSS like the rest of the configurator:
| Class | Element |
|---|---|
.mkl-pc-hotspot | The hotspot button |
.mkl-pc-hotspot--pin, --label, --annotation | Its type |
.mkl-pc-hotspot--icon-dot, --icon-info, --icon-plus | Its icon |
.mkl-pc-hotspot__label | The label text |
.mkl-pc-hotspot__body | An annotation's content |
A hotspot facing away has data-in_view="false". Developers can change the markup itself. See 3D Premium hooks.
If something looks wrong
- The hotspot shows through the product: see When a hotspot is hidden above.
- The hotspot floats where a hidden part used to be: it is attached to a part that is now hidden. Set Visible when to the choice that shows the part.
- The hotspot never appears: check Visible when. The layer must be open, or the choice selected, for it to show.
- The hotspot moved after re-exporting the model: a hotspot in Object (follow mesh) mode is tied to the part's name. If the part was renamed, it can no longer be found. Place the hotspot again.