The Hotspot widget is designed to assist you in creating interactive images that highlight key information, enhance engagement, and boost conversions on your website.
Adding Hotspot widget
Add a Hotspot widget to your website. For details, see Add Elements article.
Content tab
Image
- Choose Image: Click the default image to select one from the media library or upload a new one.
- Generate with AI: Generate a new image using AI. Click the button and in the popup window, describe the image you want the AI to create. Include details about the style, aspect ratio, and the number of images you'd like generated for selection. You can find more information here.
- Image Resolution: Set the size of your image. You can set it from the dropdown menu prefilled options or add a custom size.
Hotspot
Each Hotspot Content and Position can be managed separately. To open the management options, please, click the required Hotspot label.
Content:
- Label: Input text to display a label instead of an icon indicator.
- Link: Enter a URL for the hotspot. Dynamic options can be applied.
- Icon: Select an icon for your hotspot from the library or upload your own in SVG format.
- Custom Hotspot Size: Toggle this to set a custom size for the label.
Note:
The Min Width and Min Height let you adjust the minimum width and height of the label. These options are available to be customized if Custom HotSpot Size is enabled.
- Tooltip Content: Use the text editor to input the content you want to display in the tooltip. HTML is supported.
Position
- Horizontal Orientation: Determine where your hotspot begins, choosing either left or right.
- Offset: Slide to adjust the hotspot's horizontal position as a percentage.
- Vertical Orientation: Choose whether your hotspot starts at the top or bottom.
- Offset: Use the slider to adjust the hotspot's vertical position as a percentage.
- Custom Tooltip Properties: Offers additional options specifically for displaying the current hotspot.
Note:
The below options are available to be customized if Custom Tooltip Properties is enabled.
- Position: Select from left, top, right, or bottom.
- Min Width: Adjust the width of the box in pixels.
- Text Wrap: Toggle this option to wrap text within your hotspot.
Once you have customized the specific settings, you can proceed with adjusting the general settings of your Hotspot. Here are the steps:
- Add Item: You can create a new Hotspot by clicking the Add Item button and filling in the required data.
- Animation: Choose the animation effect for your icon.
- Sequential Animation: Toggle to activate a sequence of animations.
- Sequential Duration (ms): If sequential animation is enabled, specify the duration of each animation in milliseconds.
Tooltip
- Position: Select the position of the tooltip content from options such as Left, Top, Right, or Bottom.
- Trigger: Choose between None, Hover or Click to activate the tooltip.
- Animation: Select the animation style for the tooltip appearance.
- Duration (ms): Adjust the duration of the animation.
Style tab
Image
- Alignment: Adjust the alignment of your image.
- Width: Modify the width of your image.
- Max Width: Set the maximum width limit for your image.
- Height: Change the height of your image.
- Opacity: Control the transparency level of your image for both the Normal and Hover states.
- CSS Filters: Apply various CSS filters to your image for both the Normal and Hover states.
- Transition Duration (ms): Set a transition duration under the Hover state.
- Border Type: Choose the type of border for your image.
- Border Radius: Round the corners of your image.
- Box Shadow: Add a shadow effect to your image
Hotspot
- Color: Pick a color for your hotspot using the color picker.
- Size: Change the size of your hotspot.
- Typography: Define the font properties for the hotspot label.
- Min Width: Set the minimum width for the hotspot label area.
- Min Height: Determine the minimum height for the hotspot label area.
- Box Color: Select a background color for the label using the color picker.
- Padding: Adjust the padding around the label.
- Border Radius: Round the corners of the label.
- Box Shadow: Add a shadow effect to the label box.
Tooltip
- Text Color: Choose a color for the tooltip text using the color picker.
- Typography: Define the font properties for the tooltip text.
- Alignment: Set the text alignment of the tooltip to left, right, or justified.
Box
- Width: Adjust the width of the tooltip box.
- Padding: Set the padding within the tooltip box.
- Color: Pick a background color for the tooltip using the color picker.
- Border Radius: Round the corners of the tooltip box.
- Box Shadow: Add a shadow effect to the tooltip box.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.