# Hyperlink

### Overview

The hyperlink control allows links to be added to a webpage to navigate a user outside of Airkit to and external URL in a new tab or to download a file.

### Control Details

#### Control Properties

**HREF**

This property specifies the URL to direct the user to when the link is clicked.

**Text**

The label that the user will see for the hyperlink

### Actions

**Clicked**

This event is fired when a user clicks the hyperlink. Please note that the user will navigate to the hyperlink regardless of what happens within this event, this event is designed to allow for additional actions and analytic tracking with Airkit's journey if desired.&#x20;

### Styling

Most [Web Controls](web-controls-overview) have a [common set of styling properties](web-controls-overview/common-style-properties-of-web-controls).

### Examples

#### Example 1: Linking to an External URL

![mceclip0.png](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-96a86d98ce9f4f09866f6a69a7498b6b7e076595%2Fhyperlink-web-control-v1715-0.png?alt=media)

In this example, the link with Label (Text) "Click Me" takes the to user to the specified website.

&#x20;

#### Example 2: Linking to a dynamic URL

![](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-feb7666302dddf1392f1e85c98b0a2bc7b5451d2%2Fhyperlink-web-control-v1715-1.png?alt=media)

In this example, we're using a variable **productId** in order to create a dynamic link based on the current value.  In the example above we are changing the URL using the [\{{ \}}](../airscript/working-with-text) syntax to insert a variable directly into a string.  This could also be used inside of a [List Control](list-web-control) template if you had multiple records (products in this example) that you wanted to link to each respectively. Check \[Lists with arrays] (working-with-data-overview.md) for more info.

&#x20;

#### Example 3:  Downloading a generated file

![](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-8f314a4d730f11b7925202d3d891139636b4a5e9%2Fhyperlink-web-control-v1715-2.png?alt=media)

In this example we have a variable ![](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-5bebde02de3a14638a9525b41abc45944caed9fe%2Fhyperlink-web-control-v1715-3.png?alt=media) that is an [Asset](../variable-data-types/the-asset-data-type) data type so we can access the **downloadURL** on the variable for the **href** and if the user clicks the link it downloads the file to the browser.  Check how to create [files and the asset data type](../building-apps/assets/working-with-files-and-media).

&#x20;

#### Example 4: Running an Action after a Click

![](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-e05cb4ae985f1c4b7e204f700680b3967db4f01b%2Fhyperlink-web-control-v1715-4.png?alt=media)

Extending the example above that downloads a generated file, we can also attach some [Actions](../building-apps/assets/working-with-files-and-media) to the **Clicked** event.  In this case when the user clicks the link to download the file it will start a [Timer Action](../actions/the-create-timer-action) that will start within five days and then send an SMS asking for CSAT/feedback through a [Chat Bot Action](../actions/the-start-chat-bot-action).
