$w.LinkableMixin

$w.LinkableMixin

Provides functionality for elements that can acts as links.

Contents

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

link

Sets or gets the element's link.

Syntax

get link(): string
set link(value: string): void

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 (-).

Type

String

Examples

Get the link URL from an element

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

Set an element to open a local link

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

Set an element to open an external web link

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

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

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

Set an element to open a new email window when clicked

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

Set an element to open a document

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

Set an element to make a phone call when clicked

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

Default Value

An empty string

See Also

target

target

target

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

Syntax

get target(): string
set target(value: string): void

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.

Type

String

Examples

Get the link target from an element

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

Set the link target for an element

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

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

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

Default Value

"_blank"

See Also

link