Brightspot Content Types Guide

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:

  1. In the header, click add.
  2. From the Create list, select Hotspot Module.
  3. Using the following table as a reference, complete the fields as needed.
  4. Click Save.

Hotspot module fields

Click each tab below to see a description of the associated fields.

FieldDescription
Internal NameEnter 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.
ItemSelect Internal or External.
  • Internal—Select an internal asset to promote in this module. Once selected, if necessary, select an anchor and target.
  • External—Select an external asset to promote in this module. Once selected, enter a URL and, if necessary, select a target.
TitleEnter 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.
DescriptionEnter 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 brush, then do the following:

Under the Hotspots tab, click add_circle_outlineAdd, then select one of the following options:

  • Page Promo—A promotion of a page.
  • Product Promo—A promotion of a product.

For each, from the Icon list, select one of the following icons:

  • Plus
  • Magnify
  • Tag
  • Flag
  • Image
  • Location
  • Expand

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.

Hotspot module.png Hotspot module.png

Call To Action Button TextEnter text appearing on the call-to-action button. This text is visible to the visitors to your site.

Advanced


FieldDescription
Hide TitleToggle on to suppress display of the asset's title.
Hide DescriptionToggle on to hide the descriptions of the asset(s) contained in the module.
Hide ImageToggle on to hide the image included on the asset contained in the module.
Hide CategoryToggle on to hide the category of the asset included in the module.

Hotspot Module Styles


FieldDescription
TemplateSelect the template of this module from the list of options. Templates are visual presentation presets that differ depending on the type of module.
PresetSelect one of the following:
  • None—Applies styling from the site's theme.
  • Custom—Opens a form to customize the site's theme for this asset.
  • (Various)—Aside from None or Custom, there may be additional options in this list depending on the value selected in the Template field. If the selected template has presets, then those presets are able to be selected in this list and applied. For information about configuring template presets, see Creating a template preset.
Choose a Background ColorEnter 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 ModuleSelect one of the available aspect ratios for the image in the module.
Module Padding TopOverrides 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 BottomOverrides 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 ColorsSelect the color to use for text.
  • Standard—Use the text color specified in the site's theme.
  • Inverse—Use the inverse of the text color specified in the site's theme.
Choose the Size of the Promos in the Hotspot ModalSelect a size of the promo modules that appear after clicking a hotspot.
Choose the Aspect Ratio of the Image of the Promos ModalSelect one of the available aspect ratios for the images of the promo modules that appear after clicking a hotspot.

FieldDescription
CategoryEnter text to override what appears as the eyebrow text when this promo appears on a page.
AnchorModify 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.

FieldDescription
LocaleSets 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
Was this topic helpful?
Thanks for your feedback.
Our robust, flexible Design System provides hundreds of pre-built components you can use to build the presentation layer of your dreams.

Asset types
Module types
Page types
Brightspot is packaged with content types that get you up and running in a matter of days, including assets, modules and landing pages.

Content types
Modules
Landing pages
Everything you need to know when creating, managing, and administering content within Brightspot CMS.

Dashboards
Publishing
Workflows
Admin configurations
A guide for installing, supporting, extending, modifying and administering code on the Brightspot platform.

Field types
Content modeling
Rich-text elements
Images
A guide to configuring Brightspot's library of integrations, including pre-built options and developer-configured extensions.

Google Analytics
Shopify
Apple News