Table of contents

  1. Plugin Installation
  2. Creating a Hotspot Image
  3. Hotspot Image settings
  4. Creating new hotspots
  5. Displaying in posts, pages and widgets
  6. Editing (visitor) hotspots
  7. Customising single hotspots
  8. Support
  9. Requirements
  10. Copyright
  11. Credits & License

1) Plugin Installation

Unzip the .zip file you received when purchasing the plugin.

Installing via the WordPress admin panel

  1. In the WordPress admin menu, go to Plugins > Add New
  2. Click the ‘Upload plugin’ link on the top of the screen. Here you can select a file to install by uploading it. Locate the file contained in the .zip file you unzipped.
  3.  After uploading, click ‘Active plugin’ to finish the plugin installation.

Installing via FTP

If you cannot install the plugin via the admin menu, you can upload the contents of to your website directly.

  1. Unzip the
  2. Upload the ‘hotspots-comments’ folder via FTP to your_site/wp-content/plugins/
  3. After uploading the folder, go to Plugins in the admin menu. Click ‘Activate’ under the ‘Hotspots with Comments’ plugin.

2) Creating a Hotspot Image

After you have successfully installed the plugin, a new tab ‘Hotspot Images’ appears in the navigation sidebar. Here you can create Hotspot Images: these can contain the hotspot icons and pop-ups.

Click ‘Add new’ to create a new Hotspot Image:


(1) Type a title Select a title for your Hotspot Image.

(2) Select an image Click the ‘Select image’ button. The Media Browser appears and you can select an image from your library, or upload an image from your computer. Click ‘Select image’ again to insert the image.

(3) Allow comments To allow visitors to create hotspots, make sure to check the ‘Allow comments’ checkbox. If the ‘Discussion’ meta-box is not visible, click the ‘Screen Options(5), and check the ‘Discussion’ checkbox.

(4) Publish Don’t forget to click the ‘Publish’ button when you are done. Now you can start adding hotspots to the image and include the Hotspot Image on your posts or pages.

 3) Hotspot Image settings

In the ‘Hotspot Image settings’ box you can define the global settings for this Hotspot Image.


icon: the default icon used for the hotspot

icon color: the default color of the icon. Click the ‘Select Color’ button for the color-picker

icon size: the icon size in pixels

pop-up style: Click the pop-up to choose choose one of the various styles and colors

pop-up position:

[ ] hover: the pop-up is shown when your mouse hovers over an icon (on mobile the pop-up is shown when you tap the icon)

[ ] click: the pop-up is shown when you click the icon.

These settings can be changed for individual hotspots. See ‘Customize icons and pop-ups’ for details.

Visibility Check this to show the hotspots to everyone. Uncheck this to keep them private and only visible in the admin.

Comment form By default the standard WordPress form is used to create a new hotspot. Enable AJAX form to create hotspots without reloading the page.

Don’t forget to save our settings!

4) Creating new hotspots

Hotspots can be created by your visitors and you when you include a Hotspot Image in a page or post (see shortcodes). You can also create hotspots from within the WordPress admin.

Create hotspots on frontend

If comments are enabled you can click anywhere on the image to place a hotspot-icon. A comment-form will appear under the image. After posting, the comment will appear in the pop-up. When guests of your site post anonymously, you can approve them first from the WordPress admin. You can control this behaviour with the default WordPress comments settings. More information about WordPress comments.

Create hotspots from within admin

If you disabled comments for the Hotspot Image, you can still add hotspots yourself from within the anywhere on the image in the Hotspot Image edit screen to place an icon.. Click ‘Create new hotspot’ to save the hotspot.


5) Displaying in posts, pages and widgets

After you published the the Hotspot Image you can embed them in posts or pages using shortcodes like:

[hotspotimage id="31"]

Cut-and-paste the shortcode from the ‘Hotspot Images’ screen (as seen below) or the Hotspot Image edit screen.


You can also view the Hotspot Image on your site by clicking the ‘View Hotspot Image’ button just below the title field.

6) Editing (visitor) hotspots

In the Hotspot Image edit screen you can moderate new hotspots. Click or hover over a hotspot so that the pop-up appears. At the bottom you can Approve / Unapprove or trash the hotspot.

You can also change the position of the hotspot by dragging the icon.


Click ‘Edit’ for more moderation options:


7) Customising single hotspots

By default the icons and pop-ups use the global settings defined for the Hotspot Image, but you can customise individual hotspots.

Click ‘Edit’ in the hotspot pop-up. At the bottom you can change the icon and pop-up settings for this individual hotspot:


8) Support

If you have any questions or suggestions at all, please don’t hesitate to contact me at CodeCanyon, or my contact page

9) Requirements

WordPress 3.5 or higher

The plugin has been tested on

10) Copyright

Hotspots Comments – WordPress plugin is copyrighted by DeEindbaas.

Please purchase your copy and license here.

11) Credits & License

jQuery: Main JavaScript library. Used under the MIT license.

Font Awesome: 300+ quality font icons. Used under the MIT and SIL OFL 1.1 license.

qTip2: brilliant tool-tips. Used under the MIT license.