Browse Articles

Browse Articles

Engage '13: Adding Hyperlinks

Article Last Updated

This article applies to:

Hyperlinks are a great way to add interactivity to your interaction. They let learners jump directly to the content they need. In Articulate Engage, you can hyperlink to:

  • Other steps in the same interaction
  • Web pages
  • Email addresses

In this tutorial, we'll explore each type of hyperlink. We'll also look at how to change the color of hyperlinked text.

Hyperlinking to Another Step in the Same Interaction

Here's how to add a hyperlink that jumps to another step in your interaction:

  1. First, select the text you want to be clickable.
  2. Then do any of the following:
    • Press Ctrl+K.
    • Go to the first tab on the ribbon, and click Hyperlink.
    • Go to the Format Text tab, and click Hyperlink.
  3. When the Add Hyperlink window appears, set the following properties for your hyperlink:
    • Link Text: This field will already be populated with the text you selected, but you can change the text here if you'd like.
    • Action: Choose Jump to Step.
    • Step: Use the drop-down to select a step in your interaction.
  4. Click OK.

Hyperlinking to a Web Page

Here's how to add a hyperlink that opens a web page:

  1. First, select the text you want to be clickable.
  2. Then do any of the following:
    • Press Ctrl+K.
    • Go to the first tab on the ribbon, and click Hyperlink.
    • Go to the Format Text tab, and click Hyperlink.
  3. When the Add Hyperlink window appears, set the following properties for your hyperlink:
    • Link Text: This field will already be populated with the text you selected, but you can change the text here if you'd like.
    • Action: Choose Jump to URL.
    • URL: Enter the full URL of the web page for your hyperlink. If you want to make sure your link works properly, click the Check URL button (looks like a green check mark). It'll launch the URL in your default browser. Note: For non-public links, learners will need to have the necessary security permissions to access the content.
  4. Click OK.

Hyperlinking to an Email Address

Here's how to add a hyperlink that opens a new mail message to a specific email address:

  1. First, select the text you want to be clickable.
  2. Then do any of the following:
    • Press Ctrl+K.
    • Go to the first tab on the ribbon, and click Hyperlink.
    • Go to the Format Text tab, and click Hyperlink.
  3. When the Add Hyperlink window appears, set the following properties for your hyperlink:
    • Link Text: This field will already be populated with the text you selected, but you can change the text here if you'd like.
    • Action: Choose Send email to.
    • Email: Enter the destination email address.
  4. Click OK.

Tips for constructing mailto links:

Email links can include additional parameters, such as:

  • Multiple email addresses: Separate multiple email addresses with commas (but no spaces).
  • Subject line: To add a subject line, type ?subject= immediately after the email address followed by the text of the subject line. Do not use spaces. Replace spaces with %20.
  • Body text: To add default text to the body of the email, type &body= immediately after the subject line followed by the body text you want to use. Do not use spaces or line breaks. Replace spaces with %20. Replace line breaks with %0D%0A.

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

mailto:sales@articulate.com?subject=Articulate%20Engage&body=I%20want%20to%20learn%20more!

Changing the Color of Hyperlinked Text

When you add a hyperlink, the text color changes and an underline appears. Also, when learners hover over the hyperlink in your published interaction, a text highlight appears in a color that matches the hyperlink color.

The hyperlink color comes from the theme colors for your interaction. Here's how to modify it:

  1. Go to the first tab on the ribbon, and click Colors.
  2. The theme colors you're currently using will be highlighted in orange. 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 the 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 colors, see this tutorial.
  4. Click OK to return to your interaction. (If you're creating new theme colors, enter a Name for the new theme when you're prompted.)

Editing a Hyperlink

To edit an existing hyperlink, place your cursor anywhere in the hyperlinked text, and do any of the following:

  • Press Ctrl+K.
  • Go to the first tab on the ribbon, and click Hyperlink.
  • Go to the Format Text tab, and click Hyperlink.

When the Edit Hyperlink window appears, modify any of the settings, then click OK. Or, to remove the hyperlink altogether, click the Delete hyperlink button (looks like a red X).

Previewing Interactions That Contain Hyperlinks

When previewing an interaction, you may find that hyperlinks don't work as expected. To properly test hyperlinks, you'll need to publish your interaction, and test the hyperlinks in your published output.