Are you viewing the right article?

This article refers to Digital Publishing Suite. For the AEM Mobile article, see Hyperlinks.

You can use the Hyperlinks panel or the Buttons panel to create links that jump to websites, other articles, and more. Not all button actions and hyperlink types are supported in folios.

Hyperlink overlays are supported in scrollable frames and slideshows, but not other overlays.

Video Tutorial

Video Tutorial
<a href="http://bit.ly/qGZaft">Hyperlink Actions</a>
Colin Fleming

Use the Buttons panel to create links to websites, to another page, or to another article.

For best results, use the Buttons panel instead of the Hyperlinks panel to create links. The Buttons panel is more flexible and more stable.

  1. In InDesign, create the object to be used as the button.

    For example, if you want the button to jump to a website, create a text frame or place an image.

  2. Open the Buttons panel (Window > Interactive > Buttons), select the object, and click the Convert Object To Button icon.

  3. For Event, choose On Release.

    On Release is the only supported button event.

  4. Click the plus sign next to Action and select a supported action.

    Supported Button Actions
    Supported button actions

    A. Supported actions for hyperlink buttons B. Supported actions for slideshow buttons 

    Supported hyperlink actions include Go To First Page, Go To Last Page, Go To Next Page, Go To Previous Page, Go To URL, Sound, Video, and Go To Page. Go To Next State, Go To Previous State, and Go To State actions are supported for slideshows.

    Do not use the Go To Destination action to jump to a different article. Instead, use the Go To URL action with a “navto” format. See the related section later in this article.

  5. If desired, add additional button actions.

    Actions are played in sequence. For example, if the first action plays a video and the second action displays a different slide, the video plays, and then the slide is displayed.

  6. To change hyperlink settings, select the button object, and then specify these settings in the Folio Overlays panel:

    Open in Folio

    Display the content in a web view within the viewer. Deselect this option when linking to URLs such as itms://, mailto:, and tel:.

    Open in Device Browser

    Display the content outside the viewer in the mobile device browser, such as mobile Safari on the iPad. Select Ask First if you want a prompt to appear when users tap the link.

In InDesign, you can use the Hyperlinks panel to add hyperlinks. Hyperlinks are especially useful for text. If you want a frame to be a hyperlink, consider using the Buttons panel instead of the Hyperlinks panel. Buttons are more versatile and more stable.

  1. Select the frame or text that you want to use as a hyperlink.

  2. Open the Hyperlinks panel (Window > Interactive > Hyperlinks).

  3. In the Hyperlinks panel, choose New Hyperlink from the panel menu.

  4. Deselect Shared Destination.

    Shared Destination lets you name and reuse hyperlinks, but it’s better to avoid using this option in the DPS workflow.

  5. In the Link To menu, specify any of the following options, and then click OK:

    URL

    Tapping a URL hyperlink displays a web page (http://), an App Store application (itms://), an Amazon Appstore application (amzn://), or a different article (navto://).

    Example: http://www.adobe.com

    When linking to websites, type the entire URL, including “http://.”

    Note:

    When linking to an iTunes URL, deselect Open in Folio in the Folio Overlays panel. Otherwise, a “Cannot Open Page” error message appears when the hyperlink is tapped. Similarly, if you use an itms:// or amzn:// format to link to a store app, turn off Open In Folio.

    A navto:// hyperlink jumps to a different article or a different page in that article. Type navto:// followed by the article name as it appears in the Folio Builder panel. Use the Article Name value, not the article’s Title value. If you want to include a page number, add # followed by a number. But keep in mind that the first page is 0, so adding #2 jumps to page 3.

    Example: navto://newsarticle

    Example: navto://newsarticle#2 (jumps to page 3)

    Email

    Tapping an Email hyperlink launches the Mail app with the To field filled in.

    Page

    Tapping a Page hyperlink jumps to a different page within the article. Do not use this option for jumping to a different article.

    The Text Anchor hyperlink is not supported.

  6. To change hyperlink settings, select the hyperlink objects, and then specify these settings in the Folio Overlays panel:

    Open In Folio

    Display the content in a web view within the viewer. Deselect this option when linking to URLs such as itms://, mailto:, and tel:.

    Open In Device Browser

    Display the content outside the viewer in the mobile device browser, such as mobile Safari on the iPad. Select Ask First if you want a prompt to appear when users tap the link. This option is disabled if Open In Folio is selected.

    Note:

    The Folio Overlays panel settings are not available for text hyperlinks. You cannot change settings for text hyperlinks; they are set to Open In Folio by default. However, the viewer includes built-in exceptions for certain prefixes such as itms://, tel:, and mailto:. For these URLs, an external app is opened by default.

For additional details on creating hyperlinks, see Create hyperlinks in InDesign CS5/CS5.5 Help.

Folio articles are stored on a server, so any link that specifies a path to an InDesign file is broken when previewed. Use the “navto” format to link to other articles.

When creating either a button or hyperlink, you can replace “http://” with “navto://” in the URL field. Then specify the target article name as it appears in the Folio Builder panel. Use the Article Name value, not the article’s Title value. Valid navto formats include navto://[articlename] and navto://[articlename]#n. Adding #n specifies a page number. The first page of a document is 0, so specifying #2 jumps to page 3.

Create links using navto
Jumping to page 3 of a different article

Navto examples:

navto://biking

navto://biking#2 (jumps to page 3 of biking article)

Note:

If you used a previous version of the tools to create a navto link using a folder name or article name that differs from the target article name, your links are broken. To fix the navto links, you can either rename the article (the name, not the title) or edit the navto links to point to the article name as it appears in the Folio Creator panel.

The v30 release introduced new relative options for article and page navigation. Note that relative navto formats are supported only in v30 or later apps, but you can use any folio format (v20 or later). Relative navto links are supported in the iOS, Android, and Windows Store viewers, but not supported in the desktop viewer or web viewer.

You can use various navto://relative formats to jump to the next, previous, first, or last article, or to reset the folio. For example, a button with a navto://relative/first action jumps to the first article in the folio. Valid formats include first, last, next, previous, current, and reset. You can also jump to a specific article relative to its position in the folio, such as the fifth article.

Example: navto://relative/last (jumps to last article in folio)

Example: navto://relative/last#last (jumps to last page of last article in folio)

Example: navto://relative/4 (jumps to fifth article in folio)

Example: navto://relative/4#2 (jumps to third page of fifth article in folio)

Using the "current" format is especially useful for page navigation. You can use #previous, #next, #first, #last, and you can jump to a specific page, such as #3 to jump to page 4 of the article.

Example: navto://relative/current#previous (jump to previous page in article)

Example: navto://relative/current#last (jumps to last page in article)

Example: navto://relative/current#3 (jumps to fourth page in current article)

Use the navto format to create a button that resets the folio.

Example: navto://relative/reset (jumps to the first article and clears all article reading positions)

In Smooth Scrolling articles, you can use decimals or percentages to jump to a specific position.

Example: navto://myarticle#3.3 (jumps to a specific position in smooth scrolling article that displays the bottom of page 4 and the top of page 5)

Example: navto://myarticle#50% (jumps to the middle of smooth scrolling article)

To extend these relative navto capabilities, you can create a Web Content overlay or HTML article that accesses the Reading API. For example, you can query the folio to determine information such as how many articles are in the folio and how many pages are in an article. You can then display this information or use it in another way within the overlay or HTML article. For more information, see New APIs and features in r30 in DPS Developer Center.

When you create a URL-based hyperlink or button, you can use the “navto://” URL to jump to a different article. Navto is especially useful for jumping to HTML articles.  

Jump to HTML article

Type navto:// followed by the HTML article name (not the article title).

Example: navto://newsarticle

Jump to anchor in HTML article

You cannot jump to a specific page within an HTML article, but you can jump to an anchor by typing navto://[articlename]#[anchorname].

Example: navto://newsarticle#part4

Note:

To define an anchor in an HTML file, open the HTML file in a text editor. Navigate to the text that you want to act as an anchor, and enclose the text with an anchor tag, such as “This is Part 4 of the Article.”

Jump to InDesign article from HTML article

Use the navto format to create a hyperlink from an HTML article to an InDesign article. Example:

<a href="navto://newsarticle">See the News Article</a>

You can also navigate to pages within an InDesign article by adding the page number after the document name. The first page of the document is 0, and the second page is 1, and so on. Example:

<a href="navto://Cycling#3">Go to Page 4 of the Cycling Article</a>

Jump from HTML to HTML

Use the navto format to jump from one HTML article to another using the folder name. Example:

<a href="navto://newsarticle">See the News Article</a>

You can create buttons that go to the library, to the list of sections, or to the last view (Back button). Use any of these goto:// formats in a button action:

goto://ApplicationViewState/library

goto://ApplicationViewState/sections

goto://FolioNavigation/lastview

These goto:// formats are not supported in the legacy AIR-based Android viewer. Only the "library" and "lastview" formats are currently supported in the native Android viewer.

If you have an Enterprise DPS account, you can use the goto format to create links from articles to the HTML content associated with custom icons. For example, you can use the DPS App Builder to specify custom icons for “Store,” “Help,” and “Terms.” These buttons appear in the viewer library. To create a button in an article that opens the HTML content for any of these custom icons, use the following format:

goto://ApplicationViewState/[label]

For example, the goto://ApplicationViewState/Store button action would open the HTML store—just like tapping the custom Store icon in the library.

Use the DPS App Builder to create custom icons and specify labels. See Navigation Toolbar (Enterprise only).

These goto formats do not work when linking from the library or a custom slot to another custom slot. Instead, use the goToState API. See the Library and Store SDK.

You can create a hyperlink or button that displays a local HTML, image, or PDF file in the viewer’s in-app browser.

  1. Add a folder containing the local HTML file to the HTMLResources folder.

    Make sure that the HTMLResources folder is included in the folio. See Import HTMLResources folder.

  2. Create a link to display the HTML file in the in-app browser:

    InDesign source document

    In the URL field of either a hyperlink or button, enter the path without http://, navto://, or any other prefix. Example:

    HTMLResources/Cartoons/train1.html

    HTML article

    From an HTML article, specify the location. Example:

    <a href=”../HTMLResources/Cartoons/train1.html”>See Train Cartoon Gallery</a>

    To reference a PNG image, for example, do this:

    <a href=”../HTMLResources/Cartoons/train2.png”>See Train Image</a>

    Web Content overlay

    Web Content overlays are nested two levels deeper than an HTML article. Example:

    <a href=”../../../HTMLResources/Cartoons/train1.html”>See Train Cartoon Gallery</a>

    Note:

    For best results, avoid spaces and special characters in your HTML folders and files. If you include a space in a folder or file name, use the appropriate HTML code for the space character. For example, use “Cartoon%20Files” for a folder called “Cartoon Files.”

You can create a link that sends an email message (mailto:), a text message (SMS), or calls a number (tel:) from an article. You can also create links that open the YouTube app or an iTunes song or album. To learn more about the required formats to use for iOS devices, see the Apple URL Scheme Reference.

For information about creating advanced email (mailto:) links, see James Lockman’s article Sending email and email attachments from DPS publications.

If you specify an Optional URL Scheme when using DPS App Builder to create an iOS app, you can link to that app from another app or when viewed from a webpage in mobile Safari. See Viewer Details panel.

Note:

Whenever you create a link to an external app or service, select the button and choose the Open In Device Browser option in the Folio Overlays panel.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy