Image Hotspots Tutorial
After installing, follow the initial guidelines to easily set up the Image Hotspots widget and customize it with your preferred design. Effortlessly configure the Image Hotspots widget by adhering to these initial guidelines, tailoring it to seamlessly match your preferred design.
Paste the full URL of the background image that you're planning to add hotspots to. You can use any image format like .jpg, .png, .gif, .webp, etc. Make sure the image is hosted online. We recommend using small-sized images (less than 2MB) for smooth performance for your users.
Related topics:
ⓘ After uploading, resize your widget to fit within the inner image frame.
Note that we default set the Image resize option to “Fit,” so if the image overflows, some of your hotspots might extend beyond the visible frame.
Use the slider input to easily define the number of image hotspots you want to have – you can have up to 3 hotspots on your image. If you need more hotspots, consider subscribing to a higher plan.
Related topics:
Click on the "Change Content" button to navigate to the "Content Tab." Here, you'll find a dropdown selector to choose the specific hotspot you want to modify. The available options are based on the number of hotspots you selected in Step 2.
Hover over the selector to identify the hotspots by monitoring the numbers displayed on top of the hotspots in the widget.
Once selected, you can customize the following for the chosen hotspot:
Position settings
Popup Message content
Hotspot enhancing options
Position settings
Hotspot positions are defined by x, y coordinates using numeric values from 0 to 100. Manually select X and Y coordinates by sliding the controller or entering specific numbers. Visit the "Position" section to explore X or Y controllers. Hovering over them provides a preview of the selected hotspot (highlighted in red) with guiding rules and positioning lines in the widget.
Popup Message
Each hotspot can have its own popup message with a title and message as content. Visit the "Popup message" section to explore the controllers. Hovering over it expands the popup message for preview. Edit the Hotspot Title and message as preferred. Leaving both fields empty disables the popup message for that specific hotspot.
Related topics:
Additional Hotspot Settings (Optional):
Explore enhanced options to make your hotspots more informative and attention-grabbing:
Show Animation:
Enable this option to apply a special animation effect to the selected hotspot pointer dot, capturing extra attention from end-users. After enabling, you can change the animation effect in the Design tab under Animation Type.Hotspot Icon:
Choose an icon to be displayed in the center of the hotspot pointer dot. This helps make the hotspot more informative, emphasizing information priority and capturing user attention. After selecting the icon, you can change its color in the Design tab under Icon Color.Pre open:
Enable this option to pre-open the popup message for the selected hotspot during the user's initial preview. This option does not lock the popup opening features (opening and hiding behaviors as per the interaction settings) but opens the popup on the user's initial preview only.
(If you're in the “Content tab,” click the “Back” button to return to the main settings tab.)
Click on the “Change Design” button to access the “Design Tab.” These design settings apply uniformly to each hotspot, and please note that these are global design settings for the widget (individual changes for each hotspot are not available).
Using the panel you can mainly change,
Hotspot Point design
Hotspot Pouop Message design
Image Design
Hotspot Point design
Here you can change the hotspot pointer dot,
Pointer dot Size
Pointer dot Corner radius
Pointer dot Border width
Pointer dot color
Pointer dot border color
Pointer dot Icon color(visible If any hotspot have icon only)
Pointer dot animation type(visible If any hotspot enabled animation option)
Related topics:
Hotspot Pouop Message design
Here you can change popup message modal,
Popup Background color
Popup Text color
Popup text alignment
Popup corner radius
Popup opacity
(If you're in the “Design tab,” click the “Back” button to return to the main settings tab.)
Click on the “Change Interactivity” button to access the “Interactivity Tab.” Here, you can define the opening and closing behavior of hotspot popups based on interaction options.
This setting works with:
Opening Behavior
Hotspot interactivity
Number of Openings Allowed and Related Hiding Behavior
Opening Behavior
First, select the 'Hotspot Opening Behavior', We offer three options for popup messages:
On Interactions: End-users can open the hotspot message using selected interaction options.
Always Open: Popup will automatically open all the time, and there is no way to close them.
No Popup: No popup will display, and end-users will see hotspot pointer dots only.
Note: Choosing "Always Open" and "No Popup" will restrict other interaction options.
Hotspot interactivity
We defaultly select "On Interactions" for you, allowing end-users to explore hotspots interactively. Now, you can select interactivity options suitable for triggering/opening the popup. Interaction options affect the hotspot's pointer dot with the following behaviors:
Hover: Popup message becomes visible when the mouse hovers over the dot.
Click: Popup message appears by clicking (or tapping on mobile) on the dot.
Touch: Holding the click (touching on mobile) on the dot displays the popup message.
Number of Openings Allowed and Related Hiding Behavior:
Determine the number of hotspot popup openings based on your requirements, and the hiding behavior will adjust accordingly.
Only One Hotspot: Users can open one popup on the image at a time. When moving to another hotspot, the opened popup will automatically close/hide.
Multiple Hotspots: If you have comparable information and want to allow opening multiple hotspots, users can do so.
Preview: Hide on Cursor Exit
Preview: Hide on Next Hotspot or on Next Click
Preview: Hide on Next Click
Preview: Hide on Hotspot Toggle Only
We recommend uploading your media to "Wix Media" and using the URL provided there. Please use the guide below to learn how to upload your media to WIX and get the URL, Wix help center.
ⓘ After uploading, resize your widget to fit within the inner image frame.
Note that we default set the Image resize option to “Fit,” so if the image overflows, some of your hotspots might extend beyond the visible frame.
No, adjusting the slider won't delete any entered data or content. It's solely a tool to manage the visibility of hotspots without affecting the data you've entered.
Visit content tab, select hotspot that you want to hide the popup message, scroll to “Popup message” section, Leave Title and Message textfileds empty.