Message From Author (CodeTides)
Thank you for purchasing HotSpot Pro plugin for WordPress. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thank you so much!
Created on: 18/10/2021 By: CodeTides
About HotSpot Pro
HotSpot Pro is a plugin for wordpress used to create stylish and creative popups easily within a minute.
Get Started
Learn how to install and configure settings for HotSpot Pro, such as your how to create your first hotspot and how to use it via shortcode.
Installation with FTP
- Unzip hotspot-pro-bundle.zip into `hotspot-pro-bundle` folder
- Inside `hotspot-pro-bundle` folder, you will find hotspot-pro.zip file which is the actual plugin file.
- Unzip again hotspot-pro.zip into `hotspot-pro` folder
- Upload the `hotspot-pro` folder to the `/wp-content/plugins/` directory on your web server.
- Click on the Plugins tab from your WordPress admin.
- Find HotSpot Pro in the plugins list and click Activate.
- HotSpot Pro will displayed on left side menu of Wordpress.
- Click on HotSpot Pro, it will leads you to dashboard where you can view all your created hotspots and hotspot types.
Installation with WordPress Admin Dashboard
- Unzip hotspot-pro-bundle.zip into `hotspot-pro-bundle` folder
- Inside `hotspot-pro-bundle` folder, you will find hotspot-pro.zip file which is the actual plugin file.
- Unzip again hotspot-pro.zip into `hotspot-pro` folder
- Upload the `hotspot-pro` folder to the `/wp-content/plugins/` directory on your web server.
- Click on the Plugins tab in left menu from your WordPress admin dashboard.
- Click on Add New tab in top of the page WordPress admin dashboard.
- Click on Upload Plugin button and select the hotspot-pro.zip file and press upload button.
- Find HotSpot Pro in the plugins list and click Activate.
- HotSpot Pro will displayed on left side menu of Wordpress.
- Click on HotSpot Pro, it will leads you to dashboard where you can view all your created hotspots and hotspot types.
Validate Purchase Key or Purchase Code
Before using HotSpot Pro Plugin, you must need to validate your purchase code or purchase key to get full functional working plugin.
- Find HotSpot Pro on left side menu of Wordpress Dashboard.
- Click on Settings Panel which will leads yoy to license validation page of HotSpot Pro.
- Insert Your Email, Codecanyon Username and purchase code and then click on validate license button.
- Wait for the message.
- It's done
Now you have the full functional and working version of hotspot pro.
How To Create Your First HotSpot
Learn how to use hotspot pro plugin and create your first hotspot in few easy steps.
You have to create hotspot types first, one instance of hotspot type can be used multiple times in hotspot. Learn How!
Step 1 :- Mouse over on hostspot pro menu in left side then click on hotspot types, as shown in below image.
Step 2 :-It will goes to the landing page of all hotspot types created by you. Click on Add New to create a new one or Click on any existing hostpot types for editing, as shown in below image.
Step 3 :-This step is divided into 3 sections,
1- Title / Heading
2- Hotspot Content Type
3- HotSpot Button / Anchor Style
1- Title / Heading:-Add the heading or title of the hotspot which will be shown to the pages i.e click here or more info...
2- Hotspot Content Type:-Choose one option for your button type from the list of four options
i-Plain Text (Display plain text look like a part of article or paragraph)
ii- Plain Text with Icon (Display text with icons or emoji and look like a part of article or paragraph)
iii- Only Icon (Display Icon or emoji as part of article or paragraph)
iv- Image (Display image as part of article or paragraph)
For Section 1 - Title / Heading And 2- Hotspot Content Type, see below image
3- HotSpot Button / Anchor Style:-Create your own theme or style for your hotspot which will match with your website theme.
Add or define all options in your theme styler or leave empty to use default values.
For 3- HotSpot Button / Anchor Style, see below image
| Options | Value | Default |
|---|---|---|
| Width | add value for width in pixels | auto |
| Height | add value for height in pixels. | auto |
| Padding | Add value for padding for top, left, bottom and right | 0 |
| Border | Add value for border for top, left, bottom and right | 0 |
| Border Properties | select border properties i.e border style - e.g solid, dashed, dotted ..... border color - Select using color picker Corners - Round or Straight |
solid red straight |
| Background Color | select using colorpicker | red |
| Background Hover Color | select using colorpicker | red |
| Font Color | select using colorpicker | white |
| Font Hover Color | select using colorpicker | white |
| Font Size | add value for font size in pixels | 12px |
| Custom CSS | add any custom css for your button with .cls_css{} and every option will be with !important attribute |
Step 4 :-Preview your hotspot button / anchor which you created, as shown in below image.
Step 5 :-Click on update/Add button in publish tab once your hotspot type is ready, as shown in below image.
You have successfully created hotspot type and create a hotspot content from this hotspot button type which you just created.
Now Learn how to create hotspot and how to use hotspot types created above.
Step 1 :- Mouse over on hostspot pro menu in left side then click on Add New, as shown in below image.
Step 2 :- Add Title and Description of the hotspot, as shown in below image.
Title :- Title will not display, it's for your rememberce what you have created.
Description :- Description will be displayed in your hostspot as tooltip text or overlay text.
Step 3 :- This Step is divided into 4 sections, as shown in below image.
i- Hotspot Shortcode (This shortcode has been used to display your hotspot anywhere in the website)
ii- Hotspot Executing Event (Choose how you want to exexute your hotspot onHover or onClick)
iii- Hotspot Display Event (Choose how you want to work your hotspot as tooltip or full screen overlay)
iv- Hotspot Type (Choose your hostspot type from list which you created in above)
Step 4 :- Add or Fill options for your hotspot theme which will match with your website theme, if you leave empty then default values will be used, as shown in below image.
| Options | Value | Default |
|---|---|---|
| Width | add value for width in pixels | auto |
| Height | add value for height in pixels. | auto |
| Padding | Add value for padding for top, left, bottom and right | 0 |
| Border | Add value for border for top, left, bottom and right | 0 |
| Border Properties | select border properties i.e border style - e.g solid, dashed, dotted ..... border color - Select using color picker Corners - Round or Straight |
solid red straight |
| Background Color | select using colorpicker | red |
| Font Color | select using colorpicker | white |
| Font Size | add value for font size in pixels | 12px |
Step 5 :- Click on update/Add button in publish tab once your hotspot is ready, as shown in below image.
You have successfully created hotspot type and hotspot, Now you can used it any where in your website by using its shortcode.
Example Usage of HotSpot Pro
[hotspot id='12345']
If you are using one instance of hotspot in multiple times in a single page or post then used repeat attribute with value yes
[hotspot id='12345' repeat='yes']
Credits
Magnific Popup
https://dimsemenov.com/plugins/magnific-popup/
Once again, thank you so much for purchasing HotSpot Pro plugin. As I said at the beginning, I'd be glad to help you if you have any questions relating to this plugin. No guarantees, but I'll do my best to assist. If you have a more general question relating to the plugin on CodeCanyon, you might ask your questions in the "Item Comments" section.