> For the complete documentation index, see [llms.txt](https://help.synode.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.synode.ai/visualizer/hotspots-in-synode-visualizer.md).

# Hotspots in Synode Visualizer

Hotspots help guide users to important parts of a 3D model. They can be placed freely in the scene or attached to a specific model component.

In the Visualizer, hotspots can be connected to Callouts to display additional information, images, instructions, links, or other supporting content when selected.

***

### Add Hotspots: "World & Tie to Mesh"

1. Open Hotspots from the toolbar on the left side of the Builder and Click on "Add Hotspot".

<figure><img src="https://2697082306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FepdMF6fRIS8jTFlvDspe%2Fuploads%2FdkYdjwbHXTaE6SFGT67V%2FAdd%20Hotspot.gif?alt=media&amp;token=227c7910-58b8-48db-99a3-16031315a33d" alt=""><figcaption></figcaption></figure>

2. When adding a hotspot, you have two options:&#x20;

**World** lets you freely control the position of your hotspot in the scene.

Use the transform controls in the viewport or enter the X, Y, and Z coordinates to adjust its position precisely.

Because the hotspot is positioned in world space, it is not attached to a specific mesh and will not automatically follow a component if that component is moved or animated.

<figure><img src="https://2697082306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FepdMF6fRIS8jTFlvDspe%2Fuploads%2FUWMlmq3gCV4XKAG0akYg%2FWorld.gif?alt=media&amp;token=40dd8e2d-1873-4fa4-9833-cd32cb8902dc" alt=""><figcaption></figcaption></figure>

**Tie to Mesh** allows you to attach the hotspot directly to a specific mesh.

Click the desired location directly on the mesh in the viewport. The selected mesh name will appear under **Location**.

Once attached, the hotspot remains associated with that mesh and follows it when the mesh is moved or animated.

To attach the hotspot to a different mesh, click **Pick Mesh**, then select a new location on the desired mesh.

<figure><img src="https://2697082306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FepdMF6fRIS8jTFlvDspe%2Fuploads%2F5FwsWhCp56cJ3Cbli9dR%2FTie%20to%20mesh.gif?alt=media&amp;token=11820718-e4f2-4d00-8a51-6d5256715524" alt=""><figcaption></figcaption></figure>

3. The new hotspot appears in the Hotspots list and in the 3D scene.
4. Select the hotspot from the list or directly in the viewport to edit its properties.

***

### Rename and Remove a Hotspot

To rename a hotspot, simply select your Hotspots, then, go to the label section under Hotspot Properties and enter a new name.

Use a clear and descriptive name to make the hotspot easier to identify.

To remove a hotspot, click the X icon beside its name in the Hotspots panel.

<figure><img src="https://2697082306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FepdMF6fRIS8jTFlvDspe%2Fuploads%2FuY6hDXptP01YAoDqriD6%2FRename%20%26%20Remove%20a%20Hotspot.gif?alt=media&amp;token=b4fc133e-32b9-4dce-a4c0-578a883bc5f1" alt=""><figcaption></figcaption></figure>

***

### Global Appearance

The Global Appearance section controls how hotspots and their connecting lines are displayed.

<figure><img src="https://2697082306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FepdMF6fRIS8jTFlvDspe%2Fuploads%2FDsIosgcbRUPZG3nv2NBK%2Fimage.png?alt=media&amp;token=9ba3a622-0361-48d6-b6eb-6c84de586f43" alt=""><figcaption></figcaption></figure>

#### Size

Controls the displayed size of the hotspot.

Increase or decrease the value depending on how prominent the hotspot should appear.

<figure><img src="https://2697082306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FepdMF6fRIS8jTFlvDspe%2Fuploads%2F5gw8W6s1WmZgRIECM4SQ%2Fimage.png?alt=media&amp;token=1dc92651-f55d-4d24-a8c9-6e7b6f7ab9e2" alt=""><figcaption></figcaption></figure>

#### Color

Controls the hotspot color.

Choose a color that remains clearly visible against the model and scene background.

<figure><img src="https://2697082306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FepdMF6fRIS8jTFlvDspe%2Fuploads%2FZHJMZ25fEypImTNOwm2E%2Fimage.png?alt=media&amp;token=d127004b-0d45-4109-9e2b-3721c729f08c" alt=""><figcaption></figcaption></figure>

#### Draw Line to Callout

Displays a line between the hotspot and its assigned callout.

Enable this option when you want to visually show which part of the model the callout is associated with.

<figure><img src="https://2697082306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FepdMF6fRIS8jTFlvDspe%2Fuploads%2FhyOmAWiCWCsZMn1Wc1WC%2Fimage.png?alt=media&amp;token=54f9dba4-a273-46a7-b94d-6876782c35bf" alt=""><figcaption></figcaption></figure>

#### Callout Line Color

Controls the color of the line connecting the hotspot to the callout.

<figure><img src="https://2697082306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FepdMF6fRIS8jTFlvDspe%2Fuploads%2F9jXJtylPkw6FmpANKqvw%2Fimage.png?alt=media&amp;token=cd22d82b-0c5a-4699-98ca-a8e2bd641044" alt=""><figcaption></figcaption></figure>

#### Callout Line Width

Controls the thickness of the connecting line.

<figure><img src="https://2697082306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FepdMF6fRIS8jTFlvDspe%2Fuploads%2FH4T6RQIY21VrP3fK4Foo%2Fimage.png?alt=media&amp;token=fb75c975-8297-45fe-a069-f97beed49748" alt=""><figcaption></figcaption></figure>

***

### Hotspot Properties

Select a hotspot to display its settings under Hotspot Properties on the right side panel.

These settings control the hotspot location, label, action, assigned callout, and camera behavior.

***

### Label

Use the Label section to name or rename your hotspots.

<figure><img src="https://2697082306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FepdMF6fRIS8jTFlvDspe%2Fuploads%2F8kOHWDJl8zMQsD0a9zOI%2Fimage.png?alt=media&amp;token=20b9a2a1-67a4-4888-a670-e6ffc6c332d4" alt=""><figcaption></figcaption></figure>

***

### Actions

The Actions section controls what happens when a user selects the hotspot.

Two actions are available in the Visualizer:

#### Callout

Select Callout when the hotspot should display contextual information.

Under Callout Properties, open Select Callout and choose the callout you want to connect to the hotspot.

#### Stage

Select Stage when the hotspot should navigate to another Stage within the same Visualizer project.

Choose the destination Stage from the available options.

When the hotspot is selected, the Visualizer opens the assigned Stage, allowing users to continue exploring another part or level of the 3D experience.<br>

<figure><img src="https://2697082306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FepdMF6fRIS8jTFlvDspe%2Fuploads%2FztrbGdhxUjxWotauDJCS%2Fimage.png?alt=media&amp;token=6c12732b-d866-480d-8018-8c198a15ec82" alt=""><figcaption></figcaption></figure>

***

### Callout Properties&#xD;

Click Edit Callout to open the Callouts panel for the callout currently assigned to the hotspot.

From the Callouts panel, you can edit the selected callout's content and properties, select another existing callout, or create a new callout.

<figure><img src="https://2697082306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FepdMF6fRIS8jTFlvDspe%2Fuploads%2FkTXmPsbChiHdLU52y1c8%2Fimage.png?alt=media&amp;token=73c1247c-053a-4686-be88-eca7a61ecb75" alt=""><figcaption></figcaption></figure>

***

### Custom Camera Angle

Enable Custom Camera Angle when you want the viewer to move to a specific camera view when the hotspot is selected.

Position the camera at the desired angle, then click Set Camera Position to save that view.

The saved camera position can help focus the viewer on the relevant component when the hotspot is selected.

<figure><img src="https://2697082306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FepdMF6fRIS8jTFlvDspe%2Fuploads%2FJ3JB2ncdPYdmBECIvNE3%2Fimage.png?alt=media&amp;token=1d74019c-cf1f-4e6d-a61d-33c39c512cc2" alt=""><figcaption></figcaption></figure>
