Hotspots setup settings in the Design tab

The Hotspots setup panel styles every hotspot in the tour at once: how a hotspot is drawn, how big it is, how it moves, which icon each type wears, and how a navigation arrow and an information popup are built. This page lists every setting of the Hotspots setup panel (Design tab > Hotspots setup) in the Design tab, in the order the panel shows them. A single hotspot's own text, target and variant are set in the Hotspots tab (Hotspot types and settings); the hotspot color alone is Hotspot colour in Global aesthetics; Hotspot looks and presets says which of the three presets does what.

Who can use it. The owner and, by default, an Admin collaborator can open the Design tab. Every plan has the panel. It is in the Advanced view only; the Basic view does not list it. A tour on a Free plan that wears a Pro theme and has never been hosted shows visitors the free Default look, which has the standard hotspot.

When visitors get a change. The preview row at the top of the Look tab, and the preview beside the panels, show it at once. Visitors get it after you click Save & Render, or after Publish changes when the tour uses Draft Workflows (My changes do not show for visitors).

Look

These settings are on the Look tab. At the top, a dark card called Preview draws one hotspot of each type (Info, Video, Image, Audio, Shop, Link, Navigation) with the same stylesheet as the published tour, so what it shows is what visitors get. If the icon color and the background color you chose are hard to tell apart, a warning above the tabs says so, with a button (Use white icons or Use black icons) that fixes it.

Icon pack

Set the colors, blur, hover effect and the five icons from a ready-made pack with one click.

Where: the Hotspots setup panel (Design tab > Hotspots setup), Look tab > card Icon pack. Advanced view. The card is there only when the site has packs. Default: none chosen What it does: A click on a pack sets the hotspot colors, blur and opacity, the hover effect and the icons of the five types for the whole tour. The settings stay editable afterwards. The chosen pack is highlighted. What visitors see: The hotspots in the pack's colors and icons. Related: Upload your own hotspot icons.

Preset

Choose a ready-made bundle of the style settings below.

Where: the Hotspots setup panel (Design tab > Hotspots setup), Look tab > card Preset > Preset. Advanced view. Default: Classic solid (svg) What it does: Choosing a preset sets Icon style, Border, Frosted blur and Background opacity to its values: Classic solid (solid, no border, full background), Classic bordered (solid with a border), Modern line (line icons, a clear background, a border), Glassmorphism (solid icons on a 45 percent background with a border and the frosted blur) and Marzipano original (the old picture icons). Custom... means the style is hand-tuned; the list also shows your saved presets, marked My preset. Changing any of the four style settings by hand switches the list to Custom.... Save preset appears for Custom... or a saved preset, to keep the current style as a preset of yours; Delete removes a saved preset, and a tour that used it goes back to Classic solid. A saved preset also carries the size, hover effect, idle animation and icons, and the hotspot color if one is set; it does not carry the entrance animation. What visitors see: The hotspots drawn in the preset's style. Related: Hotspot looks and presets.

Icon style

Choose how the icon inside the badge is drawn.

Where: the Hotspots setup panel (Design tab > Hotspots setup), Look tab > card Style > Icon style. Advanced view. Default: Solid (svg) What it does: Solid fills the icons, Line draws them as outlines (a Line badge fills in on hover), and Legacy PNG uses the old picture icons, which the player does not recolor. Choosing one by hand sets Preset to Custom.... What visitors see: Icons drawn that way. The old picture look has no tooltip or simple information variant, so such a hotspot opens as the classic box. Related: Preset.

Size

Make every hotspot smaller or larger.

Where: the Hotspots setup panel (Design tab > Hotspots setup), Look tab > card Style > Size. Advanced view. Default: Standard (standard) What it does: Small, Standard or Large. They scale the badge by 1, 1.5 and 2. However small the badge is drawn, its tap target is at least 44 pixels. What visitors see: Hotspots of that size in every room.

Border

Draw a ring around each hotspot badge.

Where: the Hotspots setup panel (Design tab > Hotspots setup), Look tab > card Style > Border. Advanced view. Default: off What it does: Adds a border in the hotspot's accent color. Switching it by hand sets Preset to Custom.... What visitors see: A ring around the badge.

Frosted blur

Blur what is behind each hotspot badge.

Where: the Hotspots setup panel (Design tab > Hotspots setup), Look tab > card Style > Frosted blur. Advanced view. Default: off What it does: Blurs the picture behind the badge by 12 pixels (an icon pack can set another amount). It shows most when the background is not fully opaque. Switching it by hand sets Preset to Custom.... What visitors see: A frosted-glass badge. Related: Background opacity.

Background opacity

How solid the badge behind the icon is.

Where: the Hotspots setup panel (Design tab > Hotspots setup), Look tab > card Style > Background opacity. Advanced view. Default: 100 percent What it does: A slider from 0 to 100. At 0 only the icon (and a border, if on) is drawn. Changing it by hand sets Preset to Custom.... What visitors see: A badge more or less see-through.

Motion

These settings are on the Motion tab, in the card Interaction.

Hover effect

What a hotspot does when the pointer is over it.

Where: the Hotspots setup panel (Design tab > Hotspots setup), Motion tab > card Interaction > Hover effect. Advanced view. Default: Enlarge (scale up) (enlarge) What it does: One of None, Border highlight, Soft glow, Enlarge (scale up), Enlarge with border, Enlarge with glow, Float / bounce, Wiggle / shake, Quick spin, Colour invert or Radiating pulse. What visitors see: The effect while the pointer rests on a hotspot that is not open. It applies to devices with a pointer; a touch screen never shows a stuck hover.

Idle animation

A slow movement on every hotspot to draw the eye.

Where: the Hotspots setup panel (Design tab > Hotspots setup), Motion tab > card Interaction > Idle animation. Advanced view. Default: None (none) What it does: None, Attention ring, Gentle float or Slow breathe. The animations run out of step, so the hotspots do not move as one, and a hotspot stops its own animation while its popup is open. What visitors see: The motion on every hotspot. A visitor who asked their device for less motion sees none.

Entrance animation

How a room's hotspots appear when the visitor arrives.

Where: the Hotspots setup panel (Design tab > Hotspots setup), Motion tab > card Interaction > Entrance animation. Advanced view. Default: None (none) What it does: None, Fade in or Pop in. The hotspots wait until the picture has finished its transition, then appear one after another. What visitors see: The hotspots arriving that way in each room. A visitor who asked for less motion sees them at once.

Icons

These settings are on the Icons tab. The card Icons by type picks the icon of each type; the card Components picks how a navigation arrow and an information popup are built. Both cards are in the Advanced view.

Info

The icon on information hotspots.

Where: the Hotspots setup panel (Design tab > Hotspots setup), Icons tab > card Icons by type > Info. Advanced view. Default: Info Circle (info) What it does: A list with the icons suggested for the type (Info Circle, Info Solid, Search, Star Highlight), then every other built-in icon under More icons, then your uploaded icons under Custom icon. What visitors see: That icon on every information hotspot. Related: Upload your own hotspot icons.

Video

The icon on video hotspots.

Where: the Hotspots setup panel (Design tab > Hotspots setup), Icons tab > card Icons by type > Video. Advanced view. Default: Play Video (play) What it does: Suggested: Play Video, Play Circle, Video Camera, Panorama Camera; then the same More icons and Custom icon lists. What visitors see: That icon on every video hotspot.

Audio

The icon on audio hotspots.

Where: the Hotspots setup panel (Design tab > Hotspots setup), Icons tab > card Icons by type > Audio. Advanced view. Default: Audio Track (audio) What it does: Suggested: Audio Track, Narrator Speaker, Spatial Headset; then the same More icons and Custom icon lists. What visitors see: That icon on every audio hotspot.

Link

The icon on web link hotspots.

Where: the Hotspots setup panel (Design tab > Hotspots setup), Icons tab > card Icons by type > Link. Advanced view. Default: External Link (weblink) What it does: Suggested: External Link, Chain Link, Arrow Right, Geomap Pin; then the same More icons and Custom icon lists. What visitors see: That icon on every web link hotspot.

Navigation arrow (icon)

The icon inside the arrow that takes a visitor to another room.

Where: the Hotspots setup panel (Design tab > Hotspots setup), Icons tab > card Icons by type > Navigation arrow. Advanced view. Default: Navigation Chevron (nav-chevron) What it does: Suggested: Navigation Chevron, Double Chevron, Navigation Arrow, Navigation Triangle; then the same More icons and Custom icon lists. What visitors see: That symbol on every link hotspot. Related: the Navigation arrow in Components.

Navigation arrow (component)

How a link hotspot is built.

Where: the Hotspots setup panel (Design tab > Hotspots setup), Icons tab > card Components > Navigation arrow. Advanced view. Default: Standard floating arrow (nav-classic) What it does: Standard floating arrow or Frosted glass chevron ring: two different pieces of markup the player loads for the link hotspots. What visitors see: A floating arrow, or a frosted-glass ring with a chevron. Related: the Navigation arrow in Icons by type.

Information popup

How an information hotspot opens when its own variant is not set.

Where: the Hotspots setup panel (Design tab > Hotspots setup), Icons tab > card Components > Information popup. Advanced view. Default: Collapsible content box (classic) What it does: Collapsible content box, Lightweight hover tooltip or Immersive full-screen modal. It is the tour's default: a hotspot that has its own variant in the Hotspots tab keeps it. What visitors see: A box, a tooltip or a full-screen window when they open an information hotspot. Related: Hotspot types and settings.

Troubleshooting

I cannot see Hotspots setup. It is in the Advanced view only: switch the view at the top of the editor.

My changes to a hotspot's color do nothing. The color alone is Hotspot colour in Global aesthetics, not here. An icon pack also sets colors.

The hotspots look different from the preview row. A hotspot with its own Color Override or Variant in the Hotspots tab keeps it. A tour on a Free plan in a Pro theme that was never hosted shows the Default look.

The Preset list says Custom. You changed one of the four style settings by hand. Pick a preset again, or use Save preset to keep your style.