Linking up your screens

Out of the box, once you have captured a sandbox it will have automatically created links between your screens based on the order you captured them in.

This means your sandbox will work immediately, but to make it a true sandbox and allow you to navigate around between screens, you’ll want to add more links.

With HowdyGo we automatically identify links across screens when you link them.

Creating a link

To start creating links, toggle on the “Link” mode in the editor.

Selecting an element

As you hover over elements in your UI HowdyGo will prompt you with the outline of the element. It will automatically preference <a> tags and <button> tags, but anything can be linked.

If HowdyGo identifies the wrong element, you can right click at any point in order to select an element further “up the tree”.

Adding the link

Once you’ve selected the element, you can click to open up the step selection menu.

In the menu above:

1. The blue selection box is the element that you’ve selected.
2. Your captured screens are automatically organized by the path in your original SaaS app. This makes it easy to find the screen you want to link to.
3. You can search for any screen by the path name.
4. The image shows a preview thumbnail of the screen you’re linking to.
5. HowdyGo identifies identical links across subsequent screens allowing you to add links across the entire demo very quickly. If you need to disable links from a given screen you can toggle individual screens on or off. Or apply a link only to the current screen you are on.

Removing a link

To remove a link, click on an existing link and select the “Unlink” icon.

By default, this will remove the link from the current screen. If you want to remove the link from all screens, you can select the “Remove link from all screens” option.

Change a link

To update a link, click on an existing link and select the new screen from the dropdown.

By default, this will apply the update across all matching links. If you want to apply the update to only the current screen, you can select the “Apply link only to current screen” option.

Follow a link

To make it easier to navigate through your demo and check screens. You can click on a link and then select the -> icon to follow the link in the editor.

Inbound and outbound links

To help you identify screens with potentially missing links, each thumbnail displays:

1. The number of inbound links to that screen
2. The number of outbound links from that screen

In the example above, we can see that the first screen has 49 inbound links and 7 outbound links. The second screen has 1 inbound link and 4 outbound links.

This helps you identify that the first screen is a “key screen” and likely branches off into the second screen.

The second screen has 4 outbound links, so it must include some links to other areas of your sandbox.

If the second screen only had 1 outbound link, this would indicate that it is a “leaf screen” and likely does not branch off into other areas of your sandbox.

Broken links

A broken link occurs when:

1. No other screens link to it.
2. The link is to a screen that does not exist.

HowdyGo will automatically identify broken links and display them in the thumbnail view, and also in the editor.