Clickable Mockups – Wireframes with super interactivity.

What good is a wireframe if you cannot simulate the basic navigation using links across different pages?

MockupTiger when released had Clickable prototyping feature using the Text widgets

The navigation is done by pressing the shift key and the mouse button on the linked text. In the presentation mode, it will behave just like a web page.

Recently, we introduced the linking of objects through Icons and a new dedicated icon named ‘hotspot’.

Hotspot is just an Icon with a square frame, the first icon you see in the icon list


When you drag the hotspot, it comes with a transparent background by default


You can drag and expand or contract the size the way you do it with any other icon

You can overlay this hotspot icon over any other widget to simulate clickability.


Above, the hotspot is stretched and overlayed on top of the comment bubble.

But where is the link?

All icons have the ability to define the link the same we define links for the text widgets.

Double click on the hotspot to bring up the text editor


Now you can press shift and the mouse button on the hotspot icon to jump to the linked page.

Similary you can drag any icon and add the link.

For e.g Consider the Map icon


We will add a link to this Map icon by just including the link tag (make it clickable)



NOTE: The position of the link tag is not relevant. You can place the link tag anywhere before the text, after the text, middle of text or without text.

Before Text


In between text


With no text



Remember: For external links, the link SHOULD include the full url and start with http://

For internal pages you just need the document reference as explained in the clickable prototyping with text widgets