# Interactive Product Showcase v2 - Usage Guide
## 1. Introduction
The Interactive_Product_Showcase component enables users to create engaging product displays with interactive hotspots and tooltips.
## 2. Features
- Add multiple interactive hotspots on a background image.
- Customize hotspot icons, colors, and sizes.
- Display tooltips with titles, descriptions, and optional images or videos.
- Support for customizable button actions in tooltips.
- Responsive design for various screen sizes.
- Video support with auto-play, loop, and loading indicator.
## 3. How to add
1. Open the downloaded file and copy the Framer component link provided inside.
2. Open your project in Framer.
3. Paste the copied link directly onto the Framer canvas.
4. The component will be added to your project automatically.
5. You can then find it on the canvas and in Assets → Components.
6. From there, you can drag and reuse it anywhere in your project as many times as needed.
## 4. How to Use
- Select the Interactive_Product_Showcase component on your canvas.
- In the properties panel, set the Background Image to your desired product image.
- Define the Hotspots by adding details such as position (X, Y), title, description, media type (image or video), and optional button text and link.
- Customize the Hotspot Button Style to select the icon type, size, and colors.
- Adjust the Tooltip Style to modify the appearance of tooltips, including size and shape.
- Set typography options for tooltips in the Tooltip Typography section.
- Enable or disable the Tooltip Button based on your needs.
## 5. Property Controls Reference
### backgroundImage
- src (String) - URL of the background image.
- srcSet (String, Default: undefined) - Optional responsive image sources.
- alt (String, Default: "Background") - Alt text for accessibility.
### hotspots
Configures interactive hotspot markers.
- id (String, Default: undefined) - Unique identifier for the hotspot (hidden).
- x (Number, Default: 50) - Horizontal position from left (0-100%).
- y (Number, Default: 50) - Vertical position from top (0-100%).
- title (String, Default: "Hotspot Title") - Title shown on hover and in tooltip.
- description (String, Default: "Hotspot description") - Detailed description shown in tooltip.
- tooltipMediaType (Enum, Default: "image") - Media type for tooltip: image or video.
- tooltipImage (ResponsiveImage, Default: undefined) - Image displayed at the top of the tooltip (visible when Media Type is "image").
- tooltipVideo (File, Default: undefined) - Video displayed at the top of the tooltip with auto-play and loop (visible when Media Type is "video"). Supported formats: mp4, webm, mov.
- buttonText (String, Default: "View Details") - Call-to-action button label.
- buttonLink (String, Default: "https://example.com") - URL opened when the button is clicked.
- tooltipPosition (Enum, Default: "auto") - Tooltip positioning: auto or custom.
- tooltipVertical (Enum, Default: "top") - Vertical position: top or bottom (hidden if tooltipPosition is not custom).
- tooltipHorizontal (Enum, Default: "right") - Horizontal position: left or right (hidden if tooltipPosition is not custom).
### hotspotStyle
Controls the appearance of hotspot buttons.
- icon (Enum, Default: "plus") - Icon style: plus, arrow, or pulse.
- iconSize (Number, Default: 12) - Size of the icon in pixels.
- color (Color, Default: #3b82f6) - Background color of the hotspot button.
- iconColor (Color, Default: #ffffff) - Color of the icon and text.
### hotspotLabel
Configures the appearance of hotspot labels.
- show (Boolean, Default: true) - Whether to show the label on hover.
- font (FramerFont, Default: {}) - Typography settings for the label text.
### tooltipStyle
Controls tooltip appearance.
- size (Enum, Default: "medium") - Tooltip size: small, medium, or large.
- shape (Enum, Default: "rounded") - Tooltip shape: rounded or square.
- backgroundColor (Color, Default: #ffffff) - Background color of the tooltip.
- textColor (Color, Default: #1f2937) - Text color within the tooltip.
### tooltipTypography
Configures tooltip text styles.
- titleFont (FramerFont, Default: {}) - Typography settings for the tooltip title.
- descriptionFont (FramerFont, Default: {}) - Typography settings for the tooltip description.
### tooltipButton
Controls the appearance of the button in tooltips.
- show (Boolean, Default: true) - Whether to display the call-to-action button.
- textColor (Color, Default: #ffffff) - Text color of the button.
- font (FramerFont, Default: {}) - Typography settings for the button text.
---
## 6. Version History
| Version | Changes |
|---------|---------|
| 2.0.0 | Added video support with media type selector (image/video), loading indicator for videos |
| 1.0.0 | Initial release with image-only tooltip support |
MJ Jung
