Skip to content

link#

The link property provides a visual link chooser in the Miva Page Builder interface. It allows users to select a destination within the store — such as a product, category, or page — and optionally set whether it should open in a new tab.

Use this property for buttons, banners, or linked content areas that need internal navigation.

{
  "code": "cta_link",
  "prompt": "CTA Link",
  "type": "link",
  "required": true,
  "supports_new_tab": true
}

Supported Fields#

Field Type Required Description
code string Yes Unique key used in l.settings:instance.
prompt string Yes Label shown in the admin interface.
type string Yes Must be "link".
required boolean No If true, the user must select a link target.
supports_new_tab boolean No Allows setting target="_blank" in UI.
preview_property_selector string No Used to target preview DOM nodes.
visibility_conditions object No Used for conditional UI logic.

l.settings:instance Structure#

Product Link

:link:cta_link:new_tab=0
:link:cta_link:type=product
:link:cta_link:url=https%3A%2F%2Fexample.com%2Fproduct.html
:link:cta_link:value=SHIRT-123

Category Link

:link:cta_link:new_tab=1
:link:cta_link:type=category
:link:cta_link:url=https%3A%2F%2Fexample.com%2Fcategory.html
:link:cta_link:value=CATEGORY-CODE
Page Link

:link:cta_link:new_tab=0
:link:cta_link:type=page
:link:cta_link:url=https%3A%2F%2Fexample.com%2Fpage.html
:link:cta_link:value=contact_us
External URL

:link:cta_link:new_tab=1
:link:cta_link:type=url
:link:cta_link:url=https%3A%2F%2Fexternalwebsite.com
:link:cta_link:value=https%3A%2F%2Fexternalwebsite.com

Template Usage#

Use miva_url_decode to decode the URL:

<mvt:assign name="g.url" value="miva_url_decode( l.settings:instance:cta_link:url )" />
<a href="&mvte:global:url;">
  Visit Link
</a>

To convert the numeric new_tab to HTML-compliant target values:

<mvt:if expr="l.settings:instance:cta_link:new_tab EQ 1">
  <mvt:assign name="g.target" value="'_blank'" />
<mvt:else>
  <mvt:assign name="g.target" value="'_self'" />
</mvt:if>

JavaScript Access#

<script>
  var instance = <mvt:eval expr="miva_json_encode( l.settings:instance, '' )" />;
  var link = instance.cta_link.url;
  var type = instance.cta_link.type;
  var target = instance.cta_link.new_tab;
</script>

Use this to dynamically wire CTA links in your frontend logic.

defaults Definition#

You can define a default link value like so:

"defaults": {
  "cta_link": {
    "type": "url",
    "url": "https%3A%2F%2Fexample.com",
    "value": "https%3A%2F%2Fexample.com",
    "new_tab": 1
  }
}

Best Practices#

  • url and value are both URL-encoded. Always decode before use in display or logic.
  • The value field depends on the type:
  • product: contains the product code
  • category: contains the category code
  • page: contains the page code
  • url: contains the URL itself (encoded)
  • These values are flattened — there’s no nested object. Every field uses its own prefixed key path under l.settings:instance.

Complete Example#

{
  "code": "cta_button_link",
  "prompt": "CTA Button Link",
  "type": "link",
  "required": true,
  "supports_new_tab": true
}

Output#

:cta_button_link:url=/product/sale-item.html
:cta_button_link:target=_blank

Template#

<a class="btn" href="&mvte:instance:cta_button_link:url;" target="&mvte:instance:cta_button_link:target;">
  View Product
</a>