Creating Web Links

A Web Link is a tappable area in your app that opens a Web URL either in the device's in-app browser or default web browser.

For more information on creating links which take the user to content within the app or to spaces within the app, refer to the article "Creating Jump Links."

How to Create a Web Link

1. Select a frame in your Mag+ layout which will be tapped in order to show the Web Link.

Select a frame in your Mag+ layout which will be tapped in order to show the Web Link.
Note: The frame should be assigned to the A layer or to one of the B layers in your document.

2. In the Mag+ Object Panel, click on the "Link" button next to the "Add" label.

In the Mag+ Object Panel, click on the "Link" button next to the "Add" label.

3. A new frame is created and selected on the "C - Clickable Areas" layer. You can resize this to only cover a portion of your object.

A new frame is created and selected on the "C - Clickable Areas" layer. You can resize this to only cover a portion of your object.
Note: You can resize this clickable area to cover only the part of the object that you want to be tappable.

4. Resize the box to only cover the text "support.magplus.com."

Resize the box to only cover the text "support.magplus.com."

5. In the Mag+ Object Panel, make sure the Object Type of the new frame is set to "Hotspot."

In the Mag+ Object Panel, make sure the Object Type of the new frame is set to "Hotspot."

6. In the Mag+ Object Panel, make sure Hotspot Type is set to "Link."

In the Mag+ Object Panel, make sure Hotspot Type is set to "Link."

7. (Optional) In the Mag+ Object Panel, set a Highlight Color and transparency.

(Optional) In the Mag+ Object Panel, set a Highlight Color and transparency.

The Highlight Color sets the color of the Clickable Area frame to a swatch color. If selected, this color will be displayed in the exported Vertical when the user taps the Hotspot in order to provide feedback. The percentage box beside the drop-down menu sets the transparency associated with the color.

8. (Optional) In the Mag+ Object Panel, you can set a Trigger action for when the Link will be activated.

(Optional) In the Mag+ Object Panel, you can set a Trigger action for when the Link will be activated.

Trigger allows you to specify what needs to happen to trigger your link. The default is "On Tap." Note that the Clickable Area box is invisible when viewed live on a device. The box in InDesign simply defines the boundaries that become a Hotspot. The following options are available:

  • On Tap: The Hotspot will be triggered when a user taps on the Clickable Area box.
  • In View: The Hotspot will be triggered when the Clickable Area box comes into view on your layout.
  • Out of View: The Hotspot will be triggered when the Clickable Area box exits view on your layout.
  • Shake (iOS Only): The Hotspot will be triggered when the Clickable Area box is in view on your layout and the user shakes the device.
  • None: There is no user-accessible trigger. The Hotspot will only be triggered by another Link.

9. In the Mag+ Object Panel, enter the URL to visit when the user taps on the Hotspot area.

In the Mag+ Object Panel, enter the URL to visit when the user taps on the Hotspot area.

External URLs can open in two ways by choosing an option in the "Display In" drop-down menu:

  • Embedded: In an internal browser window that pops up over the screen.
  • External: Takes the user out of your app and to the native web browser.
Note: While the internal browser and external browser should be essentially identical, mobile Safari features faster Javascript performance and using the internal browser will force the web pages to contend with memory usage from the rest of your app.

If you choose to display the Web Link in an embedded browser, the "External Icon" drop-down menu lets you choose the following:

  • Show: Displays a button that lets the user leave the app and open that same page in the default device browser. 
  • Hide: Does not show a button that lets the user leave the app.

For more information on different types of URLs you can enter in the URL field, refer to the article "Reference - URL Format for Links in Apps."

How to Add an E-mail Link

One great interactive feature to add to your Mag+ Issue is the ability to tap a link and have a pre-populated e-mail open—this is great for letting users communicate with you or for giving them a way to share a snippet of a story, like a recipe. 

Note: This feature works for iOS devices only.

Here's how to create a link that opens an e-mail:

  • In the URL field of the Hotspot, you can enter one of the following:
    • If you want the email address to be pre-populated, type the address (i.e. mailto://sales@magplus.com).
    • If you want to pre-populate the subject, body or both enter something like the following: 
      mailto://sales@magplus.com?&subject=Check this out&body=Check out this awesome app!
    • If you want to pre-populate the subject and body but leave the address blank, enter something like the following:
      mailto://?subject=Check this out&body=Check out this awesome app!

When the user taps the Hotspot, it will open an e-mail window on top of the page. When the user hits Send or Cancel, it will return them to the screen in the app that they were reading. They do not have to leave your Mag+ app.

How to Link to Content in the iTunes Store

If using Mag+ version 4.0 or later with iOS 6 or higher, you can link to iTunes Store content and the reader won't have to leave your app to purchase or download it. The iTunes Store content will simply pop up a small window on top of the app.

Before you begin

You must know two things about the iTunes Store content you are linking to:

  • The Apple Product ID
  • The type of content

1. Find the item you wish to link to in iTunes.

Find the item you wish to link to in iTunes.

2. Click the downward arrow next to the Buy button and choose "Copy Link."

Click the downward arrow next to the Buy button and choose "Copy Link."

3. Paste the link in a text document.

Paste the link in a text document.

In the link is a number (the length of the number depends on the type of content). This number is the product id.

4. Enter the link in the URL field using the syntax listed below.

App Links

  • internal://itunes/app/433149149 - Link to an app (this is the Mag+ Reviewer app)

Music Links

  • internal://itunes/album/398684510 - Link to a music album (this is Opus Eponymous by Ghost)
  • internal://itunes/artist/611264 - Link to an artist or app company (this is Moving Media AB)

Movie Links

  • internal://itunes/movie/723143800 - Link to a movie (this is Ender's Game)

For more information on different types of URLs you can enter in the URL field, refer to the article "Reference - URL Format for Links in Apps."

How Links Work

When creating a Link you will have:

  • A frame on the C-Clickable Areas layer (called a Hotspot)
  • An original object on either the A- or B- layers that the Clickable Area references (Ref.Obj ID)

It is the Reference Object ID that tells the Clickable Area frame which object to "follow" when pinning or scrolling events occur. It is very important that the Reference Object ID of the Clickable Area frame actually exists.

Example: If a frame on the C-Clickable Areas layer (referred to as a Hotspot) has a "Ref.Obj ID" set to "a123", then there must be an object on either the A- or B- layers of the InDesign document with the Object ID "a123."

Important Notes About Links

  • Objects lose their set Object ID when grouped/ungrouped.
    To fix this, just select the original Clickable Area frame, note the value of the "Ref.Obj ID" and paste it as the Object ID for the object or group you wish the Clickable Area to follow.
  • Clickable Areas can't reference objects that are transparent.
    Clickable Areas will become disabled if referencing a transparent object because the object that activates the Clickable Area is invisible to the reader.
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk