How to Add Advanced HTML Hyperlinking with in5

Update (Oct. 15 2018):

It’s now waaay easier to control how each of your hyperlinks open.

You don’t have to manually edit the hyperlink URL (as described below).

In version 3.3 of in5, you simply choose the option you want from the Hyperlink panel (in5 > Interactive Widgets).

Woohoo!

---

InDesign has many strengths as an interactive layout tool.

One of its limitations, however, is that it doesn’t let you set a target attribute when creating a hyperlink. The target attribute lets you control how a hyperlink is open.

In this article, I’m going to take you on a deep dive of a new features that we’ve added in in5 version 2.6: Advanced Hyperlink Targeting.

Not only can you use this feature to control links in your web-based HTML, it also gives you a high degree of control in Web Apps, Baker Framework apps, and PhoneGap apps.

If you’re looking for a basic primer on hyperlinks in InDesign, start with this article first.

How to Set a Target in InDesign

Starting with in5 2.6, a target can be in InDesign by adding a query string to the URL.

For example:

https://example.com/

Would become:

https://example.com/?target=_self

In this case, _self is the target. I’ll get to all the different targets that you can use below.

If the URL already has a query string—the part at the end with a question mark (?)—the target can be appended with a ampersand.

For example:

https://example.com/?qvar=true

Would become:

https://example.com/?qvar=true&target=_self

Note that all in5-supported targets begin with an underscore (_).

Let’s talk targets and how they can be useful for your interactive projects.

For the Web (and Elsewhere)

The default target for content exported with in5 is _blank, which causes a link to be loaded into a new tab or browser.

There are several cases where you want to load content into the same window/tab and replace the existing content. To do so, you can use _self as the target value.

If your in5 content is nested inside of an iframe on another webpage and you’d like load a link into the parent page (rather than into the iframe), you can use _top as the target value.

If your in5 content is in the topmost window (i.e. not in an iframe), _top will act like _self.

Targeting Specific Links in the Lightbox

The lightbox that is built into in5 lets you load pages in an overlay, so that users don’t have to leave your site or app to see outside content.

Using the lightbox for links is a global setting, so it applies to all links. But sometimes you only want to apply the lightbox to certain links.

If you set a target value of _lightbox in5 will load that link into a lightbox, even if you have the global lightbox setting turned off.

What if you have the global setting turned on, and you just want to exclude individual links from using the lightbox?

No problem, we’ve got you covered. Simply add a query string of lightbox=0 to the hyperlink, e.g.:

https://example.com/

Would become:

https://example.com/?lightbox=0

For Web Apps

A Web App gives you the app experience without the headache.

In some cases, you may want to load content into your Web App, instead of loading the link in the devices browser. The _self target doesn’t cut it on iOS for some reason, so we’ve also added support for a target value of _app for loading a link into a Web App.

For PhoneGap and PhoneGap Build Apps

PhoneGap lets you create mobile apps from HTML, which makes it a great pairing with in5.

In certain cases, you may want to load a link into the device’s web browser. For that we’ve added support for the _system target.

Links for Baker Framework Apps

The Baker Framework is/was another great way to create mobile apps from HTML. Baker has built-in advanced linking which is supported by in5.

Baker supports the use of a referrer parameter, e.g.:

<a href="https://www.example.com?referrer=Baker">External link</a>

There are two different behaviors associated with external links, based upon the referrer query parameter:

• referrer=Baker: Baker will open the linked page in the modal internal browser.
• referrer=Safari: Baker will open the link directly in Safari Mobile.

If the referrer attribute is not specified or it is different from Baker or Safari, Baker will load the content of the linked page inside the current page, replacing its content with the new one.

Baker’s modal dialog can be a great option when a site does not allow loading into a standard lightbox.

Source: How to manage links and URLs

Summary

Here’s a quick recap of all the new target options.

• _self — Loads a URL into the same window.
• _top — Loads a URL into the topmost browser window.
• _lightbox — Loads an individual URL into the in5 lightbox.
• _app — Loads the URL into a Web App window (instead of the device’s browser).
• _system — Loads the URL in the device’s browser within a PhoneGap app.

Download in5 and start creating interactive content >>