Sitecore Image hotspot module


This application allows content editors and authors to add hotspot components on any particular image wherever they would like to show the description related to it.

Need for Hotspot Component:

  • Hotspot components provides user to check the description over the images without occupying much space on the image
  • We don’t need to add content on images.
  • We can add them in component and which enables user to see it in similar way as tooltip.
  • We can add as many hotspots components as we can on a single image.


Business Opportunity:

It is frequently necessary to add content on images which makes the look of the image awkward. The hotspot component provides a different way to show the content on any particular image.

Instead of adding content over the image we can add hotspot components which shows content on clicking on the hotspot. It behaves like a tooltip where the content is displayed in the popup.

Features and Functions:

The main features of the component are listed below:

In Experience Editor Mode 

  • The components will provide a button which is used to create new hotspots in sitecore while they open the page in experience editor.
  • Once you click on create hotspot, item will be automatically created and will be assigned to the particular image on which you create it.
  • It provides three icons on the hotspot component.

3.1) Edit Icon: – It provides content editors to change content for that particular hotspot.

3.2) Save Icon:-It provides content editors to change the position of the hotspot on the image and save the position and content of the hotspot.

3.3) Delete Icon:-It provides content editors to delete any particular hotspot on the image.

In Preview Mode 

  • The component will hide all the edit, save and delete icons in preview mode.
  • User will not be able to change the position of the hotspot in preview mode.
  • It only provides users to view the content associated with that particular hotspot.


Quality Ranges:

This section details quality ranges for performance, robustness, fault tolerance, usability, and similar characteristics that are not captured in the Feature Set.

  • Performance:

Hotspot components should be created according to the need. Creating more hotspot components on image makes it invisible.

  • Usability:

As it is an enhancement to the Sitecore editor, it is not expected to be available in applications built on Sitecore.

Other Product Requirements

This section details applicable standards, hardware or platform requirements, performance requirements and environmental requirements.

1 ) Applicable Standards

ASP.NET MVC and Sitecore coding guidelines

2 ) Hardware Requirements

Windows systems (XP, Windows 7,8,10)

3 ) Platform Requirements

Microsoft .Net Mvc Version framework

Sitecore v8.1 and above


  1. Create a sample item which need not have any fields. In presentation details, add MainLayout

  1. Add controller and give “content” as placeholder

  1. Add Data Source to the controller rendering

  1. Select the item and click on Experience Editor. There are few icons which are shown only in experience editor like edit, save and delete icons and not in preview mode and normal mode.

  1. Click on “Create Hotspot” button to create new hotspot. By default item will be created in the middle of the page. You can move it wherever you want once it is created and save it.

  1. You can edit the default content by clicking on edit icon and change the “Title” , “Description” and hit save button to save the content for that particular hotspot, it also save the position as well.

  1. If you don’t want to change the content and you want to change the position of the hotspot, then move the hotspot wherever position you want and hit save icon, it will also save the changes that you have made for content as well.

  1. If you want to delete any particular Hotspot click on delete icon to delete it. An alert will be displayed to confirm the delete action if you click ok, respective hotspot will be deleted. If you don’t want to delete it click on cancel button.

  1. As you can see in the below image the hotspot is deleted.

  1. Select the item and click on preview. In preview mode, you will not be able to see edit, save and delete icons. You will also not be able to move the position of the hotspot image in preview mode.

  1. In preview mode, you will only be able to view the content associated with the respective hotspot. You need to click on the hotspot to view its contents.


About The Author

Leave a Reply