Freakout AIFreakout AI

Hotspots Tab

Use Hotspots to place information markers on the selected object and to edit the shopper-facing product card.

Marker#

Controls:

  • Add hotspot: creates a new marker on the selected object
  • Place or Reposition: enters placement mode; click a model surface to set the marker anchor
  • Marker color: changes the visible marker color
  • Marker shape: changes the marker icon
  • Selectable: includes the hotspot in shopper navigation and hides the product card while its annotation card is open

Card#

Controls:

  • Title, Description, Image URL, and URL: populate the shopper-facing card content
  • Content type: switches between Default, Custom HTML, and Iframe cards
  • Display card on: opens the card on Hover, Click, or Focus
  • Card placement and Card offset: position the card on desktop; mobile opens cards as resizable half-height bottom sheets
  • Connector style: chooses Line, Dashed line, or no connector between marker and card
  • Connector color: changes the connector color; defaults to the marker color
  • Action: adds a button to the default card that runs Turn on camera or Connect agent
  • Default card layout: chooses image placement, image alignment, and text wrapping
  • Iframe settings: sets iframe width, allow permissions, sandbox tokens, and referrerPolicy
  • Custom HTML: accepts safe HTML with inline CSS and the template values {title}, {description}, {url}, and {image}

Custom HTML example:

<div style="border-radius: 20px; background: #111111; padding: 24px; color: white;">
	<h3 style="margin: 0 0 12px; font-size: 24px;">{title}</h3>
	<p style="margin: 0; line-height: 1.5;">{description}</p>
</div>

Highlight and Color#

Controls:

  • Shader effect: highlights the targeted mesh with Pulse or Glow while the card is open
  • Shader color: changes the highlight color; the editor preview tracks this swatch
  • Color picker: adds swatches that let shoppers recolor the targeted mesh or material slot from the annotation card

Product Card Data#

Use the product card data panel to make the selected product or uploaded model selectable in the shop viewer.

Controls:

  • Product title, Image URL, Store URL, and Price: populate the shopper-facing product card
  • Product ID and Shopify ID: optional identifiers for matching external catalog data
  • Selectable in shop: lets the viewer stop on this product or asset and show its product card
  • Save product data or Save asset data: saves the card data before publishing

Good to know:

  • Both products and uploaded models support hotspots; published rooms render them in the shop viewer
  • Store URL and Selectable in shop are required for supplier-style navigation
  • Product and asset card data are edited from this same tab
  • A live product card preview appears before you save
  • Custom HTML is sanitized; unsafe attributes and URL-based CSS values are stripped
  • Iframe cards still respect the destination site's X-Frame-Options and Content-Security-Policy: frame-ancestors headers

Animations Tab