Storyline 360: Working with Hyperlinks

Hyperlinks are a great way to add interactivity to your courses. They let learners jump directly to the content they need.

• Hyperlinking to a Web Page
• Hyperlinking to a File
• Hyperlinking to Another Part of the Course
• Hyperlinking to an Email Address
• Changing the Color of Hyperlinked Text
• Editing a Hyperlink
• Previewing Courses with Hyperlinks
• Making Hyperlinks Accessible

Hyperlinking to a Web Page

To add a hyperlink that opens a web page, select the item you want to be clickable, then do any of the following:

• Press Ctrl+K.
• Go to the Insert tab on the Storyline ribbon and click Hyperlink.
• If you’re adding a hyperlink to text, you can also right-click the text and choose Hyperlink.

When the Trigger Wizard appears, set the following properties for your hyperlink and click OK.

Hyperlinking to a File

The best option for hyperlinking to a file is to upload the file to a web server, then link to its URL using the method above.

Another option is to embed the file in your published output. Select the item you want to be clickable, then do any of the following:

• Press Ctrl+K.
• Go to the Insert tab on the Storyline ribbon and click Hyperlink.
• If you’re adding a hyperlink to text, you can also right-click the text and choose Hyperlink.

When the Trigger Wizard appears, set the following properties for your hyperlink and click OK.

 

Tips for working with file hyperlinks:

• Storyline will place a copy of each hyperlinked file in your published output. All hyperlinked files for a course will be stored in the published folder called story_content/external files.
• Depending on the type of file you’re attaching and learners' security settings, the file may simply open when clicked, or learners may be prompted to save it first.
• To attach files to a course and make them accessible on all slides, attach them as player resources instead.

Hyperlinking to Another Part of the Course

To link to another scene, slide, or layer in the same course, select the item you want to make clickable, then do any of the following:

• Press Ctrl+K.
• Go to the Insert tab on the ribbon and click Hyperlink.
• If you're adding a hyperlink to text, you can also right-click the text and choose Hyperlink.

When the Trigger Wizard appears, set the following properties for your hyperlink and click OK.

Hyperlinking to an Email Address

To add a hyperlink that opens a new mail message to a specific email address, select the item you want to be clickable, then do any of the following:

• Press Ctrl+K.
• Go to the Insert tab on the Storyline ribbon and click Hyperlink.
• If you’re adding a hyperlink to text, you can also right-click the text and choose Hyperlink.

When the Trigger Wizard appears, set the following properties for your hyperlink and click OK.

 

Optional parameters for email links:

Email links can include additional parameters, such as:

 

Here's an example of an email link with a subject line and some default body text:

Changing the Color of Hyperlinked Text

By default, when you add a hyperlink to text, the text color changes and an underline appears. The hyperlink color comes from your theme colors. Here's how to change it:

1. In Slide View, go to the Design tab on the Storyline ribbon and click Colors.
2. The theme colors you're currently using will be marked by a thin orange outline. If you're using a custom theme, right-click it and choose Edit. If you're using a built-In theme, choose Create New Theme Colors (since built-in colors can't be edited).
3. When the color editor opens, change the Hyperlink color to the color of your choice. To learn more about editing theme colors, see this user guide.
4. Click Save to close the color editor. (If you're creating new theme colors, enter a name for the new theme when prompted.)

Editing a Hyperlink

To edit a hyperlink that you applied to text, place your cursor somewhere in the hyperlinked text, then do any of the following:

• Press Ctrl+K.
• Double-click the trigger in the Triggers panel.
• Go to the Insert tab on the Storyline ribbon and click Hyperlink.
• Right-click and select Edit Hyperlink.

To edit a hyperlink that you applied to anything other than text, select the object and do either of the following:

• Press Ctrl+K.
• Double-click the trigger in the Triggers panel.
• Go to the Insert tab on the Storyline ribbon and click Hyperlink.

When the Trigger Wizard appears, modify any of the settings and click OK.

Previewing Courses with Hyperlinks

When you preview a course, you may find that hyperlinks don't work as expected. To properly test hyperlinks, you'll need to publish your course.

Making Hyperlinks Accessible

With a few design tweaks, you can ensure that all learners can easily navigate hyperlinks. Here are some ways to boost hyperlink accessibility:

• Use descriptive links. Learners should be able to understand a link’s purpose without reading the surrounding content. Communicate the purpose of a hyperlink and its destination directly in the linked text. Instead of vague phrases like "Click here" or “Read more”, be specific with something like "Read our policy statement." (2.4.4 Link Purpose [In Context])
• Ensure keyboard navigation. Hyperlinks should be easily accessible and operable in a logical order when using the keyboard. In Storyline 360, text publishes with the proper semantic formatting for links and other elements so all learners can explore content effortlessly. (2.1.1 Keyboard)
• Choose visible focus indicator colors. Keyboard users need to be able to see selected objects easily. A clear focus indicator helps learners navigating with a keyboard know where they are on the page. In Storyline 360, you can customize the accessible focus indicator with two colors. Using the two-color focus indicator with sufficient color contrast helps learners see the focus rectangle on dark and light backgrounds. (2.4.7 Focus Visible and 1.4.3 Contrast [Minimum])
• Add alternative (alt) text for image hyperlinks. When an image is the only content of a hyperlink, use alt text to describe its purpose. For example, tell learners that clicking the magnifying glass icon activates the search function or that selecting the print icon opens the browser’s Print window. (1.1.1 Non-text Content and 3.2.4 Consistent Identification)
• Indicate if a hyperlink opens in a new browser tab or window. In the linked text, let learners know if the content will open in a new browser tab or window so they’re not disoriented. (3.2.1 On Focus)
• Don’t depend on color alone. Your hyperlinks should have sufficient color contrast, underlined linked text, and clear instructions for images with links so learners know they are interactive. (1.4.1 Use of Color and 1.4.3 Contrast [Minimum])
• Avoid redundant links. A hyperlink is redundant if it’s next to another hyperlink that goes to the same destination. That results in unnecessary announcements for screen reader users and repetitive navigation for keyboard users. Combining redundant links into one hyperlink creates a smoother navigation experience for all learners.

You Might Also Want to Explore:

Working with Triggers