CodeAPI

LinkableMixin

Provides functionality for elements that can acts as links.

Table of Contents

PROPERTIES

?
Store values associated with an object.
linkSets or gets the element's link.
targetSets or gets the target of the element's link.

link

Sets or gets the element's link.

Description

When the element is clicked, the browser navigates to the link location.

The different types of links you can use are:

  • /localPageURL: another page on your site
  • /: your site's home page
  • http(s)://<url>: an external web address
  • wix:document://<location>: a document stored in the Media Manager
  • mailto:<email-address>?subject=<subject>: an email
  • tel:<phone number>: a phone number

The link property attempts to properly encode the URL value that you set. For example, .../some page is encoded to .../some%20page. However, some URLs do not have one unambiguous encoding. In those cases it is up to you to encode the URL to reflect your intentions. Because of these situations, it is a best practice to always encode URLs before you set them as the value of the link property. Regardless of how you set the link property, when you get its value, it returns an encoded URL.

Note that Wix URLs do not contain spaces. A page which has spaces in its name has its spaces replaced with dashes (-). Similarly, a dynamic page URL which contains the value of a field in your collection with spaces has its spaces replaced with dashes (-).

See Also

target

Syntax

get link(): string
set link(value: string): void
TYPE
?
string
DEFAULT VALUE
?
An empty string

Examples

Get the link URL from an element

let url = $w("#myElement").link;   // "http://mysite.com"

Set an element to open a local link

$w("#myElement").link = "/about-me";

Set an element to open an external web link

$w("#myElement").link = "http://wix.com";

Set an element to open an external web link in a new browser page when clicked

$w("#myElement").link = "http://wix.com";
$w("#myElement").target = "_blank";

Set an element to open a new email window when clicked

$w("#myElement").link = "mailto:a@b.com?subject=Something%20Intersting";

Set an element to open a document

$w("#myElement").link = "wix:document://v1/9bec_52fb06ea/filename.xls";

Set an element to make a phone call when clicked

$w("#myElement").link = "tel:+1-555-555-5555";

target

Sets or gets the target of the element's link.

Description

An element's target determines where its link opens. The target can be set so the link opens in the current page or in a new page.

Supported values are:

  • "_blank": The link opens in a new tab or window.
  • "_self": The link opens in the tab or window.

Note

Link targets are only supported for external web links (e.g. http://www.wix.com).

See Also

link

Syntax

get target(): string
set target(value: string): void
TYPE
?
The kind of data the property stores.
string
DEFAULT VALUE
?
The value of a property before you explicitly set it.
"_blank"

Examples

Get the link target from an element

let url = $w("#myElement").target; // "_blank"

Set the link target for an element

$w("#myElement").target = "_blank";

Set an element to open an external web link in a new browser page when clicked

$w("#myElement").link = "http://wix.com";
$w("#myElement").target = "_blank";