Using Hotspots

*Press F to view this microapp in full screen.
In this lesson
  1. Creating a scroll
  2. Editing a scrolling canvas
  3. Testing your scroll

Hotspots let you create links in your microapp. Using hotspots, you’re able to link to other pages, states, and overlays, as well as external sites, files, or phone or email contacts.

Creating a hotspot

To add a hotspot to your microapp, drag a hotspot to the canvas and adjust the boundaries to cover the area you want to act as a button.

Select a target

Once you have placed your hotspot, use the “Select a target” dropdown in the flyout to link it. You can specify the following types of targets:

  • Microapp page/overlays/page states Tiled lists all the available microapp pages, overlays, and page states to link to by name in sequential order. Select the desired screen to link it.
  • External page/file You can link to an external web page or an external file that you want opened (like a PDF) or downloaded. Select External page/file from the dropdown list. Paste the link to the webpage or file in the URL field. When selected, Tiled opens the location in a web browser.
  • Phone Number Tiled allows you to link the hotspot to a phone number. Select Phone Number from the dropdown list, and enter the desired number. When selected, the viewer’s device attempts to call the telephone number using the configured default application.  
  • Email Tiled allows you to link the hotspot to an email address. Select Email from the dropdown list, and enter the desired email address. When selected, the viewer’s device attempts to create an email message using the default email application, with the specified address in the To field.

NOTE: Target drop-downs have a search ahead feature to allow users to search for their desired target quickly and easily.

Create a multi-hotspot

If you design a microapp page where you want to link multiple elements that are grouped together side-by-side or on top of each other (for example, a navigation menu), you can create a multi-hotspot.  

Place the hotspot and create the initial link as normal. Then adjust it so that it covers all of the elements you want linked. Ensure that the hotspot is selected, and repeatedly click the + button on the Hotspot menu until you equal the number of desired links. The Tiled Editor divides the hotspot into equal partitions. Specify destinations for each partition as desired.

By default, the Tiled Builder divides the hotspot into vertical partitions. Click Horizontal to change them to horizontal partitions.

To delete a partition, hover over the partition name and select Delete.

Create a transition

If you want a transition for your link, such as a fade, click the Transition dropdown list and select the desired transition. No Transition is selected by default.  

Completion event

You can configure the hotspot as a completion event, so that when the viewer selects the link, Tiled records it as a completion event for the microapp. To set the hotspot as a completion event, move the Completion slider to the right.

Note: Completion events are associated with the entire hotspot. So, if Completion is selected for a multi-hotspot, then all links activate the completion event.