FAQ Submit a request Log in
  1. Moqups Help Center
  2. Working with Moqups
  3. Interactions

Articles in this section

    Hotspots

    Also in this section

    Hotspots

    A Hotspot is a dedicated interactive object to which you can add a Page or Object Interaction.

    Although Hotspots behave like other objects for the purposes of moving, resizing, grouping, and locking, they are designed to be invisible in an interactive Prototype. Accordingly, they work differently than other objects in both Edit and Preview modes:

    • In Edit Mode, they appear as a translucent green overlay so that you can work with them and see where they’ve been applied. But you can also choose to hide them so they don’t get in the way of your ongoing work.
    • In Preview Mode, Hotspots are active and will respond to user actions (called ‘triggers’). In Preview mode, Hotspots are invisible by default – although you can make them temporarily visible by holding down the Shift key.

    The advantage of using a Hotspot – instead of applying a Page or Object Interaction to an existing object – is that you can adjust its size and shape, independent of objects on the page. This means that you can add interactivity over a specific area of a page or group of objects.

    Here are a couple of use cases for Hotspots:

    • Apply multiple areas of interactivity to a larger, single image-upload, such as a finished design
    • Define specific areas of interactivity to stencils made of multiple elements, such as menus
    In this article

    Create Hotspots

    There are three ways to create a Hotspot:

    • Directly from the page by using the right-click context menu
    • From the Hotspots section of the Interactions panel
    • Using the Quick Draw toolkit and Keyboard Shortcut

    We will explain each method below but, first, it’s important to understand a couple of things about the Hotspots you create:

    • If you have no object selected, the Hotspot you create will appear in the upper left corner of your page. If you have an object already selected, the Hotspot you create will be scaled to fit precisely on top of that object’s frame.
    • Just like all the other objects – stencils, images, icons and templates – Hotspots are listed in the Outline Panel. When Hotspots are added to the page, they appear at the very top of the Outline Tree. By default, they are named by number, according to the order that they were added to the page. To change the name of a Hotspot, just double click on its current title in the Outline Tree.

    Create a Hotspot from the Page

    To create a Hotspot on the page:

    1. Right-click on the page to open the Context menu
    2. Click on Create Hotspot
    3. The Hotspot will appear in the upper left corner of your page

    To create a Hotspot over a specific object:

    1. Select an object from the page
    2. Right-click on the object to open the Context menu
    3. Click on Create Hotspot
    4. The Hotspot will appear over the object’s frame

    01._Interactions_-_Hotsphots_-_Create_a_Hotspot_from_the_Page.gif

    Create a Hotspot from the Interactions Panel

    To create a Hotspot on the page:

    1. Click the Interactions Tab to open the Interactions Panel
    2. Go to the Hotspots section and open the Hotspots dropdown
    3. Select Create Hotspot
    4. The Hotspot will appear in the upper left corner of your page

    To create a Hotspot over a specific object:

    1. Select an object from the page
    2. Click the Interactions Tab to open the Interactions Panel
    3. Go to the Hotspots section and open the Hotspots dropdown
    4. Select Create Hotspot for selection

    02._Interactions_-_Hotsphots_-_Create_a_Hotspot_from_the_Interactions_Panel.gif

    Create a Hotspot using the Quick Draw toolkit and Keyboard Shortcut

    To draw a Hotspot from the Quick Draw toolkit or keyboard shortcut:

    1. Click the Hotspot button in the dropdown, or press the H key.
    2. Click and drag the crosshair-cursor to create one or more hotspots. 
    3. Add interactions by using the Interactions panel

    03._Interactions_-_Hotspots_from_Quick_Draw_Dropdown.gif

    Format Hotspots

    After you create a Hotspot, you can adjust its size, position, and style. You can also choose to hide Hotspots by making them invisible.

    Size

    On the page, use the resize handles to change the size of the Hotspot.

    In the Format Panel, use the Width & Height inputs for precise values and fine-tuning, and use the arrow keys, on the keyboard, if you want to change these values incrementally.

    Lock a Hotspot’s proportions with the Lock Aspect Ratio button. After a Hotspot is locked, you’ll have to unlock the aspect ratio if you want to resize it on the horizontal or vertical axis.

    Position

    On the page, select a Hotspot and drag it to the desired position.

    In the Format Panel, set the Hotspot’s position by entering the exact coordinates in the input fields. Your Hotspot’s position is measured in pixel-distance from both the left and top margins. You can use your keyboard’s arrow keys to change these values incrementally.

     

     

    In Preview Mode, click Shift to make the Hotspots temporarily visible so that you can locate their position.

    Style

    You can choose to style a Hotspot into a rectangular shape or elliptical shape.

    To choose the style of a Hotspot:

    1. Select a Hotspot
    2. Go to the Right Sidebar and click the Format Tab to open the Format Panel
    3. Navigate to the Hotspot Style section and choose between Rectangular and Ellipse

    03._Interactions_-_Hotsphots_-_Format_Hotspots_-_Style.gif

    Visibility

    In Edit Mode, all Hotspots on a page are visible with a translucent green overlay.

    If you want to make all Hotspots invisible as you work on the project:

    1. Click the Interactions Tab to open the Interactions Panel
    2. Go to the Hotspots section and untick Show hotspots

    04._Interactions_-_Hotsphots_-_Format_Hotspots_-_Visibility.gif

     
    To make an individual Hotspot invisible, follow the instructions to Set Invisible State in the Object Interactions article.

    Add Interactions to Hotspots

    Every interaction is composed of three parts: a Trigger, an Action, and a Target.

    • A Trigger is the event that sets an interaction in motion.
    • An Action is an instruction that runs after a trigger is engaged.
    • A Target is the final outcome that’s visible at the end of an interaction.

    The process of adding an interaction to a Hotspot is exactly the same as adding one to any other object. However, in this case, the ‘object’ is an invisible Hotspot representing an interactive area on the page.

    You can add either Page Interactions or Object Interactions to a Hotspot.

    Check out our Page Interactions article and Object Interactions article for more information about these interactions, as well as detailed instructions about how to apply these to all objects, including Hotspots.

    But if you want to get right to work, here are some brief instructions:

    To add an Interaction to a Hotspot:

    1. Select the Hotspot to which you want to add the interaction
    2. Click the Interactions Tab to open the panel
    3. Go to the Add Interaction section
    4. Choose a Trigger from the ON dropdown
    5. In the DO dropdown, select an Action from the Page Interactions list or the Object Interactions list
    6. Set a target in the TARGET section
    7. Click Done to apply the interaction

    05._Interactions_-_Hotsphots_-_Add_Interactions_to_Hotspots.gif

    Edit, Duplicate or Delete Interactions

    When you apply an interaction to an object, it immediately appears in the Interactions List at the top of the Interactions Panel. As you add more interactions to that same object, you’ll see them appear there as well. You can easily edit or delete any interaction from the list – or duplicate an interaction for quick reuse.

    Edit Interaction

    Editing an interaction is useful when you want to change parts of an already existing interaction. By using the editing function, you can update the Trigger, the Action, or the Target individually – without affecting the other parts of the interaction.

    To edit an interaction:

    1. Select the object or group of objects whose interaction you wish to edit
    2. Click the Interactions Tab to open the Interactions Panel
    3. At the top of the panel, locate the interaction you want to edit
    4. Click the Tool icon
    5. Change the interaction in the Update Interaction section
    6. Click Update to save your changes
    7. Your updated interaction will flash yellow in the list for a few seconds

    06._Interactions_-_Hotsphots_-_Edit_Interaction.jpg

    Duplicate Interaction

    Often, you may want to apply different variations of an interaction to the same object. The Duplicate function lets you duplicate an extant interaction, and then edit it’s Trigger, Action and Target to suit your needs.

    To duplicate an interaction:

    1. Select the object or group of objects from which you want to duplicate an interaction
    2. Click the Interactions Tab to open the Interactions panel
    3. At the top of the panel, locate the interaction you want to duplicate
    4. Click the Duplicate icon and an identical interaction will appear in the Interactions List at the top of the panel
    5. To edit the new interaction, click on the Tool icon and follow the steps from the Edit Interactions section of this article 

    07._Interactions_-_Hotsphots_-_Duplicate_Interaction.jpg

    Delete Interaction

    To delete an interaction:

    1. Select the object or group of objects from which you want to delete an interaction
    2. Click the Interactions Tab to open the Interactions panel
    3. At the top of the panel, locate the interaction you want to delete
    4. Click the Delete icon 

    08._Interactions_-_Hotsphots_-_Delete_Interaction.jpg