Home

Services

Content Management System (CMS)

Digital Asset Management (DAM)

Product Information Management (PIM)

View all services ▸

Resources

Contentful

Image Hotspot Creator

Case Studies

Digital Asset Management (DAM)

Publication Management system (PMS)

Mailer Template

View all Case Studies ▸

Blogs

About Us

Image Hotspot Creator

In this article you will learn,

Overview

Requirements

How does the app work?

Where it can be used?

End-User License Agreement

Code documentation

Overview

Hotspot : A hotspot is a region in a picture that has to be highlighted clearly.

Multiple hotspots may be created in a picture by editors using the Hotspot Creator widget. Simply click and drag on the image to place a hotspot where users want it.

It will be simpler to use this Hotspot maker if there is a picture and a section of the picture that has to be highlighted. The created hotspots can also be edited and deleted after creation.

Requirements

To use this app, user will need:

A content type with three fields in it.

A field type of “Short Text” named “Title”.

A field type of “Short Text” named “Image URL”.

A field type of “JSON Object” named “hotspots”.

How does the app work?

Once the installation of the custom application is completed, go to the content type and add the custom application to the entry editor.

Go to the content section, select the content type that was created, and click the add entry button.

Open the Hotspot Creator in the Entry Editor and upload a new picture or select an existing image from the contentful asset.

To create hotspots, click the crop icon and drag to select the part of the image that has to be highlighted.

The coordinates are shown on the right side of the image, where changes are made for the created hotspot.

Click save button to save the hotspot or Cancel to remove it.

The Created hotspots are displayed under the Existing hotspot section. It can also be edited by clicking on the Title of the hotspot.

Once the creation is completed move to the Editor of Contentful, and the values are updated in the fields as user created.

The coordinates are,

x - Top of the hotspot

y - Left of the hotspot,

height - Height of the hotspot,

width - Width of the hotspot,

name - Name of the hotspot,

borderColor - Color of the hotspot border,

hotspotX - Top of the point inside the hotspot,

hotspotY - Left of the point inside the hotspot.

These coordinates are stored as an array called hotspots in the json object field.

Where it can be used?

If a particular area in a picture has to be highlighted and an action like redirecting or opening a popup should be taken while clicking or hovering over the particular area, this Image hotspot creator will make it easier to reach the goal by modifying the json object.

Example,

If there is a picture that has a number of people in it, then it can be made as clicking on a person which redirect to his Instagram profile by adding a new key and value for the profile url in the json object and using that url a developer can make it interactive.

If there is a picture that consists of a Table, a chair, a laptop, mobile, etc.There should be a seperate key and value that has the url for every product,with those keys and values developer can make it interactive, When clicking on each object, there should be a popup that does some action, like displaying detailed information of that particular product or redirecting to the shopping page for that particular product.

Privacy Policy

Last updated: 29 Aug 2023

This Privacy Policy outlines how Sudoboat ("we," "our," or "us") collects, uses, and safeguards personal information when you use the "Image Hotspots Creator" application (the "Application"). Please read this Privacy Policy carefully to understand our practices regarding your information and how we handle it.

Usage Data

The Application doesn't collect any personal or non-personal, technical information about your use of the Application,

Cookies and Similar Technologies

The Application does not use cookies, tracking pixels, or similar technologies. We do not collect information about your online activities over time and across third-party websites or applications.

Third-Party Services

The Application does not integrate with any third-party services, platforms, or APIs. We do not share personal information with third parties for marketing, advertising, or any other purpose.

Security

We take reasonable precautions to protect the personal information provided through the Application. However, no data transmission over the internet or data storage system can be guaranteed to be 100% secure. If you have any security concerns, please contact us at contact@sudoboat.com

Changes to this Privacy Policy

We may update this Privacy Policy to reflect changes to our practices or for other operational, legal, or regulatory reasons. Any changes will be posted on this page, and the "Last Updated" date at the top will indicate the date of the changes. Your continued use of the Application after any changes signifies your acceptance of the updated Privacy Policy.

Contact Us

If you have any questions or concerns about this Privacy Policy, our data practices, or your interactions with the Application, please contact us at contact@sudoboat.com

Sudoboat Private Limited

Coimbatore

Mail To: contact@sudoboat.com

The MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Terms & Conditions

Cookie Policy