Product Hotspot

Product Hotspot

Transform any image or video into an interactive showcase with clickable hotspots revealing product details, pricing, and purchase options: perfect for e-commerce and product tours.

Details

Create engaging product experiences with the interactive hotspot component. Transform static images or dynamic videos into interactive showcases where viewers can click or hover over specific areas to reveal detailed product information, pricing, and purchase options. Each hotspot pulses with customizable animations to draw attention and guide user interaction through a smooth, professional experience.

The component intelligently positions information cards near hotspots while automatically avoiding screen edges and overlaps, ensuring information is always readable and accessible. Each hotspot can also override the automatic placement with a manually set position - left, right, top, or bottom - giving you full control over the layout. With built-in support for both image and video backgrounds, product thumbnails, pricing displays, and call-to-action buttons, you can create complete shopping experiences without leaving the media. Whether you're showcasing products on an eCommerce store, presenting fashion lookbooks, tech product features, video demonstrations, or interior design walkthroughs, this component delivers an intuitive and visually stunning user experience.

Features

• Dual media support with image or video backgrounds for versatile presentations

• Fully customizable colors & typography

• Interactive hotspots with pulsing beacon animations for visual attention

• Adjustable pulse animations with size, intensity, and speed controls

• Intelligent card positioning that automatically adapts to available space

• Per-hotspot card position override with left, right, top, and bottom options

• Customizable hotspot appearance with circle or square shapes

• Multiple center icon options including plus, dot, ring, cross, or custom icons