Tutorial Hub

Wix Studio Tutorial – How to Add a Link to a Container

Navigating to a Local Page

import wixLocationFrontend from 'wix-location-frontend';
 
$w.onReady(function () {
  $w("#myContainer").onClick(() => {
    wixLocationFrontend.to("/about-us");
  });
});

Navigating to a Local Page with Query Parameters

import wixLocationFrontend from 'wix-location-frontend';
 
$w.onReady(function () {
  $w("#myContainer").onClick(() => {
    wixLocationFrontend.to("/products?category=electronics&id=123");
  });
});

Navigating to an External Web Address

import wixLocationFrontend from 'wix-location-frontend';
 
$w.onReady(function () {
  $w("#myContainer").onClick(() => {
    wixLocationFrontend.to("https://www.example.com");
  });
});

Navigating to a Document in the Media Manager

import wixLocationFrontend from 'wix-location-frontend';
 
$w.onReady(function () {
  $w("#myContainer").onClick(() => {
    wixLocationFrontend.to("wix:document://v1/your-document-id/your-file.pdf");
  });
});

Opening an Email Client

import wixLocationFrontend from 'wix-location-frontend';
 
$w.onReady(function () {
  $w("#myContainer").onClick(() => {
    wixLocationFrontend.to("mailto:info@example.com?subject=Inquiry");
  });
});

Initiating a Phone Call

import wixLocationFrontend from 'wix-location-frontend';
 
$w.onReady(function () {
  $w("#myContainer").onClick(() => {
    wixLocationFrontend.to("tel:+1-555-123-4567");
  });
});

Leave a Reply