What Are Hotspots & Why Are They Important?

What are hotspots and how do I create one?

Hotspots are invisible areas on the canvas where you can apply interactions to. Using our hotspot tools, you can create hotspots by drawing out either a rectangle or a free-form shape on your canvas.

Why would I want to use a hotspot?

There are three main reasons to consider using hotspots rather than placing interactions directly on objects. They are:

1. They enable you to interact with an area larger than your object: If you want your user to be able to click on an object that is animating (maybe it is bouncing up and down for example) it may make it difficult to click on. By using a hotspot instead, you can ensure the clickable area on the canvas easily covers the object and area surrounding it, without having to worry about the animations applied.
2. Hotspots make your layers panel easier to navigate: If you apply all of your interactions to hotspots, it will be easier to see where all of your interactions are in your layers panel. This will keep you more organized, and if you ever need to make an edit to an interaction it will be easier to find.
3. You can ensure they don’t get covered up by other layers: Because hotspots are invisible, you can keep them all towards the top of your layers panel (like in the screenshot below). This will ensure that they are always at the topmost layer of your experience and no other object will accidentally cover them up on your canvas (if your interaction is covered by another object it will no longer work, so it is important to keep them all at the top of your layers panel at all times).

Hotspot reminders:

1. Hotspots cannot be animated: applying animations to hotspots may cause your interaction to break.
2. On Hover hotspots: Interactions cannot be On Hover on touch screen devices. When you create your mobile and tablet variants from the global layouts panel, you’ll see that any On Hover hotspots will have a red dot next to them in your layers panel, indicating that these are now broken.
3. Always name your hotspots: We will use the hotspot name to report on interactions in the Analytics section.

There are two different types of hotspots that you can create in the studio: square shape hotspots and custom shape hotspots. Custom shape hotspots can be used to create more unique interactive areas, like the triangle shape of this image for example:

To create custom hotspots, choose the Custom Hotspot Tool from the toolbar and click to add points on the canvas to create a shape ( to create a curved line, click and hold a point). To finish the shape, close the hotspot by clicking on the first starting point.

To learn more about applying interactions to your experience, check out this Educate article: Ceros Interactions-The Basics.