--- title: Hotspot Styling description: VNTANA Hotspots are public-facing interactive pins on 3D models that let users display product dimensions, images, text, videos, and hyperlinks directly within a 3D viewer --- [Skip to content](https://resources.vntana.com/resource-center/training-guide-hotspot-styling#main-content) ![VNTANA Logo](https://resources.vntana.com/hs-fs/hubfs/VNTANALogo_white.png?width=300&height=42&name=VNTANALogo_white.png) - [VNTANA.com](https://www.vntana.com/) Open main navigation Close main navigation - [VNTANA.com](https://www.vntana.com/) - [VNTANA.com](https://www.vntana.com/) [VNTANA.com](https://www.vntana.com/) How can we help you? - There are no suggestions because the search field is empty. 1. [Resource Center](https://resources.vntana.com/resource-center?hsLang=en-us) 2. [Features](https://resources.vntana.com/resource-center/features?hsLang=en-us) 3. [Viewer](https://resources.vntana.com/resource-center/features?hsLang=en-us#viewer) # Hotspot Styling ## VNTANA Hotspots are public-facing interactive pins on 3D models that let users display product dimensions, images, text, videos, and hyperlinks directly within a 3D viewer Hotspots are now more flexible and easier to maintain. This release allows you to: - Customize hotspot pin styling to better match your brand. - Format hotspot content with additional text styling options. - Reposition existing hotspots without recreating them. - Configure how Exploded View behaves using Explosion Type settings. **Plan / Tier Availability** - Available everywhere the Viewer is supported: - Platform Viewer - Embedded Viewer - NPM package **Integrations or Dependencies** - Developers can leverage the Viewer SDK to build fully customized hotspot experiences beyond what is supported within the Platform. --- ### **How to Use It** Follow the steps below to style and edit your Hotspots. **Hotspot Pin Styling** You can now configure default hotspot pin styling for an asset. New options include custom pin image, fill color, and border color. All color options support transparency. Once saved, all hotspots on the asset use the selected styling. **How to Update Pin Styling** 1. Open an Asset. 2. Select the **Hotspots** tab. 3. Expand **Styling Settings**. 4. Configure: - Fill Color - Border Color - Show Hotspot Numbers - Pin Image - Supported file formats: `JPEG, JPG, PNG, GIF, WEBP` - Maximum file size: 5MB - Recommended image size: 512x512px 5. Click **Save**. The updated styling immediately appears in both Platform and the Share Link. **Note:** If Show Hotspot Numbers is enabled, custom Pin Images cannot be used. Turn off Show Hotspot Numbers to upload a custom pin image. ![](https://resources.vntana.com/hs-fs/hubfs/undefined-Oct-27-2026-06-19-32-6924-PM.gif?width=500&height=316&name=undefined-Oct-27-2026-06-19-32-6924-PM.gif) **How to create Hotspot Presets** 1. Open an Asset 2. Select the **Hotspots** tab. 3. Expand the **Styling Settings**. 4. Configure the styling settings as needed. 5. Click the + icon to the right of the Hotspot Preset dropdown. 6. Complete the pop-up to save the Styling settings as a Hotspot preset. These presets operate just like Viewer Presets. 7. Click **Save** to finish creating the new Hotspot Preset. 8. Apply the Hotspot Preset to assets as needed. Note, this cannot be applied in to assets in bulk. ![](https://resources.vntana.com/hs-fs/hubfs/undefined-Oct-27-2026-06-19-32-3080-PM.gif?width=500&height=316&name=undefined-Oct-27-2026-06-19-32-3080-PM.gif) --- **Rich Text Formatting** Hotspot text editing now includes additional formatting options such as font family, font size, font color, undo, and redo. These options make it easier to create branded, readable hotspot content. **Creating a Formatted Hotspot** 1. Open an Asset. 2. Go to **Hotspots**. 3. Click **Create Hotspot**. 4. Select the hotspot location. 5. Choose a hotspot type. 6. Enter your content. 7. Use the text formatting toolbar to apply a font family, adjust the font size and color. You can continue to format text as bold, italic, underline, bulleted list, numbered list, and apply links. 8. Save the hotspot. The formatting appears anywhere the hotspot is viewed. ![](https://resources.vntana.com/hs-fs/hubfs/undefined-Oct-27-2026-06-19-33-5421-PM.gif?width=500&height=316&name=undefined-Oct-27-2026-06-19-33-5421-PM.gif) --- **Edit Existing Hotspots** Editing Hotspots allows you to edit the Hotspot content, as well as the pin position, the saved camera angle, and the explosion strength. Reorder the Hotspot pin order simply by dragging and drogging the Hotspots into the correct order. **Reposition a Hotspot** 1. Select the Hotspot. 2. Click **Edit**. 3. Edit the text as needed. 4. If the camera and explosion strength need to be adjusted, adjust within the viewer. 1. Adjust the camera position by rotating, zooming, and panning in the viewer. 2. Adjust the explosion strength by dragging the slider if the explosion is enabled in the viewer. 5. Click **Move**. 6. Reposition the hotspot pin by clicking to a new location on the 3D model. 7. Click **Save**. The hotspot is updated with the new camera position, explosion strength, and pin position without creating a new hotspot. **Note** If you would like to only adjust the saved camera position, follow steps 1 - 5, then click on the current pin or close to the current pin in the 3D viewer. The pin position may move slightly. Then click Save to complete the changes. ![](https://resources.vntana.com/hs-fs/hubfs/undefined-Oct-27-2026-06-19-33-2119-PM.gif?width=500&height=316&name=undefined-Oct-27-2026-06-19-33-2119-PM.gif) **Reorder a Hotspot** 1. Open an Asset. 2. Go to **Hotspots**. 3. Click and drag a Hotspot item to its new position in the list. 4. Click **Save**. ![](https://resources.vntana.com/hs-fs/hubfs/undefined-Oct-27-2026-06-19-32-0141-PM.gif?width=500&height=316&name=undefined-Oct-27-2026-06-19-32-0141-PM.gif) --- **Explosion Type** Define how the model explodes when explosion is enabled in the viewer. - **Radial (Default):** Parts move away from one another while maintaining their relative spacing. - **X, Y, or Z Axis:** Parts move apart equally along the selected axis. - Model hierarchy will influence how the model will separate. **Change the Explosion Type** 1. Open **Viewer Settings**. 2. Expand **Embed Settings**. 3. Enable **Exploded View**. 4. Select **Explosion Type**. 5. Choose from Radial, X Axis, Y Axis, or Z Axis. 6. Click **Save**. ![](https://resources.vntana.com/hs-fs/hubfs/undefined-Oct-27-2026-06-19-32-9466-PM.gif?width=500&height=316&name=undefined-Oct-27-2026-06-19-32-9466-PM.gif) --- ### **Troubleshooting Basics** | **Issue** | **Troubleshooting Steps** | | --- | --- | | Will my existing hotspots continue working? | Yes. Existing hotspots are automatically migrated and continue functioning after the update. | | Do I need to recreate hotspots to move them? | No. Existing hotspots can now be edited and repositioned. | | Can I apply my Hotspot styling settings from one asset to other assets? | Yes. Save the Hotspot styling settings as a Hotspot Preset and apply the preset to other Assets as needed. |   - [Features](https://resources.vntana.com/resource-center/features?hsLang=en-us#main-content) - [Viewer](https://resources.vntana.com/resource-center/features?hsLang=en-us#viewer) - [Showrooms](https://resources.vntana.com/resource-center/features?hsLang=en-us#showrooms) - [Sign-In](https://resources.vntana.com/resource-center/features?hsLang=en-us#sign-in) - [User Profile](https://resources.vntana.com/resource-center/features?hsLang=en-us#user-profile) - [Billing](https://resources.vntana.com/resource-center/features?hsLang=en-us#billing) - [Asset Management](https://resources.vntana.com/resource-center/features?hsLang=en-us#asset-management) [![VNTANA\_V\_80x80\_WhiteonBlue-1](https://resources.vntana.com/hs-fs/hubfs/VNTANA_V_80x80_WhiteonBlue-1.jpg?width=80&height=80&name=VNTANA_V_80x80_WhiteonBlue-1.jpg "VNTANA_V_80x80_WhiteonBlue-1")](https://www.vntana.com) [mailto:info@vntana.com](mailto:info@vntana.com) Copyright © 2026, VNTANA