Hotspot module
Hotspot modules allow you to provide additional details about products when a visitor clicks an image. When clicked, the hotspot module opens an overlay with more information.
Note
Hotspots exist on top of an image that you select when creating a hotspot module. Hotspots can only be configured by editing this image from content edit form. See the Image field below.
To create a hotspot module:
- In the header, click .
- From the Create list, select Hotspot Module.
- Using the following table as a reference, complete the fields as needed.
- Click Save.
Hotspot module fields
Click each tab below to see a description of the associated fields.
| Field | Description |
| Internal Name | Enter an internal name for this asset. Brightspot uses this name internally, such as in the search panel and recent activity widget. This name is not visible to visitors to your site. |
| Item | Select Internal or External.
|
| Title | Enter a title for this asset. This title is visible to the visitors to your site. If promoting an internal asset, the title defaults to the promoted asset's description. |
| Description | Enter a description that describes this asset. This description is visible to the visitors to your site. If promoting an internal asset, the description to defaults to the promoted asset's description. |
| Image | Select an image on which you place hotspots. Once selected, click , then do the following: Under the Hotspots tab, click Add, then select one of the following options:
For each, from the Icon list, select one of the following icons:
Then, fill out the fields as necessary. For details, see Promo module or Product Promo module. You can drag the hotspots around the image to ensure proper placement.  |
| Call To Action Button Text | Enter text appearing on the call-to-action button. This text is visible to the visitors to your site. |
Advanced
| Field | Description |
| Hide Title | Toggle on to suppress display of the asset's title. |
| Hide Description | Toggle on to hide the descriptions of the asset(s) contained in the module. |
| Hide Image | Toggle on to hide the image included on the asset contained in the module. |
| Hide Category | Toggle on to hide the category of the asset included in the module. |
Hotspot Module Styles
| Field | Description |
| Template | Select the template of this module from the list of options. Templates are visual presentation presets that differ depending on the type of module. |
| Preset | Select one of the following:
|
| Choose a Background Color | Enter the hexadecimal value of a background color for this module. For instance, entering #000888 provides a dark blue background. |
| Choose the Aspect Ration of the Main Image Hotspot Module | Select one of the available aspect ratios for the image in the module. |
| Module Padding Top | Overrides the default padding at the top of the module as specified in your theme's CSS file. You can choose from None, Small, Medium, or Large. |
| Module Padding Bottom | Overrides the default padding at the bottom of the module as specified in your theme's CSS file. You can choose from None, Small, Medium, or Large. |
| Use Text Colors | Select the color to use for text.
|
| Choose the Size of the Promos in the Hotspot Modal | Select a size of the promo modules that appear after clicking a hotspot. |
| Choose the Aspect Ratio of the Image of the Promos Modal | Select one of the available aspect ratios for the images of the promo modules that appear after clicking a hotspot. |
| Field | Description |
| Category | Enter text to override what appears as the eyebrow text when this promo appears on a page. |
| Anchor | Modify the anchor to something that would make sense when appearing in an Anchor field's drop-down menu on another asset. This allows you to directly link to this module in another asset. Being specific makes it easier to identify in a list of other anchors. |
The information on this tab presents a graphical or tabular representation of this asset's analytics. For information about configuring analytics ingestion and presentation, see Brightspot Analytics and Google Analytics.
| Field | Description |
| Locale | Sets the content's locale. This setting can also be used to auto-localize content based on the users requested locale. |
Previous Topic
Gallery module
Next Topic
HTML Embed module